jupiter-dynamic-forms 1.6.0 → 1.7.0

package/dist/index.mjs

@@ -527,13 +527,30 @@ 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) {
+  static createUniqueConceptId(concept, sectionId) {
+    let baseId = concept.id;
     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}`;
+      baseId = `${concept.id}_${roleSuffix}`;
     }
-    return concept.id;
+    if (sectionId) {
+      const sectionHash = this.createSectionHash(sectionId);
+      return `${baseId}__${sectionHash}`;
+    }
+    return baseId;
+  }
+  /**
+   * Create a short hash from section ID for concept uniqueness
+   */
+  static createSectionHash(sectionId) {
+    let hash = 0;
+    for (let i2 = 0; i2 < sectionId.length; i2++) {
+      const char = sectionId.charCodeAt(i2);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36).substr(0, 6);
   }
   /**
    * Build form schema from XBRL input data
@@ -579,11 +596,17 @@ class XBRLFormBuilder {
     const columns = this.generateDefaultColumnsForRole(role, periodStartDate || "2025-01-01", periodEndDate || "2025-12-31", hypercubeRole, nonAbstractConcepts, periodTypes);
     const availableColumnIds = columns.map((col) => col.id);
     console.log(`📋 Available column IDs for role "${role.id}":`, availableColumnIds);
+    if (availableColumnIds.some((id) => id.includes("multi_"))) {
+      console.log(`🔍 [DEBUG] Multi-dimensional role "${role.role}" - Total columns generated: ${columns.length}`);
+      columns.forEach((col, index) => {
+        console.log(`  Column ${index}: id=${col.id}, title=${col.title}, type=${col.type}`);
+      });
+    }
     const roleInfo = { periodTypes, availableColumnIds };
     const conceptTrees = [];
     if ((_a = role.presentationLinkbase) == null ? void 0 : _a.concepts) {
       role.presentationLinkbase.concepts.forEach((concept) => {
-        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate, roleInfo);
+        const conceptTree = this.buildConceptTree(concept, 0, periodStartDate, periodEndDate, roleInfo, role.id);
         if (conceptTree) {
           conceptTrees.push(conceptTree);
         }
@@ -592,16 +615,20 @@ class XBRLFormBuilder {
     return {
       id: role.id,
       title,
-      description: ``,
+      description: role.description || `Section for ${title}`,
       concepts: conceptTrees,
       columns,
-      expanded: false
+      expanded: false,
+      metadata: {
+        roleURI: role.roleURI,
+        originalRole: role.role
+      }
     };
   }
   /**
    * Build concept tree from XBRL presentation concept
    */
-  static buildConceptTree(concept, level, periodStartDate, periodEndDate, roleInfo) {
+  static buildConceptTree(concept, level, periodStartDate, periodEndDate, roleInfo, sectionId) {
     const label = this.getPreferredLabel(concept.labels);
     const fields = [];
     if (!concept.elementAbstract) {
@@ -645,7 +672,7 @@ class XBRLFormBuilder {
     const children = [];
     if (concept.children && concept.children.length > 0) {
       concept.children.forEach((child) => {
-        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate, roleInfo);
+        const childTree = this.buildConceptTree(child, level + 1, periodStartDate, periodEndDate, roleInfo, sectionId);
         if (childTree) {
           children.push(childTree);
         }
@@ -656,7 +683,7 @@ class XBRLFormBuilder {
       return null;
     }
     return {
-      id: this.createUniqueConceptId(concept),
+      id: this.createUniqueConceptId(concept, sectionId),
       // Use unique ID for form management
       originalConceptId: concept.id,
       // Store original for submission data
@@ -861,7 +888,7 @@ class XBRLFormBuilder {
         console.log("📅 All concepts are instant type, creating single column");
         columns.push({
           id: "instant",
-          title: `As of ${this.formatDateForDisplay(periodStartDate)}`,
+          title: `Current`,
           description: `Values as of ${periodStartDate}`,
           type: "base",
           order: 0,
@@ -871,7 +898,7 @@ class XBRLFormBuilder {
         console.log("📅 All concepts are duration type, creating single column with period range");
         columns.push({
           id: "duration",
-          title: `${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)}`,
+          title: `Current Period`,
           description: `Period: ${periodStartDate} to ${periodEndDate}`,
           type: "base",
           order: 0,
@@ -881,7 +908,7 @@ class XBRLFormBuilder {
         console.log("📅 Mixed period types found, creating both duration and instant columns");
         columns.push({
           id: "duration",
-          title: `${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)}`,
+          title: `Current Period`,
           description: `Period: ${periodStartDate} to ${periodEndDate}`,
           type: "base",
           order: 0,
@@ -889,7 +916,7 @@ class XBRLFormBuilder {
         });
         columns.push({
           id: "instant",
-          title: `As of ${this.formatDateForDisplay(periodStartDate)}`,
+          title: `Current`,
           description: `Values as of ${periodStartDate}`,
           type: "base",
           order: 1,
@@ -904,92 +931,172 @@ class XBRLFormBuilder {
    * Generate columns for single dimension scenarios
    */
   static generateSingleDimensionColumns(dimension, periodStartDate, periodEndDate, periodTypes) {
-    var _a, _b, _c;
-    if (dimension.typedMember) {
-      console.log(`📊 Found typed member dimension:`, {
-        id: dimension.id,
-        conceptName: dimension.conceptName,
-        typedMemberId: dimension.typedMember.id
-      });
-      const axisLabel2 = ((_a = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _a.label) || dimension.conceptName;
-      const typedMemberLabel = dimension.typedMember.id.split("_").pop() || "TypedMember";
+    var _a, _b, _c, _d, _e;
+    console.log(`📊 Processing single dimension:`, {
+      id: dimension.id,
+      conceptName: dimension.conceptName,
+      hasMembers: !!(dimension.members && Array.isArray(dimension.members)),
+      membersCount: ((_a = dimension.members) == null ? void 0 : _a.length) || 0,
+      hasTypedMember: !!dimension.typedMember,
+      typedMemberId: (_b = dimension.typedMember) == null ? void 0 : _b.id
+    });
+    if (dimension.typedMember && (!dimension.members || dimension.members.length === 0)) {
+      console.log(`🔤 Processing typed dimension: ${dimension.id} with typed member: ${dimension.typedMember.id}`);
+      const axisLabel2 = ((_c = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _c.label) || dimension.conceptName;
       const dimensionInfo2 = {
         axisId: dimension.id,
         axisLabel: axisLabel2,
-        memberId: dimension.typedMember.id,
-        memberLabel: typedMemberLabel,
-        dimensionKey: `${axisLabel2} | ${typedMemberLabel}`,
-        dimensionIdKey: `${dimension.id} | ${dimension.typedMember.id}`
+        typedMemberId: dimension.typedMember.id,
+        dimensionKey: `${axisLabel2} | [Typed Input]`,
+        dimensionIdKey: `${dimension.id}|[typed]`
       };
-      console.log(`📊 Generated typed dimension info:`, dimensionInfo2);
+      console.log(`🔤 Generated typed dimension info:`, dimensionInfo2);
       const columns2 = [];
       if (periodTypes.size === 0) {
-        const column = {
-          id: "default",
-          title: dimensionInfo2.memberLabel,
-          description: "Default typed dimension column",
+        columns2.push({
+          id: "typed-default",
+          title: axisLabel2,
+          description: "Typed dimension input column",
           type: "dimension",
           dimensionData: {
-            dimensionId: "default",
+            dimensionId: "typed-default",
             axisId: dimensionInfo2.axisId,
-            memberId: dimensionInfo2.memberId,
-            memberValue: dimensionInfo2.memberLabel,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
             axisLabel: dimensionInfo2.axisLabel,
-            memberLabel: dimensionInfo2.memberLabel,
-            isTypedMember: true,
-            dimensionIdKey: dimensionInfo2.dimensionIdKey
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
+              axisId: dimensionInfo2.axisId,
+              axisLabel: dimensionInfo2.axisLabel,
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
           },
           order: 0,
           removable: false
-        };
-        console.log(`📊 Generated typed member column:`, column);
-        columns2.push(column);
+        });
+      } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
+        columns2.push({
+          id: "typed-instant",
+          title: `${axisLabel2} [Typed Input Available]`,
+          description: `Typed values as of ${periodStartDate}`,
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "typed-instant",
+            axisId: dimensionInfo2.axisId,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
+              axisId: dimensionInfo2.axisId,
+              axisLabel: dimensionInfo2.axisLabel,
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
+          },
+          order: 0,
+          removable: false
+        });
+      } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
+        columns2.push({
+          id: "typed-duration",
+          title: `${axisLabel2} [Typed Input Available]`,
+          description: `Typed values for period ${periodStartDate} to ${periodEndDate}`,
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "typed-duration",
+            axisId: dimensionInfo2.axisId,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
+              axisId: dimensionInfo2.axisId,
+              axisLabel: dimensionInfo2.axisLabel,
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
+          },
+          order: 0,
+          removable: false
+        });
       } else {
-        if (periodTypes.has("instant")) {
-          columns2.push({
-            id: `instant_${dimensionInfo2.axisId}_${dimensionInfo2.memberId}`,
-            title: `${dimensionInfo2.memberLabel} (Instant)`,
-            description: `${periodStartDate}`,
-            type: "dimension",
-            dimensionData: {
-              dimensionId: `instant_${dimensionInfo2.axisId}_${dimensionInfo2.memberId}`,
+        columns2.push({
+          id: "typed-duration",
+          title: `${axisLabel2} [Typed Input Available]`,
+          description: `Typed values for period ${periodStartDate} to ${periodEndDate}`,
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "typed-duration",
+            axisId: dimensionInfo2.axisId,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
               axisId: dimensionInfo2.axisId,
-              memberId: dimensionInfo2.memberId,
-              memberValue: dimensionInfo2.memberLabel,
               axisLabel: dimensionInfo2.axisLabel,
-              memberLabel: dimensionInfo2.memberLabel,
-              isTypedMember: true,
-              dimensionIdKey: dimensionInfo2.dimensionIdKey
-            },
-            order: 0,
-            removable: false
-          });
-        }
-        if (periodTypes.has("duration")) {
-          columns2.push({
-            id: `duration_${dimensionInfo2.axisId}_${dimensionInfo2.memberId}`,
-            title: `${dimensionInfo2.memberLabel} (Duration)`,
-            description: `${periodStartDate} / ${periodEndDate}`,
-            type: "dimension",
-            dimensionData: {
-              dimensionId: `duration_${dimensionInfo2.axisId}_${dimensionInfo2.memberId}`,
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
+          },
+          order: 0,
+          removable: false
+        });
+        columns2.push({
+          id: "typed-instant",
+          title: `${axisLabel2} [Typed Input Available]`,
+          description: `Typed values as of ${periodStartDate}`,
+          type: "dimension",
+          dimensionData: {
+            dimensionId: "typed-instant",
+            axisId: dimensionInfo2.axisId,
+            memberId: "[typed]",
+            memberValue: "Typed Input",
+            memberLabel: "Typed Input",
+            axis: dimensionInfo2.axisLabel,
+            axisLabel: dimensionInfo2.axisLabel,
+            memberKey: dimensionInfo2.dimensionKey,
+            dimensionIdKey: dimensionInfo2.dimensionIdKey,
+            hasTypedMembers: true,
+            typedMemberId: dimensionInfo2.typedMemberId,
+            typedMembers: [{
               axisId: dimensionInfo2.axisId,
-              memberId: dimensionInfo2.memberId,
-              memberValue: dimensionInfo2.memberLabel,
               axisLabel: dimensionInfo2.axisLabel,
-              memberLabel: dimensionInfo2.memberLabel,
-              isTypedMember: true,
-              dimensionIdKey: dimensionInfo2.dimensionIdKey
-            },
-            order: 1,
-            removable: false
-          });
-        }
+              typedMemberId: dimensionInfo2.typedMemberId,
+              memberLabel: dimensionInfo2.axisLabel
+            }]
+          },
+          order: 1,
+          removable: false
+        });
       }
+      console.log(`🔤 Generated ${columns2.length} typed dimension columns`);
       return columns2;
     }
     if (!dimension.members || !Array.isArray(dimension.members)) {
-      console.log(`⚠️ Dimension ${dimension.id} has no members defined, skipping column generation`);
+      console.log(`⚠️ Dimension ${dimension.id} has no members defined and no typed member, skipping column generation`);
       return [];
     }
     console.log(`📊 Found single dimension:`, {
@@ -1000,9 +1107,9 @@ class XBRLFormBuilder {
     if (dimension.members.length === 0) {
       return [];
     }
-    const axisLabel = ((_b = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b.label) || dimension.conceptName;
+    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 = ((_c = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _c.label) || firstMember.conceptName;
+    const memberLabel = ((_e = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || firstMember.conceptName;
     const dimensionInfo = {
       axisId: dimension.id,
       axisLabel,
@@ -1036,7 +1143,7 @@ class XBRLFormBuilder {
     } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
       columns.push({
         id: "instant",
-        title: `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)})`,
+        title: `${dimensionInfo.memberLabel}`,
         description: `Values as of ${periodStartDate}`,
         type: "dimension",
         dimensionData: {
@@ -1056,7 +1163,7 @@ class XBRLFormBuilder {
     } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
       columns.push({
         id: "duration",
-        title: `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})`,
+        title: `${dimensionInfo.memberLabel}`,
         description: `Period: ${periodStartDate} to ${periodEndDate}`,
         type: "dimension",
         dimensionData: {
@@ -1076,7 +1183,7 @@ class XBRLFormBuilder {
     } else {
       columns.push({
         id: "duration",
-        title: `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})`,
+        title: `${dimensionInfo.memberLabel}`,
         description: `Period: ${periodStartDate} to ${periodEndDate}`,
         type: "dimension",
         dimensionData: {
@@ -1095,7 +1202,7 @@ class XBRLFormBuilder {
       });
       columns.push({
         id: "instant",
-        title: `${dimensionInfo.memberLabel} (${this.formatDateForDisplay(periodStartDate)})`,
+        title: `${dimensionInfo.memberLabel}`,
         description: `Values as of ${periodStartDate}`,
         type: "dimension",
         dimensionData: {
@@ -1120,15 +1227,30 @@ class XBRLFormBuilder {
    */
   static generateMultiDimensionColumns(dimensions, periodStartDate, periodEndDate, periodTypes) {
     console.log(`📊 Processing ${dimensions.length} dimensions for multi-dimensional columns`);
+    console.log(`🔍 [DEBUG] Input dimensions:`, dimensions.map((d2) => {
+      var _a, _b, _c;
+      return {
+        id: d2.id,
+        label: (_b = (_a = d2.labels) == null ? void 0 : _a.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b.label,
+        membersCount: ((_c = d2.members) == null ? void 0 : _c.length) || 0,
+        hasTypedMember: !!d2.typedMember
+      };
+    }));
+    const hasTypedMembers = dimensions.some((dimension) => dimension.typedMember);
+    if (hasTypedMembers) {
+      console.log(`🔤 Found typed members in dimensions - will indicate in column headers`);
+    }
     const validDimensions = dimensions.filter((dimension) => {
       if (dimension.typedMember) {
+        console.log(`🔤 Keeping typed dimension: ${dimension.id} with typed member: ${dimension.typedMember.id}`);
         return true;
       }
-      if (!dimension.members || !Array.isArray(dimension.members) || dimension.members.length === 0) {
-        console.log(`⚠️ Skipping dimension ${dimension.id} - no members defined`);
-        return false;
+      if (dimension.members && Array.isArray(dimension.members) && dimension.members.length > 0) {
+        console.log(`📂 Keeping domain dimension: ${dimension.id} with ${dimension.members.length} members`);
+        return true;
       }
-      return true;
+      console.log(`⚠️ Skipping dimension ${dimension.id} - no members or typed member defined`);
+      return false;
     });
     if (validDimensions.length === 0) {
       console.log(`⚠️ No valid dimensions with members found, skipping multi-dimensional column generation`);
@@ -1138,17 +1260,14 @@ class XBRLFormBuilder {
       var _a;
       const axisLabel = ((_a = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _a.label) || dimension.conceptName;
       if (dimension.typedMember) {
-        const typedMemberLabel = dimension.typedMember.id.split("_").pop() || "TypedMember";
         return {
           id: dimension.id,
           axisLabel,
-          isTypedDimension: true,
-          // Flag to track typed dimensions
+          isTyped: true,
+          typedMemberId: dimension.typedMember.id,
           members: [{
-            id: dimension.typedMember.id,
-            label: typedMemberLabel,
-            isTypedMember: true
-            // Flag for the member itself
+            id: "[typed]",
+            label: `${axisLabel} [Typed Input Available]`
           }]
         };
       }
@@ -1156,6 +1275,7 @@ class XBRLFormBuilder {
       return {
         id: dimension.id,
         axisLabel,
+        isTyped: false,
         members: allMembers.map((member) => {
           var _a2;
           return {
@@ -1167,32 +1287,63 @@ class XBRLFormBuilder {
     });
     const combinations = this.generateDimensionCombinations(dimensionInfos);
     console.log(`📊 Generated ${combinations.length} dimension combinations`);
+    console.log(`🔍 [DEBUG] Generated combinations:`, combinations.map((combo) => ({
+      memberLabels: combo.map((c2) => c2.memberLabel),
+      axisIds: combo.map((c2) => c2.axisId),
+      memberIds: combo.map((c2) => c2.memberId)
+    })));
     const columns = [];
     combinations.forEach((combination, index) => {
+      var _a, _b;
       const columnTitle = combination.map((c2) => c2.memberLabel).join(" | ");
-      const hasTypedMembers = combination.some((c2) => c2.isTypedMember);
+      const typedMembers = combination.filter((c2) => c2.isTyped);
+      const domainMembers = combination.filter((c2) => !c2.isTyped);
+      console.log(`🔍 [Column ${index}] Combination analysis:`, {
+        totalMembers: combination.length,
+        typedMembers: typedMembers.length,
+        domainMembers: domainMembers.length,
+        hasTypedMembers: typedMembers.length > 0,
+        columnTitle,
+        memberLabels: combination.map((c2) => c2.memberLabel),
+        memberIds: combination.map((c2) => c2.memberId)
+      });
       const dimensionData = {
         dimensionId: `multi_${index}`,
         memberValue: columnTitle,
         // Required field
         memberLabel: columnTitle,
         // Required field
-        isTypedMember: hasTypedMembers,
-        // Flag if any dimension in combination is typed
-        combinations: combination.map((c2) => ({
+        combinations: domainMembers.map((c2) => ({
           axisId: c2.axisId,
           axisLabel: c2.axisLabel,
           memberId: c2.memberId,
-          memberLabel: c2.memberLabel,
-          isTypedMember: c2.isTypedMember || false
+          memberLabel: c2.memberLabel
         })),
+        // Add typed member information for form fields
+        typedMembers: typedMembers.map((c2) => ({
+          axisId: c2.axisId,
+          axisLabel: c2.axisLabel,
+          typedMemberId: c2.typedMemberId,
+          memberLabel: c2.memberLabel
+        })),
+        hasTypedMembers: typedMembers.length > 0,
         memberKey: columnTitle,
-        dimensionIdKey: combination.map((c2) => `${c2.axisId}|${c2.memberId}`).join("::")
+        dimensionIdKey: [
+          ...domainMembers.map((c2) => `${c2.axisId}|${c2.memberId}`),
+          ...typedMembers.map((c2) => `${c2.axisId}|[typed]`)
+        ].join("::")
       };
+      console.log(`🔍 [Column ${index}] Final dimension data:`, {
+        dimensionId: dimensionData.dimensionId,
+        memberLabel: dimensionData.memberLabel,
+        dimensionIdKey: dimensionData.dimensionIdKey,
+        combinationsCount: (_a = dimensionData.combinations) == null ? void 0 : _a.length,
+        typedMembersCount: (_b = dimensionData.typedMembers) == null ? void 0 : _b.length
+      });
       if (periodTypes.size === 0 || periodTypes.size === 1 && periodTypes.has("duration")) {
         columns.push({
           id: `duration_${index}`,
-          title: `${columnTitle} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})`,
+          title: `${columnTitle}`,
           description: `Period: ${periodStartDate} to ${periodEndDate}`,
           type: "dimension",
           dimensionData: {
@@ -1205,7 +1356,7 @@ class XBRLFormBuilder {
       } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
         columns.push({
           id: `instant_${index}`,
-          title: `${columnTitle} (${this.formatDateForDisplay(periodStartDate)})`,
+          title: `${columnTitle}`,
           description: `Values as of ${periodStartDate}`,
           type: "dimension",
           dimensionData: {
@@ -1218,7 +1369,7 @@ class XBRLFormBuilder {
       } else {
         columns.push({
           id: `duration_${index}`,
-          title: `${columnTitle} (${this.formatDateForDisplay(periodStartDate)} / ${this.formatDateForDisplay(periodEndDate)})`,
+          title: `${columnTitle}`,
           description: `Period: ${periodStartDate} to ${periodEndDate}`,
           type: "dimension",
           dimensionData: {
@@ -1230,7 +1381,7 @@ class XBRLFormBuilder {
         });
         columns.push({
           id: `instant_${index}`,
-          title: `${columnTitle} (${this.formatDateForDisplay(periodStartDate)})`,
+          title: `${columnTitle}`,
           description: `Values as of ${periodStartDate}`,
           type: "dimension",
           dimensionData: {
@@ -1272,7 +1423,9 @@ class XBRLFormBuilder {
         axisId: dimensionInfos[0].id,
         axisLabel: dimensionInfos[0].axisLabel,
         memberId: member.id,
-        memberLabel: member.label
+        memberLabel: member.label,
+        isTyped: dimensionInfos[0].isTyped || false,
+        typedMemberId: dimensionInfos[0].typedMemberId
       }]);
     }
     const [firstDimension, ...restDimensions] = dimensionInfos;
@@ -1284,7 +1437,9 @@ class XBRLFormBuilder {
           axisId: firstDimension.id,
           axisLabel: firstDimension.axisLabel,
           memberId: member.id,
-          memberLabel: member.label
+          memberLabel: member.label,
+          isTyped: firstDimension.isTyped || false,
+          typedMemberId: firstDimension.typedMemberId
         }]);
       } else {
         restCombinations.forEach((restCombination) => {
@@ -1293,7 +1448,9 @@ class XBRLFormBuilder {
               axisId: firstDimension.id,
               axisLabel: firstDimension.axisLabel,
               memberId: member.id,
-              memberLabel: member.label
+              memberLabel: member.label,
+              isTyped: firstDimension.isTyped || false,
+              typedMemberId: firstDimension.typedMemberId
             },
             ...restCombination
           ]);
@@ -1355,15 +1512,15 @@ class XBRLFormBuilder {
     }];
   }
 }
-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;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$4(target, key, result);
+    __defProp$5(target, key, result);
   return result;
 };
 let JupiterFormField = class extends LitElement {
@@ -1668,45 +1825,45 @@ JupiterFormField.styles = css`
       width: auto;
     }
   `;
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Object })
 ], JupiterFormField.prototype, "field", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "conceptId", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "columnId", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2()
 ], JupiterFormField.prototype, "value", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Boolean })
 ], JupiterFormField.prototype, "disabled", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "locale", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Boolean })
 ], JupiterFormField.prototype, "hideLabel", 2);
-__decorateClass$4([
+__decorateClass$5([
   r()
 ], JupiterFormField.prototype, "_errors", 2);
-__decorateClass$4([
+__decorateClass$5([
   r()
 ], JupiterFormField.prototype, "_touched", 2);
-JupiterFormField = __decorateClass$4([
+JupiterFormField = __decorateClass$5([
   t$1("jupiter-form-field")
 ], JupiterFormField);
-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 JupiterConceptTree = class extends LitElement {
@@ -1899,40 +2056,42 @@ JupiterConceptTree.styles = css`
     .children-wrapper {
       display: none;
     }
+
+
   `;
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: Object })
 ], JupiterConceptTree.prototype, "concept", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: Array })
 ], JupiterConceptTree.prototype, "columns", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: Object })
 ], JupiterConceptTree.prototype, "formData", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: Boolean })
 ], JupiterConceptTree.prototype, "disabled", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String })
 ], JupiterConceptTree.prototype, "locale", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: Set })
 ], JupiterConceptTree.prototype, "expandedConcepts", 2);
-__decorateClass$3([
+__decorateClass$4([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
-JupiterConceptTree = __decorateClass$3([
+JupiterConceptTree = __decorateClass$4([
   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;
+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 JupiterAddColumnDialog = class extends LitElement {
@@ -1940,15 +2099,20 @@ let JupiterAddColumnDialog = class extends LitElement {
     super(...arguments);
     this.periodType = "duration";
     this.open = false;
+    this.availableDimensions = [];
     this._startDate = "";
     this._endDate = "";
     this._instantDate = "";
     this._selectedType = "duration";
+    this._selectedDimensions = /* @__PURE__ */ new Map();
   }
   updated(changedProperties) {
     if (changedProperties.has("open") && this.open) {
       this._resetForm();
     }
+    if (changedProperties.has("availableDimensions")) {
+      console.log(`🎯 Add Column Dialog received ${this.availableDimensions.length} dimensions:`, this.availableDimensions.map((d2) => d2.axisLabel));
+    }
   }
   connectedCallback() {
     super.connectedCallback();
@@ -1960,13 +2124,6 @@ let JupiterAddColumnDialog = class extends LitElement {
       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 }));
@@ -1983,6 +2140,9 @@ let JupiterAddColumnDialog = class extends LitElement {
       request.startDate = this._startDate;
       request.endDate = this._endDate;
     }
+    if (this._selectedDimensions.size > 0) {
+      request.selectedDimensions = Array.from(this._selectedDimensions.values());
+    }
     this.dispatchEvent(new CustomEvent("column-add", {
       detail: request,
       bubbles: true
@@ -2014,6 +2174,49 @@ let JupiterAddColumnDialog = class extends LitElement {
   _handleInstantDateChange(e2) {
     this._instantDate = e2.target.value;
   }
+  _handleDimensionToggle(dimensionId, event) {
+    const checkbox = event.target;
+    if (checkbox.checked) {
+      const dimension = this.availableDimensions.find((d2) => d2.id === dimensionId);
+      if (dimension) {
+        const selection = {
+          axisId: dimension.id,
+          axisLabel: dimension.axisLabel,
+          isTyped: !!(dimension.typedMember && (!dimension.members || dimension.members.length === 0))
+        };
+        this._selectedDimensions.set(dimensionId, selection);
+      }
+    } else {
+      this._selectedDimensions.delete(dimensionId);
+    }
+    this.requestUpdate();
+  }
+  _handleMemberSelection(dimensionId, memberId, memberLabel) {
+    const existing = this._selectedDimensions.get(dimensionId);
+    if (existing) {
+      existing.memberId = memberId;
+      existing.memberLabel = memberLabel;
+      this._selectedDimensions.set(dimensionId, existing);
+      this.requestUpdate();
+    }
+  }
+  _handleTypedValueChange(dimensionId, event) {
+    const input = event.target;
+    const existing = this._selectedDimensions.get(dimensionId);
+    if (existing) {
+      existing.typedValue = input.value;
+      this._selectedDimensions.set(dimensionId, existing);
+    }
+  }
+  _resetForm() {
+    const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    this._startDate = today;
+    this._endDate = today;
+    this._instantDate = today;
+    this._selectedType = this.periodType === "instant" ? "instant" : "duration";
+    this._selectedDimensions.clear();
+    this.requestUpdate();
+  }
   render() {
     if (!this.open)
       return html``;
@@ -2076,6 +2279,79 @@ let JupiterAddColumnDialog = class extends LitElement {
               />
             </div>
           `}
+
+          <!-- Dimensions Section -->
+          ${this.availableDimensions.length > 0 ? html`
+            <div class="dimensions-section">
+              <h3>Available Dimensions</h3>
+              <p class="form-description">Select dimensions to include in the column. You can choose specific members or enter typed values.</p>
+              
+              ${this.availableDimensions.map((dimension) => {
+      const isSelected = this._selectedDimensions.has(dimension.id);
+      const selection = this._selectedDimensions.get(dimension.id);
+      const isTypedDimension = !!(dimension.typedMember && (!dimension.members || dimension.members.length === 0));
+      return html`
+                  <div class="dimension-item">
+                    <div class="dimension-header">
+                      <input 
+                        type="checkbox" 
+                        class="dimension-checkbox"
+                        .checked="${isSelected}"
+                        @change="${(e2) => this._handleDimensionToggle(dimension.id, e2)}"
+                        id="dim-${dimension.id}"
+                      />
+                      <label for="dim-${dimension.id}" class="dimension-label">
+                        ${dimension.axisLabel || dimension.conceptName}
+                      </label>
+                    </div>
+                    
+                    ${isSelected ? html`
+                      <div class="dimension-details">
+                        ${isTypedDimension ? html`
+                          <!-- Typed Dimension Input -->
+                          <div class="member-selection">
+                            <label>Enter value for ${dimension.conceptName}:</label>
+                            <input
+                              type="text"
+                              class="typed-input"
+                              .value="${(selection == null ? void 0 : selection.typedValue) || ""}"
+                              @input="${(e2) => this._handleTypedValueChange(dimension.id, e2)}"
+                              placeholder="Enter value..."
+                            />
+                          </div>
+                        ` : html`
+                          <!-- Domain Members Selection -->
+                          ${dimension.members && dimension.members.length > 0 ? html`
+                            <div class="member-selection">
+                              <label>Select member:</label>
+                              <div class="member-list">
+                                ${dimension.members.map((member) => html`
+                                  <div class="member-option">
+                                    <input
+                                      type="radio"
+                                      name="member-${dimension.id}"
+                                      .checked="${(selection == null ? void 0 : selection.memberId) === member.id}"
+                                      @change="${() => this._handleMemberSelection(dimension.id, member.id, member.label)}"
+                                      id="member-${dimension.id}-${member.id}"
+                                    />
+                                    <label for="member-${dimension.id}-${member.id}">
+                                      ${member.label}
+                                    </label>
+                                  </div>
+                                `)}
+                              </div>
+                            </div>
+                          ` : html`
+                            <p class="form-description">No members available for this dimension</p>
+                          `}
+                        `}
+                      </div>
+                    ` : ""}
+                  </div>
+                `;
+    })}
+            </div>
+          ` : ""}
         </div>
 
         <div class="dialog-actions">
@@ -2229,37 +2505,145 @@ JupiterAddColumnDialog.styles = css`
       background: var(--jupiter-disabled-background, #ccc);
       cursor: not-allowed;
     }
+
+    /* Dimension Selection Styles */
+    .dimensions-section {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+    }
+
+    .dimensions-section h3 {
+      margin: 0 0 16px 0;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .dimension-item {
+      margin-bottom: 16px;
+      padding: 16px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      background: var(--jupiter-card-background, #fafafa);
+    }
+
+    .dimension-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+    }
+
+    .dimension-checkbox {
+      margin: 0;
+    }
+
+    .dimension-label {
+      font-weight: 500;
+      color: var(--jupiter-text-primary, #333);
+      flex: 1;
+    }
+
+    .dimension-details {
+      margin-left: 24px;
+    }
+
+    .member-selection {
+      margin-top: 12px;
+    }
+
+    .member-selection label {
+      display: block;
+      margin-bottom: 4px;
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+    }
+
+    .typed-input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      font-size: 14px;
+    }
+
+    .member-list {
+      max-height: 120px;
+      overflow-y: auto;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      padding: 8px;
+    }
+
+    .member-option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+    }
+
+    .member-option input[type="radio"] {
+      margin: 0;
+    }
+
+    .member-option label {
+      margin: 0;
+      font-size: 13px;
+      color: var(--jupiter-text-primary, #333);
+      cursor: pointer;
+    }
+
+    .no-dimensions {
+      text-align: center;
+      color: var(--jupiter-text-secondary, #666);
+      font-style: italic;
+      padding: 20px;
+    }
+
+    .form-description {
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+      margin: 0 0 12px 0;
+      line-height: 1.4;
+    }
   `;
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: String })
 ], JupiterAddColumnDialog.prototype, "periodType", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Boolean })
 ], JupiterAddColumnDialog.prototype, "open", 2);
-__decorateClass$2([
+__decorateClass$3([
+  n2({ type: Array })
+], JupiterAddColumnDialog.prototype, "availableDimensions", 2);
+__decorateClass$3([
   r()
 ], JupiterAddColumnDialog.prototype, "_startDate", 2);
-__decorateClass$2([
+__decorateClass$3([
   r()
 ], JupiterAddColumnDialog.prototype, "_endDate", 2);
-__decorateClass$2([
+__decorateClass$3([
   r()
 ], JupiterAddColumnDialog.prototype, "_instantDate", 2);
-__decorateClass$2([
+__decorateClass$3([
   r()
 ], JupiterAddColumnDialog.prototype, "_selectedType", 2);
-JupiterAddColumnDialog = __decorateClass$2([
+__decorateClass$3([
+  r()
+], JupiterAddColumnDialog.prototype, "_selectedDimensions", 2);
+JupiterAddColumnDialog = __decorateClass$3([
   t$1("jupiter-add-column-dialog")
 ], JupiterAddColumnDialog);
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+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$1(target, key, result);
+    __defProp$2(target, key, result);
   return result;
 };
 let JupiterFormSection = class extends LitElement {
@@ -2267,13 +2651,14 @@ let JupiterFormSection = class extends LitElement {
     super(...arguments);
     this.columns = [];
     this.formData = {};
+    this.typedMemberData = {};
     this.disabled = false;
     this.collapsible = true;
     this.locale = "en-US";
+    this.availableDimensions = [];
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
-    this._typedMemberValues = {};
     this._expandedConcepts = /* @__PURE__ */ new Set();
   }
   connectedCallback() {
@@ -2401,14 +2786,6 @@ let JupiterFormSection = class extends LitElement {
       bubbles: true
     }));
   }
-  _handleTypedMemberValueChange(columnId, value) {
-    this._typedMemberValues[columnId] = value;
-    this.dispatchEvent(new CustomEvent("typed-member-change", {
-      detail: { columnId, value, sectionId: this.section.id },
-      bubbles: true
-    }));
-    this.requestUpdate();
-  }
   _flattenConcepts(concepts, expanded = /* @__PURE__ */ new Set()) {
     const result = [];
     for (const concept of concepts) {
@@ -2434,6 +2811,23 @@ let JupiterFormSection = class extends LitElement {
       bubbles: true
     }));
   }
+  _getTypedMemberHeaderValue(columnId, axisId) {
+    var _a;
+    return ((_a = this.typedMemberData[columnId]) == null ? void 0 : _a[axisId]) || "";
+  }
+  _handleTypedMemberHeaderChange(event, columnId, axisId) {
+    const target = event.target;
+    const value = target.value;
+    console.log(`🔍 [FormSection] Typed member header change: columnId=${columnId}, axisId=${axisId}, value=${value}`);
+    this.dispatchEvent(new CustomEvent("typed-member-change", {
+      detail: {
+        columnId,
+        axisId,
+        value
+      },
+      bubbles: true
+    }));
+  }
   render() {
     if (!this.section.concepts || this.section.concepts.length === 0) {
       return html`
@@ -2478,32 +2872,43 @@ let JupiterFormSection = class extends LitElement {
               <tr class="header-row">
                 <th class="header-cell concept-column">Concept</th>
                 ${this.columns.map((column) => {
-      var _a;
+      var _a, _b, _c;
       return html`
                   <th class="header-cell ${column.removable ? "removable" : ""}">
-                    ${column.title}
-                    ${column.description ? html`<div style="font-weight: normal; font-size: 12px; color: var(--jupiter-text-secondary, #666);">${column.description}</div>` : ""}
-                    ${((_a = column.dimensionData) == null ? void 0 : _a.isTypedMember) ? html`
-                      <div style="margin-top: 8px;">
-                        <input 
-                          type="text" 
-                          placeholder="Enter typed member value"
-                          .value="${this._typedMemberValues[column.id] || ""}"
-                          @input="${(e2) => this._handleTypedMemberValueChange(column.id, e2.target.value)}"
-                          style="width: 100%; padding: 4px; border: 1px solid #ccc; border-radius: 3px; font-size: 12px;"
-                        />
+                    <div class="column-header-content">
+                      <div class="column-title">
+                        ${column.title}
+                        ${column.description ? html`<div style="font-weight: normal; font-size: 12px; color: var(--jupiter-text-secondary, #666);">${column.description}</div>` : ""}
                       </div>
-                    ` : ""}
-                    ${column.removable ? html`
-                      <button 
-                        class="remove-column-btn"
-                        @click="${(e2) => {
+                      
+                      <!-- Typed member input fields in column header -->
+                      ${((_a = column.dimensionData) == null ? void 0 : _a.hasTypedMembers) ? html`
+                        <div class="typed-members-header">
+                          ${(_c = (_b = column.dimensionData) == null ? void 0 : _b.typedMembers) == null ? void 0 : _c.map((typedMember) => html`
+                            <div class="typed-member-header-input">
+                              <input
+                                type="text"
+                                class="typed-member-header-field"
+                                placeholder="Enter ${typedMember.axisLabel}"
+                                .value="${this._getTypedMemberHeaderValue(column.id, typedMember.axisId)}"
+                                @input="${(e2) => this._handleTypedMemberHeaderChange(e2, column.id, typedMember.axisId)}"
+                              />
+                            </div>
+                          `)}
+                        </div>
+                      ` : ""}
+                      
+                      ${column.removable ? html`
+                        <button 
+                          class="remove-column-btn"
+                          @click="${(e2) => {
         e2.stopPropagation();
         this._handleRemoveColumn(column.id);
       }}"
-                        title="Remove column"
-                      >×</button>
-                    ` : ""}
+                          title="Remove column"
+                        >×</button>
+                      ` : ""}
+                    </div>
                   </th>
                 `;
     })}
@@ -2541,6 +2946,7 @@ let JupiterFormSection = class extends LitElement {
       <jupiter-add-column-dialog
         .periodType="${this._sectionPeriodType}"
         ?open="${this._showAddColumnDialog}"
+        .availableDimensions="${this.availableDimensions}"
         @dialog-cancel="${this._handleDialogCancel}"
         @column-add="${this._handleColumnAdd}"
       ></jupiter-add-column-dialog>
@@ -2686,68 +3092,729 @@ JupiterFormSection.styles = css`
       justify-content: center;
     }
 
-    .remove-column-btn:hover {
-      background: var(--jupiter-error-color-dark, #b71c1c);
+    .remove-column-btn:hover {
+      background: var(--jupiter-error-color-dark, #b71c1c);
+    }
+
+    .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);
+    }
+
+    /* Column header content styling */
+    .column-header-content {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .column-title {
+      text-align: center;
+    }
+
+    /* Typed member header input styles */
+    .typed-members-header {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+      padding: 8px;
+      background: var(--jupiter-typed-member-header-background, #f8f9fa);
+      border-radius: 4px;
+      border: 1px solid var(--jupiter-border-color, #e0e0e0);
+    }
+
+    .typed-member-header-input {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .typed-member-header-label {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--jupiter-text-secondary, #666);
+      text-align: left;
+    }
+
+    .typed-member-header-field {
+      width: 100%;
+      padding: 4px 6px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 3px;
+      font-size: 12px;
+      background: var(--jupiter-input-background, #fff);
+    }
+
+    .typed-member-header-field:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 1px var(--jupiter-primary-color, #1976d2);
+    }
+
+    .typed-member-header-field::placeholder {
+      color: var(--jupiter-text-placeholder, #999);
+      font-size: 11px;
+    }
+
+    .empty-section {
+      padding: 24px;
+      text-align: center;
+      color: var(--jupiter-text-secondary, #666);
+      font-style: italic;
+    }
+  `;
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "section", 2);
+__decorateClass$2([
+  n2({ type: Array })
+], JupiterFormSection.prototype, "columns", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "formData", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "typedMemberData", 2);
+__decorateClass$2([
+  n2({ type: Boolean })
+], JupiterFormSection.prototype, "disabled", 2);
+__decorateClass$2([
+  n2({ type: Boolean })
+], JupiterFormSection.prototype, "collapsible", 2);
+__decorateClass$2([
+  n2({ type: String })
+], JupiterFormSection.prototype, "locale", 2);
+__decorateClass$2([
+  n2({ type: Array })
+], JupiterFormSection.prototype, "availableDimensions", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_expanded", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_showAddColumnDialog", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_sectionPeriodType", 2);
+__decorateClass$2([
+  r()
+], JupiterFormSection.prototype, "_expandedConcepts", 2);
+JupiterFormSection = __decorateClass$2([
+  t$1("jupiter-form-section")
+], JupiterFormSection);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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$1(target, key, result);
+  return result;
+};
+let JupiterFilterRolesDialog = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.availableRoles = [];
+    this.selectedRoleIds = [];
+    this._tempSelectedRoles = /* @__PURE__ */ new Set();
+    this._searchQuery = "";
+    this._filteredRoles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._initializeTempSelection();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selectedRoleIds") || changedProperties.has("open")) {
+      this._initializeTempSelection();
+    }
+    if (changedProperties.has("availableRoles") || changedProperties.has("_searchQuery")) {
+      this._updateFilteredRoles();
+    }
+  }
+  _updateFilteredRoles() {
+    if (!this._searchQuery.trim()) {
+      this._filteredRoles = [...this.availableRoles];
+      return;
+    }
+    const query = this._searchQuery.toLowerCase().trim();
+    this._filteredRoles = this.availableRoles.filter((role) => {
+      var _a;
+      const titleMatch = role.title.toLowerCase().includes(query);
+      const idMatch = role.id.toLowerCase().includes(query);
+      const descriptionMatch = ((_a = role.description) == null ? void 0 : _a.toLowerCase().includes(query)) || false;
+      const uriMatch = this._searchInRoleURI(role, query);
+      return titleMatch || idMatch || descriptionMatch || uriMatch;
+    });
+  }
+  _searchInRoleURI(role, query) {
+    var _a;
+    if ((_a = role.metadata) == null ? void 0 : _a.roleURI) {
+      return role.metadata.roleURI.toLowerCase().includes(query);
+    }
+    const uriPattern = /https?:\/\/[^\s]+/i;
+    const titleHasURI = uriPattern.test(role.title);
+    const idHasURI = uriPattern.test(role.id);
+    if (titleHasURI || idHasURI) {
+      return role.title.toLowerCase().includes(query) || role.id.toLowerCase().includes(query);
+    }
+    if (role.id.includes(".") || role.id.includes("/") || role.id.includes(":")) {
+      return role.id.toLowerCase().includes(query);
+    }
+    return false;
+  }
+  _handleSearchInput(event) {
+    const input = event.target;
+    this._searchQuery = input.value;
+  }
+  _clearSearch() {
+    var _a;
+    this._searchQuery = "";
+    const searchInput = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".search-input");
+    if (searchInput) {
+      searchInput.value = "";
+      searchInput.focus();
+    }
+  }
+  _highlightSearchTerm(text) {
+    if (!this._searchQuery.trim()) {
+      return text;
+    }
+    const query = this._searchQuery.trim();
+    const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+    return text.replace(regex, "<mark>$1</mark>");
+  }
+  _renderHighlightedText(text) {
+    return text;
+  }
+  _getSelectedFilteredCount() {
+    return this._filteredRoles.filter((role) => this._tempSelectedRoles.has(role.id)).length;
+  }
+  _initializeTempSelection() {
+    this._tempSelectedRoles = new Set(this.selectedRoleIds);
+  }
+  _handleCheckboxChange(event, roleId) {
+    const checkbox = event.target;
+    const newSelection = new Set(this._tempSelectedRoles);
+    if (checkbox.checked) {
+      newSelection.add(roleId);
+    } else {
+      newSelection.delete(roleId);
+    }
+    this._tempSelectedRoles = newSelection;
+    this.requestUpdate();
+  }
+  _selectAll() {
+    const newSelection = new Set(this._tempSelectedRoles);
+    this._filteredRoles.forEach((role) => newSelection.add(role.id));
+    this._tempSelectedRoles = newSelection;
+    this.requestUpdate();
+  }
+  _selectNone() {
+    const newSelection = new Set(this._tempSelectedRoles);
+    this._filteredRoles.forEach((role) => newSelection.delete(role.id));
+    this._tempSelectedRoles = newSelection;
+    this.requestUpdate();
+  }
+  _selectAllGlobal() {
+    this._tempSelectedRoles = new Set(this.availableRoles.map((role) => role.id));
+    this.requestUpdate();
+  }
+  _selectNoneGlobal() {
+    this._tempSelectedRoles = /* @__PURE__ */ new Set();
+    this.requestUpdate();
+  }
+  _resetToOriginal() {
+    this._tempSelectedRoles = new Set(this.selectedRoleIds);
+    this.requestUpdate();
+  }
+  _handleCancel() {
+    this._initializeTempSelection();
+    this.dispatchEvent(new CustomEvent("dialog-cancel", {
+      bubbles: true
+    }));
+  }
+  _handleApply() {
+    const selectedRoles = Array.from(this._tempSelectedRoles);
+    this.dispatchEvent(new CustomEvent("roles-filter-apply", {
+      detail: { selectedRoleIds: selectedRoles },
+      bubbles: true
+    }));
+  }
+  _handleBackdropClick(event) {
+    if (event.target === this) {
+      this._handleCancel();
+    }
+  }
+  render() {
+    const selectedCount = this._tempSelectedRoles.size;
+    const totalCount = this.availableRoles.length;
+    const filteredCount = this._filteredRoles.length;
+    const hasSearchQuery = this._searchQuery.trim().length > 0;
+    return html`
+      <div class="dialog" @click="${(e2) => e2.stopPropagation()}">
+        <!-- Dialog Header -->
+        <div class="dialog-header">
+          <svg class="filter-icon" viewBox="0 0 24 24">
+            <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+          </svg>
+          <h2 class="dialog-title">Filter Roles</h2>
+          <button class="close-button" @click="${this._handleCancel}">×</button>
+        </div>
+
+        <!-- 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.
+          </p>
+
+          <!-- Search Input -->
+          <div class="search-container">
+            <input
+              type="text"
+              class="search-input"
+              placeholder="Search roles by name, ID, or URI..."
+              .value="${this._searchQuery}"
+              @input="${this._handleSearchInput}"
+            />
+            ${this._searchQuery ? html`
+              <button class="clear-search" @click="${this._clearSearch}" title="Clear search">
+                ×
+              </button>
+            ` : html`
+              <svg class="search-icon" viewBox="0 0 24 24">
+                <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+              </svg>
+            `}
+          </div>
+
+          <!-- Search Results Info -->
+          ${hasSearchQuery ? html`
+            <div class="search-results-info">
+              Showing ${filteredCount} of ${totalCount} roles
+              ${filteredCount !== totalCount ? html`matching "${this._searchQuery}"` : ""}
+            </div>
+          ` : ""}
+
+          <!-- Selection Controls -->
+          <div class="selection-controls">
+            ${hasSearchQuery ? html`
+              <button class="selection-control" @click="${this._selectAll}">
+                Select Filtered (${filteredCount})
+              </button>
+              <button class="selection-control" @click="${this._selectNone}">
+                Deselect Filtered
+              </button>
+              <button class="selection-control" @click="${this._selectAllGlobal}">
+                Select All (${totalCount})
+              </button>
+              <button class="selection-control" @click="${this._selectNoneGlobal}">
+                Deselect All
+              </button>
+            ` : html`
+              <button class="selection-control" @click="${this._selectAll}">
+                Select All
+              </button>
+              <button class="selection-control" @click="${this._selectNone}">
+                Select None
+              </button>
+            `}
+            <button class="selection-control" @click="${this._resetToOriginal}">
+              Reset
+            </button>
+          </div>
+
+          <!-- Roles List -->
+          <div class="roles-list">
+            ${this._filteredRoles.length === 0 ? html`
+              <div class="no-results">
+                ${hasSearchQuery ? html`
+                  No roles found matching "${this._searchQuery}".<br>
+                  Try a different search term or clear the search.
+                ` : html`
+                  No roles available.
+                `}
+              </div>
+            ` : html`
+              ${this._filteredRoles.map((role) => {
+      var _a;
+      const isSelected = this._tempSelectedRoles.has(role.id);
+      return html`
+                  <div class="role-item">
+                    <input
+                      type="checkbox"
+                      class="role-checkbox"
+                      .checked="${isSelected}"
+                      @change="${(e2) => this._handleCheckboxChange(e2, role.id)}"
+                    />
+                    <div class="role-info">
+                      <h4 class="role-title">${role.title}</h4>
+                      ${role.description ? html`
+                        <p class="role-description">${role.description}</p>
+                      ` : ""}
+                      ${role.id !== role.title ? html`
+                        <p class="role-description">ID: ${role.id}</p>
+                      ` : ""}
+                      ${((_a = role.metadata) == null ? void 0 : _a.roleURI) ? html`
+                        <p class="role-description">URI: ${role.metadata.roleURI}</p>
+                      ` : ""}
+                    </div>
+                  </div>
+                `;
+    })}
+            `}
+          </div>
+
+          <div class="selected-count">
+            ${selectedCount} of ${totalCount} roles selected
+            ${hasSearchQuery && filteredCount !== totalCount ? html`
+              <br><small>(${this._getSelectedFilteredCount()} of ${filteredCount} filtered roles selected)</small>
+            ` : ""}
+          </div>
+        </div>
+
+        <!-- Dialog Actions -->
+        <div class="dialog-actions">
+          <button class="btn-secondary" @click="${this._handleCancel}">
+            Cancel
+          </button>
+          <button 
+            class="btn-primary" 
+            @click="${this._handleApply}"
+            ?disabled="${selectedCount === 0}"
+          >
+            Apply Filter (${selectedCount})
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+JupiterFilterRolesDialog.styles = css`
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 10000;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.5);
+      font-family: var(--jupiter-font-family, system-ui, -apple-system, sans-serif);
+    }
+
+    :host([open]) {
+      display: flex;
+    }
+
+    .dialog {
+      background: var(--jupiter-background, #fff);
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      
+      width: 90vw;
+      max-height: 80vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .dialog-header {
+      padding: 20px 24px 16px;
+      border-bottom: 1px solid var(--jupiter-border-color, #ddd);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .dialog-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0;
+      color: var(--jupiter-text-primary, #333);
+      flex: 1;
+    }
+
+    .filter-icon {
+      width: 20px;
+      height: 20px;
+      fill: var(--jupiter-primary-color, #1976d2);
+    }
+
+    .close-button {
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      padding: 4px;
+      color: var(--jupiter-text-secondary, #666);
+      border-radius: 4px;
+      transition: background-color 0.2s ease;
+    }
+
+    .close-button:hover {
+      background: var(--jupiter-hover-background, #f5f5f5);
+    }
+
+    .dialog-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 24px;
+    }
+
+    .description {
+      color: var(--jupiter-text-secondary, #666);
+      font-size: 14px;
+      margin: 0 0 20px 0;
+      line-height: 1.5;
+    }
+
+    .selection-controls {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .search-container {
+      margin-bottom: 16px;
+      position: relative;
+    }
+
+    .search-input {
+      width: 100%;
+      padding: 10px 40px 10px 12px;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      font-size: 14px;
+      font-family: inherit;
+      background: var(--jupiter-background, #fff);
+      color: var(--jupiter-text-primary, #333);
+      transition: border-color 0.2s ease;
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: var(--jupiter-primary-color, #1976d2);
+      box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
+    }
+
+    .search-input::placeholder {
+      color: var(--jupiter-text-secondary, #666);
+    }
+
+    .search-icon {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 16px;
+      height: 16px;
+      fill: var(--jupiter-text-secondary, #666);
+      pointer-events: none;
+    }
+
+    .clear-search {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 2px;
+      border-radius: 2px;
+      color: var(--jupiter-text-secondary, #666);
+      font-size: 16px;
+      line-height: 1;
+      transition: color 0.2s ease;
+    }
+
+    .clear-search:hover {
+      color: var(--jupiter-text-primary, #333);
+    }
+
+    .search-results-info {
+      font-size: 12px;
+      color: var(--jupiter-text-secondary, #666);
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    .no-results {
+      text-align: center;
+      padding: 40px 20px;
+      color: var(--jupiter-text-secondary, #666);
+      font-style: italic;
+    }
+
+    mark {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      padding: 1px 2px;
+      border-radius: 2px;
+      font-weight: 500;
+    }
+
+    .selection-control {
+      background: none;
+      border: 1px solid var(--jupiter-primary-color, #1976d2);
+      color: var(--jupiter-primary-color, #1976d2);
+      padding: 6px 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+
+    .selection-control:hover {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .roles-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      max-height: 300px;
+      overflow-y: auto;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      padding: 12px;
+    }
+
+    .role-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 8px;
+      border-radius: 4px;
+      transition: background-color 0.2s ease;
+    }
+
+    .role-item:hover {
+      background: var(--jupiter-hover-background, #f5f5f5);
+    }
+
+    .role-checkbox {
+      margin-top: 2px;
+      cursor: pointer;
+    }
+
+    .role-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .role-title {
+      font-weight: 500;
+      color: var(--jupiter-text-primary, #333);
+      margin: 0 0 4px 0;
+      word-wrap: break-word;
+      line-height: 1.3;
+    }
+
+    .role-description {
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+      margin: 0;
+      line-height: 1.4;
+      word-break: break-all; /* Allow URI breaking */
+    }
+
+    .role-description:last-child {
+      margin-bottom: 4px;
+    }
+
+    .selected-count {
+      font-size: 13px;
+      color: var(--jupiter-text-secondary, #666);
+      margin-top: 16px;
+      text-align: center;
+    }
+
+    .dialog-actions {
+      padding: 16px 24px;
+      border-top: 1px solid var(--jupiter-border-color, #ddd);
+      display: flex;
+      gap: 12px;
+      justify-content: flex-end;
+      background: var(--jupiter-form-actions-background, #f8f9fa);
+    }
+
+    .dialog-actions button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .btn-primary {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .btn-primary:hover:not(:disabled) {
+      background: var(--jupiter-primary-color-dark, #1565c0);
     }
 
-    .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;
+    .btn-secondary {
+      background: transparent;
+      color: var(--jupiter-text-secondary, #666);
+      border: 1px solid var(--jupiter-border-color, #ddd);
     }
 
-    .add-column-btn:hover {
-      background: var(--jupiter-primary-color-dark, #5a6fd8);
+    .btn-secondary:hover:not(:disabled) {
+      background: var(--jupiter-hover-background, #f5f5f5);
     }
 
-    .empty-section {
-      padding: 24px;
-      text-align: center;
-      color: var(--jupiter-text-secondary, #666);
-      font-style: italic;
+    button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
     }
   `;
 __decorateClass$1([
-  n2({ type: Object })
-], JupiterFormSection.prototype, "section", 2);
+  n2({ type: Boolean, reflect: true })
+], JupiterFilterRolesDialog.prototype, "open", 2);
 __decorateClass$1([
   n2({ type: Array })
-], JupiterFormSection.prototype, "columns", 2);
-__decorateClass$1([
-  n2({ type: Object })
-], JupiterFormSection.prototype, "formData", 2);
-__decorateClass$1([
-  n2({ type: Boolean })
-], JupiterFormSection.prototype, "disabled", 2);
-__decorateClass$1([
-  n2({ type: Boolean })
-], JupiterFormSection.prototype, "collapsible", 2);
+], JupiterFilterRolesDialog.prototype, "availableRoles", 2);
 __decorateClass$1([
-  n2({ type: String })
-], JupiterFormSection.prototype, "locale", 2);
-__decorateClass$1([
-  r()
-], JupiterFormSection.prototype, "_expanded", 2);
-__decorateClass$1([
-  r()
-], JupiterFormSection.prototype, "_showAddColumnDialog", 2);
+  n2({ type: Array })
+], JupiterFilterRolesDialog.prototype, "selectedRoleIds", 2);
 __decorateClass$1([
   r()
-], JupiterFormSection.prototype, "_sectionPeriodType", 2);
+], JupiterFilterRolesDialog.prototype, "_tempSelectedRoles", 2);
 __decorateClass$1([
   r()
-], JupiterFormSection.prototype, "_typedMemberValues", 2);
+], JupiterFilterRolesDialog.prototype, "_searchQuery", 2);
 __decorateClass$1([
   r()
-], JupiterFormSection.prototype, "_expandedConcepts", 2);
-JupiterFormSection = __decorateClass$1([
-  t$1("jupiter-form-section")
-], JupiterFormSection);
+], JupiterFilterRolesDialog.prototype, "_filteredRoles", 2);
+JupiterFilterRolesDialog = __decorateClass$1([
+  t$1("jupiter-filter-roles-dialog")
+], JupiterFilterRolesDialog);
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -2769,13 +3836,18 @@ let JupiterDynamicForm = class extends LitElement {
     this.periodStartDate = "2025-01-01";
     this.periodEndDate = "2025-12-31";
     this._formData = {};
+    this._preservedFormData = {};
+    this._typedMemberData = {};
+    this._preservedTypedMemberData = {};
     this._columns = [];
     this._errors = [];
     this._touched = /* @__PURE__ */ new Set();
     this._dirty = false;
     this._valid = true;
     this._submitted = false;
-    this._typedMemberValues = {};
+    this._allSections = [];
+    this._selectedRoleIds = [];
+    this._showFilterDialog = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -2798,6 +3870,13 @@ let JupiterDynamicForm = class extends LitElement {
           this.periodEndDate
         );
         console.log("✅ Generated schema with sections:", this._currentSchema.sections.length);
+        this._allSections = [...this._currentSchema.sections];
+        if (this._allSections.length > 10 && this._selectedRoleIds.length === 0) {
+          this._selectedRoleIds = this._allSections.slice(0, 10).map((section) => section.id);
+        } else if (this._selectedRoleIds.length === 0) {
+          this._selectedRoleIds = this._allSections.map((section) => section.id);
+        }
+        this._applyRoleFilter();
         this._columns = [
           {
             id: "base",
@@ -2811,13 +3890,19 @@ let JupiterDynamicForm = class extends LitElement {
       } catch (error) {
         console.error("❌ Error building form from XBRL input:", error);
         this._currentSchema = this._getDefaultSchema();
+        this._allSections = [];
+        this._selectedRoleIds = [];
         this._columns = this._getDefaultColumns();
       }
     } else if (this.schema) {
       this._currentSchema = this.schema;
+      this._allSections = [...this.schema.sections];
+      this._selectedRoleIds = this._allSections.map((section) => section.id);
       this._columns = this._getDefaultColumns();
     } else {
       this._currentSchema = this._getDefaultSchema();
+      this._allSections = [];
+      this._selectedRoleIds = [];
       this._columns = this._getDefaultColumns();
     }
     this._formData = { ...this.initialData };
@@ -2847,6 +3932,106 @@ let JupiterDynamicForm = class extends LitElement {
       }
     ];
   }
+  _applyRoleFilter() {
+    if (!this._currentSchema || !this._allSections.length)
+      return;
+    this._preserveDataForHiddenSections();
+    const filteredSections = this._allSections.filter(
+      (section) => this._selectedRoleIds.includes(section.id)
+    );
+    this._restoreDataForVisibleSections(filteredSections);
+    this._currentSchema = {
+      ...this._currentSchema,
+      sections: filteredSections
+    };
+  }
+  _preserveDataForHiddenSections() {
+    var _a;
+    const currentlyVisibleSectionIds = ((_a = this._currentSchema) == null ? void 0 : _a.sections.map((s2) => s2.id)) || [];
+    const sectionsThatWillBeHidden = currentlyVisibleSectionIds.filter(
+      (sectionId) => !this._selectedRoleIds.includes(sectionId)
+    );
+    sectionsThatWillBeHidden.forEach((sectionId) => {
+      const section = this._allSections.find((s2) => s2.id === sectionId);
+      if (section) {
+        this._preserveSectionData(section);
+      }
+    });
+    console.log(`📦 Preserved data for ${sectionsThatWillBeHidden.length} hidden sections:`, sectionsThatWillBeHidden);
+  }
+  _restoreDataForVisibleSections(visibleSections) {
+    visibleSections.forEach((section) => {
+      this._restoreSectionData(section);
+    });
+    console.log(`🔄 Restored data for ${visibleSections.length} visible sections`);
+  }
+  _preserveSectionData(section) {
+    section.concepts.forEach((concept) => {
+      this._preserveConceptData(concept);
+    });
+  }
+  _preserveConceptData(concept) {
+    if (this._formData[concept.id]) {
+      this._preservedFormData[concept.id] = { ...this._formData[concept.id] };
+      console.log(`💾 Preserved form data for concept: ${concept.id}`);
+    }
+    concept.fields.forEach((field) => {
+      if (this._typedMemberData[field.columnId]) {
+        this._preservedTypedMemberData[field.columnId] = { ...this._typedMemberData[field.columnId] };
+        console.log(`💾 Preserved typed data for column: ${field.columnId}`);
+      }
+    });
+    if (concept.children) {
+      concept.children.forEach((child) => {
+        this._preserveConceptData(child);
+      });
+    }
+  }
+  _restoreSectionData(section) {
+    section.concepts.forEach((concept) => {
+      this._restoreConceptData(concept);
+    });
+  }
+  _restoreConceptData(concept) {
+    if (this._preservedFormData[concept.id]) {
+      this._formData[concept.id] = { ...this._preservedFormData[concept.id] };
+      console.log(`🔄 Restored form data for concept: ${concept.id}`);
+    }
+    concept.fields.forEach((field) => {
+      if (this._preservedTypedMemberData[field.columnId]) {
+        this._typedMemberData[field.columnId] = { ...this._preservedTypedMemberData[field.columnId] };
+        console.log(`🔄 Restored typed data for column: ${field.columnId}`);
+      }
+    });
+    if (concept.children) {
+      concept.children.forEach((child) => {
+        this._restoreConceptData(child);
+      });
+    }
+  }
+  _shouldShowFilterButton() {
+    return this._allSections.length > 10;
+  }
+  _handleFilterRolesClick() {
+    this._showFilterDialog = true;
+  }
+  _handleFilterDialogCancel() {
+    this._showFilterDialog = false;
+  }
+  _handleRoleFilterApply(event) {
+    const { selectedRoleIds } = event.detail;
+    this._selectedRoleIds = selectedRoleIds;
+    this._applyRoleFilter();
+    this._showFilterDialog = false;
+    this.dispatchEvent(new CustomEvent("roles-filter-changed", {
+      detail: {
+        selectedRoleIds,
+        totalRoles: this._allSections.length,
+        visibleRoles: selectedRoleIds.length
+      },
+      bubbles: true
+    }));
+  }
   _validateForm() {
     var _a;
     const errors = [];
@@ -2874,11 +4059,13 @@ let JupiterDynamicForm = class extends LitElement {
   }
   _handleFieldChange(event) {
     const { fieldId, conceptId, columnId, value } = event.detail;
-    if (!this._formData[conceptId]) {
-      this._formData[conceptId] = {};
+    const updatedFormData = { ...this._formData };
+    if (!updatedFormData[conceptId]) {
+      updatedFormData[conceptId] = {};
     }
-    const oldValue = this._formData[conceptId][columnId];
-    this._formData[conceptId][columnId] = value;
+    const oldValue = updatedFormData[conceptId][columnId];
+    updatedFormData[conceptId] = { ...updatedFormData[conceptId], [columnId]: value };
+    this._formData = updatedFormData;
     this._touched.add(`${conceptId}-${columnId}`);
     this._dirty = true;
     this._validateForm();
@@ -2888,13 +4075,32 @@ let JupiterDynamicForm = class extends LitElement {
       bubbles: true
     }));
   }
+  /**
+   * Generate a unique concept key that includes section context
+   */
+  _generateUniqueConceptKey(sectionId, conceptId) {
+    return `${sectionId}::${conceptId}`;
+  }
+  /**
+   * Extract the original concept ID from a unique concept key
+   */
+  _extractOriginalConceptId(uniqueConceptKey) {
+    const parts = uniqueConceptKey.split("::");
+    return parts.length > 1 ? parts[1] : uniqueConceptKey;
+  }
   _handleTypedMemberChange(event) {
-    const { columnId, value, sectionId } = event.detail;
-    this._typedMemberValues[columnId] = value;
+    const { columnId, axisId, value } = event.detail;
+    console.log(`🔍 [DynamicForm] Typed member change: columnId=${columnId}, axisId=${axisId}, value=${value}`);
+    const updatedTypedMemberData = { ...this._typedMemberData };
+    if (!updatedTypedMemberData[columnId]) {
+      updatedTypedMemberData[columnId] = {};
+    }
+    updatedTypedMemberData[columnId] = { ...updatedTypedMemberData[columnId], [axisId]: value };
+    this._typedMemberData = updatedTypedMemberData;
     this._dirty = true;
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("typed-member-change", {
-      detail: { columnId, value, sectionId },
+      detail: { columnId, axisId, value },
       bubbles: true
     }));
   }
@@ -2940,66 +4146,125 @@ let JupiterDynamicForm = class extends LitElement {
     const { sectionId, columnRequest } = event.detail;
     this._addColumnFromRequest(columnRequest, sectionId);
   }
+  _getAvailableDimensionsForSection(sectionId) {
+    var _a, _b, _c;
+    console.log(`🔍 Getting dimensions for section: ${sectionId}`);
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
+      console.log("❌ No hypercubes data available");
+      return [];
+    }
+    console.log(`📊 Available hypercube roles:`, this.xbrlInput.hypercubes[0].roles.map((r2) => r2.roleId));
+    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)) {
+      console.log(`❌ No hypercube items found for role: ${sectionId}`);
+      return [];
+    }
+    console.log(`✅ Found hypercube role with ${hypercubeRole.items.length} items`);
+    const availableDimensions = [];
+    hypercubeRole.items.forEach((item) => {
+      if (item.dimensions && item.dimensions.length > 0) {
+        item.dimensions.forEach((dimension) => {
+          var _a2;
+          if (!availableDimensions.find((d2) => d2.id === dimension.id)) {
+            const axisLabel = ((_a2 = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _a2.label) || dimension.conceptName;
+            const availableDimension = {
+              id: dimension.id,
+              conceptName: dimension.conceptName,
+              axisLabel
+            };
+            if (dimension.members && dimension.members.length > 0) {
+              availableDimension.members = dimension.members.map((member) => {
+                var _a3, _b2;
+                return {
+                  id: member.id,
+                  label: ((_b2 = (_a3 = member.labels) == null ? void 0 : _a3.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _b2.label) || member.conceptName || member.id
+                };
+              });
+            }
+            if (dimension.typedMember) {
+              availableDimension.typedMember = {
+                id: dimension.typedMember.id,
+                dataType: "string"
+                // Default to string for now
+              };
+            }
+            availableDimensions.push(availableDimension);
+          }
+        });
+      }
+    });
+    console.log(`📈 Found ${availableDimensions.length} dimensions for section ${sectionId}:`, availableDimensions.map((d2) => d2.axisLabel));
+    return availableDimensions;
+  }
   _addColumnFromRequest(request, sectionId) {
-    var _a, _b, _c, _d, _e, _f;
+    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}`;
+      title = "Current";
+      description = `Values as of ${request.instantDate}`;
     } else if (request.periodType === "duration" || request.periodType === "mixed") {
-      title = `${request.startDate} / ${request.endDate}`;
-      description = `Duration period: ${request.startDate} to ${request.endDate}`;
+      title = "Current Period";
+      description = `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.typedMember) {
-            const axisLabel = ((_d = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _d.label) || dimension.conceptName;
-            const typedMemberLabel = dimension.typedMember.id.split("_").pop() || "TypedMember";
-            const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
-            title = `${typedMemberLabel} ${periodPart}`;
-            dimensionData = {
-              dimensionId: newColumnId,
-              axisId: dimension.id,
-              memberId: dimension.typedMember.id,
-              memberValue: typedMemberLabel,
-              memberLabel: typedMemberLabel,
-              axis: axisLabel,
-              axisLabel,
-              memberKey: `${axisLabel} | ${typedMemberLabel}`,
-              dimensionIdKey: `${dimension.id} | ${dimension.typedMember.id}`,
-              isTypedMember: true
-            };
-            console.log(`📊 Applied typed member dimension to new column: ${dimensionData.memberKey}`);
-          } else if (dimension.members && dimension.members.length > 0) {
-            const axisLabel = ((_e = dimension.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _e.label) || dimension.conceptName;
-            const firstMember = dimension.members[0];
-            const memberLabel = ((_f = firstMember.labels.find((l2) => l2.role === "http://www.xbrl.org/2003/role/label")) == null ? void 0 : _f.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}`);
+    if (request.selectedDimensions && request.selectedDimensions.length > 0) {
+      const dimensionParts = [];
+      const dimensionKeys = [];
+      for (const dimSelection of request.selectedDimensions) {
+        if (dimSelection.isTyped && dimSelection.typedValue) {
+          dimensionParts.push(`${dimSelection.axisLabel}: ${dimSelection.typedValue}`);
+          dimensionKeys.push(`${dimSelection.axisId}|${dimSelection.typedValue}`);
+        } else if (dimSelection.memberId && dimSelection.memberLabel) {
+          dimensionParts.push(dimSelection.memberLabel);
+          dimensionKeys.push(`${dimSelection.axisId}|${dimSelection.memberId}`);
+        }
+      }
+      const periodPart = request.periodType === "instant" ? `(${request.instantDate})` : `(${request.startDate} / ${request.endDate})`;
+      if (dimensionParts.length > 0) {
+        title = `${dimensionParts.join(" | ")} ${periodPart}`;
+        dimensionData = {
+          dimensionId: newColumnId,
+          memberValue: dimensionParts.join(" | "),
+          memberLabel: dimensionParts.join(" | "),
+          memberKey: dimensionParts.join(" | "),
+          dimensionIdKey: dimensionKeys.join("::"),
+          selectedDimensions: request.selectedDimensions
+        };
+        console.log(`📊 Applied selected dimensions to new column: ${dimensionData.memberKey}`);
+      }
+    } else {
+      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 && 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}`);
+            }
           }
         }
       }
@@ -3154,9 +4419,27 @@ let JupiterDynamicForm = class extends LitElement {
     }));
   }
   _handleSubmit() {
+    console.log("📝 Form submission started...");
     this._submitted = true;
     this._validateForm();
     const submissionData = this._generateSubmissionData();
+    console.log("📊 Generated submission data:", {
+      formData: this._formData,
+      submissionData,
+      submissionDataCount: submissionData.length,
+      valid: this._valid,
+      errors: this._errors
+    });
+    submissionData.forEach((entry, index) => {
+      console.log(`📋 Submission Entry ${index + 1}:`, {
+        conceptId: entry.conceptId,
+        value: entry.value,
+        period: entry.period,
+        dimension: entry.dimension,
+        typedMembers: entry.typedMembers,
+        hasTypedMembers: !!(entry.typedMembers && Object.keys(entry.typedMembers).length > 0)
+      });
+    });
     this.dispatchEvent(new CustomEvent("form-submit", {
       detail: {
         data: this._formData,
@@ -3166,6 +4449,7 @@ let JupiterDynamicForm = class extends LitElement {
       },
       bubbles: true
     }));
+    console.log("✅ Form submit event dispatched");
   }
   _handleSaveDraft() {
     const draftData = this._generateSubmissionData();
@@ -3187,7 +4471,103 @@ let JupiterDynamicForm = class extends LitElement {
     this._currentSchema.sections.forEach((section) => {
       this._processConceptsForSubmission(section.concepts, submissionData, section);
     });
-    return submissionData;
+    this._includePreservedDataInSubmission(submissionData);
+    const uniqueSubmissionData = this._removeDuplicateSubmissions(submissionData);
+    return uniqueSubmissionData;
+  }
+  _includePreservedDataInSubmission(submissionData) {
+    Object.keys(this._preservedFormData).forEach((conceptId) => {
+      const conceptData = this._preservedFormData[conceptId];
+      if (conceptData) {
+        Object.keys(conceptData).forEach((columnId) => {
+          const value = conceptData[columnId];
+          if (value !== void 0 && value !== null && value !== "") {
+            const originalConcept = this._findConceptInAllSections(conceptId);
+            if (originalConcept) {
+              const originalSection = this._findSectionForConcept(conceptId);
+              this._addConceptDataToSubmission(originalConcept, columnId, value, submissionData, originalSection || void 0);
+            }
+          }
+        });
+      }
+    });
+    console.log(`📤 Included preserved data in submission. Total entries: ${submissionData.length}`);
+  }
+  _findConceptInAllSections(conceptId) {
+    for (const section of this._allSections) {
+      const concept = this._findConceptInSection(section.concepts, conceptId);
+      if (concept) {
+        return concept;
+      }
+    }
+    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 section of this._allSections) {
+      const concept = this._findConceptInSection(section.concepts, conceptId);
+      if (concept) {
+        return section;
+      }
+    }
+    return null;
+  }
+  _addConceptDataToSubmission(concept, columnId, value, submissionData, section) {
+    var _a;
+    const field = concept.fields.find((f2) => f2.columnId === columnId);
+    if (!field)
+      return;
+    const isInstant = concept.periodType === "instant";
+    const entry = {
+      conceptId: concept.originalConceptId || concept.id,
+      value,
+      period: {
+        type: concept.periodType || "duration",
+        ...isInstant ? { date: field.periodStartDate || this.periodStartDate } : {
+          startDate: field.periodStartDate || this.periodStartDate,
+          endDate: field.periodEndDate || this.periodEndDate
+        }
+      }
+    };
+    const column = this._findColumnByIdInAllSections(columnId);
+    if ((_a = column == null ? void 0 : column.dimensionData) == null ? void 0 : _a.memberLabel) {
+      entry.dimension = column.dimensionData.memberLabel;
+    }
+    submissionData.push(entry);
+  }
+  _findColumnByIdInAllSections(columnId) {
+    for (const section of this._allSections) {
+      if (section.columns) {
+        const column = section.columns.find((col) => col.id === columnId);
+        if (column) {
+          return column;
+        }
+      }
+    }
+    return void 0;
+  }
+  _removeDuplicateSubmissions(submissionData) {
+    const uniqueEntries = /* @__PURE__ */ new Map();
+    submissionData.forEach((entry) => {
+      const key = `${entry.conceptId}_${entry.value}_${entry.dimension || "no-dimension"}`;
+      if (!uniqueEntries.has(key)) {
+        uniqueEntries.set(key, entry);
+      }
+    });
+    return Array.from(uniqueEntries.values());
   }
   _findColumnById(columnId) {
     if (!this._currentSchema) {
@@ -3203,22 +4583,114 @@ let JupiterDynamicForm = class extends LitElement {
     }
     return void 0;
   }
+  _findColumnByIdInSection(columnId, section) {
+    if (!(section == null ? void 0 : section.columns)) {
+      return void 0;
+    }
+    return section.columns.find((col) => col.id === columnId);
+  }
+  _getTypedMemberNameForAxis(axisId, section) {
+    var _a, _b, _c, _d;
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
+      return null;
+    }
+    const sectionRoleId = section == null ? void 0 : section.id;
+    if (!sectionRoleId) {
+      return null;
+    }
+    const hypercube = this.xbrlInput.hypercubes[0];
+    const role = (_c = hypercube.roles) == null ? void 0 : _c.find((r2) => r2.roleId === sectionRoleId);
+    if (!(role == null ? void 0 : role.items)) {
+      return null;
+    }
+    for (const item of role.items) {
+      if (item.dimensions) {
+        const dimension = item.dimensions.find((d2) => d2.id === axisId);
+        if ((_d = dimension == null ? void 0 : dimension.typedMember) == null ? void 0 : _d.id) {
+          return dimension.typedMember.id;
+        }
+      }
+    }
+    return null;
+  }
+  _doesConceptApplyToTypedDimension(concept, section, columnId) {
+    var _a, _b, _c;
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0])) {
+      return false;
+    }
+    const sectionRoleId = section == null ? void 0 : section.id;
+    if (!sectionRoleId) {
+      return false;
+    }
+    const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === sectionRoleId);
+    if (!((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length)) {
+      return false;
+    }
+    for (const item of hypercubeRole.items) {
+      const conceptIdToCheck = concept.originalConceptId || concept.id;
+      if (item.conceptIds && item.conceptIds.includes(conceptIdToCheck)) {
+        const hasTypedDimensions = item.dimensions.some((dim) => dim.typedMember);
+        console.log(`🔍 [DynamicForm] Concept ${conceptIdToCheck} found in hypercube item. Has typed dimensions:`, hasTypedDimensions);
+        return hasTypedDimensions;
+      }
+    }
+    console.log(`🔍 [DynamicForm] Concept ${concept.originalConceptId || concept.id} not found in any hypercube items for role ${sectionRoleId}`);
+    return false;
+  }
+  /**
+   * Get the specific typed dimensions that apply to a concept in its role
+   */
+  _getApplicableTypedDimensions(concept, section) {
+    var _a, _b, _c;
+    if (!((_b = (_a = this.xbrlInput) == null ? void 0 : _a.hypercubes) == null ? void 0 : _b[0]) || !(section == null ? void 0 : section.id)) {
+      return [];
+    }
+    const hypercubeRole = this.xbrlInput.hypercubes[0].roles.find((hr) => hr.roleId === section.id);
+    if (!((_c = hypercubeRole == null ? void 0 : hypercubeRole.items) == null ? void 0 : _c.length)) {
+      return [];
+    }
+    const conceptIdToCheck = concept.originalConceptId || concept.id;
+    for (const item of hypercubeRole.items) {
+      if (item.conceptIds && item.conceptIds.includes(conceptIdToCheck)) {
+        const typedDimensions = item.dimensions.filter((dim) => dim.typedMember).map((dim) => dim.id);
+        console.log(`🔍 [DynamicForm] Found applicable typed dimensions for concept ${conceptIdToCheck}:`, typedDimensions);
+        return typedDimensions;
+      }
+    }
+    return [];
+  }
   _processConceptsForSubmission(concepts, submissionData, section) {
+    const targetRole = "Toelichting op de geconsolideerde jaarrekening - Financiële vaste activa: Deelnemingen: Volledig geconsolideerd: Specificatie";
+    const sectionTitle = (section == null ? void 0 : section.title) || "Unknown";
     concepts.forEach((concept) => {
+      if (sectionTitle === targetRole) {
+        console.warn(`[DUPLICATE DEBUG] Processing concept ${concept.originalConceptId || concept.id} in target role`);
+        if (concept.fields) {
+          console.warn(`[DUPLICATE DEBUG] Concept has ${concept.fields.length} fields`);
+          concept.fields.forEach((field, index) => {
+            var _a;
+            console.warn(`[DUPLICATE DEBUG] Field ${index}: columnId=${field.columnId}, current value=${(_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId]}`);
+          });
+        }
+      }
+      if (concept.fields && concept.fields.length > 1) {
+        console.log(`🔍 [DEBUG] Processing concept ${concept.originalConceptId}, fields count: ${concept.fields.length}`);
+        concept.fields.forEach((field, index) => {
+          var _a;
+          console.log(`  Field ${index}: columnId=${field.columnId}, value=${(_a = this._formData[concept.id]) == null ? void 0 : _a[field.columnId]}`);
+        });
+      }
       if (concept.fields && concept.fields.length > 0) {
         concept.fields.forEach((field) => {
-          var _a, _b, _c, _d;
+          var _a, _b;
           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);
-            console.log(`🔍 Processing field for concept ${concept.id}:`, {
-              fieldColumnId: field.columnId,
-              foundColumn: column,
-              columnType: column == null ? void 0 : column.type,
-              dimensionData: column == null ? void 0 : column.dimensionData,
-              isTypedMember: (_a = column == null ? void 0 : column.dimensionData) == null ? void 0 : _a.isTypedMember
-            });
+            if (sectionTitle === targetRole) {
+              console.warn(`[DUPLICATE DEBUG] Creating submission entry for concept ${concept.originalConceptId || concept.id}, field columnId=${field.columnId}, value=${fieldValue}`);
+            }
+            const column = this._findColumnByIdInSection(field.columnId, section);
+            console.log(`🔍 [DynamicForm] Processing field for concept ${concept.originalConceptId || concept.id}, field columnId: ${field.columnId}, found column in section ${section == null ? void 0 : section.id}: ${!!column}, column title: ${column == null ? void 0 : column.title}`);
             const submissionEntry = {
               conceptId: concept.id,
               value: fieldValue,
@@ -3232,45 +4704,50 @@ let JupiterDynamicForm = class extends LitElement {
               submissionEntry.period.startDate = field.periodStartDate || this.periodStartDate;
               submissionEntry.period.endDate = field.periodEndDate || this.periodEndDate;
             }
-            if ((column == null ? void 0 : column.type) === "dimension" && ((_b = column.dimensionData) == null ? void 0 : _b.dimensionIdKey)) {
-              console.log(`✅ Found column dimension data:`, column.dimensionData);
-              if (column.dimensionData.isTypedMember) {
-                submissionEntry.dimension = column.dimensionData.dimensionIdKey;
-                submissionEntry.typedDimension = true;
-                submissionEntry.typedMemberValue = this._typedMemberValues[column.id] || "";
-              } else {
-                submissionEntry.dimension = column.dimensionData.dimensionIdKey;
-              }
-            } else if ((_c = section == null ? void 0 : section.columns) == null ? void 0 : _c.length) {
-              console.log(`🔍 Checking section columns for dimension data:`, {
-                sectionId: section.id,
-                columnsCount: section.columns.length,
-                columns: section.columns.map((col) => {
-                  var _a2, _b2;
-                  return {
-                    id: col.id,
-                    type: col.type,
-                    hasDimensionData: !!col.dimensionData,
-                    dimensionIdKey: (_a2 = col.dimensionData) == null ? void 0 : _a2.dimensionIdKey,
-                    isTypedMember: (_b2 = col.dimensionData) == null ? void 0 : _b2.isTypedMember
-                  };
-                })
-              });
-              const sectionDimensionColumn = section.columns.find((col) => {
-                var _a2;
-                return col.type === "dimension" && ((_a2 = col.dimensionData) == null ? void 0 : _a2.dimensionIdKey);
-              });
-              if ((_d = sectionDimensionColumn == null ? void 0 : sectionDimensionColumn.dimensionData) == null ? void 0 : _d.dimensionIdKey) {
-                console.log(`✅ Found section dimension data:`, sectionDimensionColumn.dimensionData);
-                if (sectionDimensionColumn.dimensionData.isTypedMember) {
-                  submissionEntry.dimension = sectionDimensionColumn.dimensionData.dimensionIdKey;
-                  submissionEntry.typedDimension = true;
-                  submissionEntry.typedMemberValue = this._typedMemberValues[sectionDimensionColumn.id] || "";
+            if ((column == null ? void 0 : column.type) === "dimension" && ((_a = column.dimensionData) == null ? void 0 : _a.dimensionIdKey)) {
+              submissionEntry.dimension = column.dimensionData.dimensionIdKey;
+              console.log(`🔍 [DynamicForm] Using dimension key from field's column (${field.columnId}):`, column.dimensionData.dimensionIdKey);
+            } else {
+              console.log(`🔍 [DynamicForm] No dimension data found for field column ${field.columnId}. Column type: ${column == null ? void 0 : column.type}, has dimensionData: ${!!(column == null ? void 0 : column.dimensionData)}`);
+            }
+            if (this._typedMemberData[field.columnId]) {
+              const applicableTypedDimensions = this._getApplicableTypedDimensions(concept, section);
+              console.log(`🔍 [DynamicForm] Concept ${concept.id} applicable typed dimensions:`, applicableTypedDimensions);
+              if (applicableTypedDimensions.length > 0) {
+                const filteredTypedMembers = {};
+                const allTypedMemberData = this._typedMemberData[field.columnId];
+                applicableTypedDimensions.forEach((dimensionId) => {
+                  if (allTypedMemberData[dimensionId]) {
+                    const memberName = this._getTypedMemberNameForAxis(dimensionId, section);
+                    filteredTypedMembers[dimensionId] = {
+                      value: allTypedMemberData[dimensionId],
+                      memberName: memberName || "Unknown"
+                    };
+                  }
+                });
+                if (Object.keys(filteredTypedMembers).length > 0) {
+                  submissionEntry.typedMembers = filteredTypedMembers;
+                  console.log(`🔍 [DynamicForm] Adding filtered typed members to submission:`, filteredTypedMembers);
                 } else {
-                  submissionEntry.dimension = sectionDimensionColumn.dimensionData.dimensionIdKey;
+                  console.log(`🔍 [DynamicForm] No typed member values found for applicable dimensions:`, applicableTypedDimensions);
                 }
+              } else {
+                console.log(`🔍 [DynamicForm] Skipping typed members for concept ${concept.id} - not applicable to this hypercube`);
+              }
+            } else {
+              console.log(`🔍 [DynamicForm] No typed member data found for column ${field.columnId}. Available columns:`, Object.keys(this._typedMemberData));
+              if (column) {
+                console.log(`🔍 [DynamicForm] Column details:`, {
+                  id: column.id,
+                  type: column.type,
+                  hasTypedMembers: (_b = column.dimensionData) == null ? void 0 : _b.hasTypedMembers,
+                  dimensionData: column.dimensionData
+                });
               }
             }
+            if (sectionTitle === targetRole) {
+              console.warn(`[DUPLICATE DEBUG] Final submission entry:`, submissionEntry);
+            }
             submissionData.push(submissionEntry);
           }
         });
@@ -3285,6 +4762,9 @@ let JupiterDynamicForm = class extends LitElement {
     this._touched.clear();
     this._dirty = false;
     this._submitted = false;
+    this._preservedFormData = {};
+    this._preservedTypedMemberData = {};
+    console.log("🔄 Form reset - all data and preserved data cleared");
     this._validateForm();
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent("form-reset", {
@@ -3360,9 +4840,11 @@ let JupiterDynamicForm = class extends LitElement {
               .section="${section}"
               .columns="${section.columns || this._columns}"
               .formData="${this._formData}"
+              .typedMemberData="${this._typedMemberData}"
               .disabled="${this.disabled || this.readonly}"
               .collapsible="${config.collapsibleSections !== false}"
               .locale="${config.locale || "en-US"}"
+              .availableDimensions="${this._getAvailableDimensionsForSection(section.id)}"
               @field-change="${this._handleFieldChange}"
               @typed-member-change="${this._handleTypedMemberChange}"
               @section-expand="${this._handleSectionExpand}"
@@ -3375,6 +4857,21 @@ let JupiterDynamicForm = class extends LitElement {
 
         <!-- Form Actions - Fixed Footer -->
         <div class="form-actions">
+          <!-- Filter Roles Button (shown when more than 10 roles) -->
+          ${this._shouldShowFilterButton() ? html`
+            <button 
+              class="filter-roles-button"
+              @click="${this._handleFilterRolesClick}"
+              ?disabled="${this.disabled || this.readonly}"
+            >
+              <svg class="filter-icon" viewBox="0 0 24 24">
+                <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+              </svg>
+              Filter Roles
+              <span class="roles-count">${this._selectedRoleIds.length}/${this._allSections.length}</span>
+            </button>
+          ` : ""}
+          
           <button 
             class="btn-secondary"
             @click="${this._handleSaveDraft}"
@@ -3397,6 +4894,18 @@ let JupiterDynamicForm = class extends LitElement {
             <span>Valid: ${this._valid ? "Yes" : "No"}</span>
           </div>
         </div>
+
+        <!-- Filter Roles Dialog -->
+        ${this._showFilterDialog ? html`
+          <jupiter-filter-roles-dialog
+            ?open="${this._showFilterDialog}"
+            .availableRoles="${this._allSections}"
+            .selectedRoleIds="${this._selectedRoleIds}"
+            @dialog-cancel="${this._handleFilterDialogCancel}"
+            @roles-filter-apply="${this._handleRoleFilterApply}"
+            @click="${this._handleFilterDialogCancel}"
+          ></jupiter-filter-roles-dialog>
+        ` : ""}
       </div>
     `;
   }
@@ -3531,6 +5040,47 @@ JupiterDynamicForm.styles = css`
       color: var(--jupiter-text-secondary, #666);
       margin-left: auto;
     }
+
+    .filter-roles-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: transparent;
+      border: 1px solid var(--jupiter-primary-color, #1976d2);
+      color: var(--jupiter-primary-color, #1976d2);
+      border-radius: 4px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      margin-right: auto;
+    }
+
+    .filter-roles-button:hover:not(:disabled) {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .filter-roles-button .filter-icon {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    .roles-count {
+      display: inline-flex;
+      align-items: center;
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+      border-radius: 10px;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 6px;
+      margin-left: 4px;
+      min-width: 18px;
+      justify-content: center;
+    }
   `;
 __decorateClass([
   n2({ type: Object })
@@ -3559,6 +5109,15 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_formData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_preservedFormData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_typedMemberData", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_preservedTypedMemberData", 2);
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_columns", 2);
@@ -3582,16 +5141,23 @@ __decorateClass([
 ], JupiterDynamicForm.prototype, "_currentSchema", 2);
 __decorateClass([
   r()
-], JupiterDynamicForm.prototype, "_typedMemberValues", 2);
+], JupiterDynamicForm.prototype, "_allSections", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_selectedRoleIds", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_showFilterDialog", 2);
 JupiterDynamicForm = __decorateClass([
   t$1("jupiter-dynamic-form")
 ], JupiterDynamicForm);
-const version = "1.0.0";
+const version = "1.5.0";
 export {
   FormValidator,
   JupiterAddColumnDialog,
   JupiterConceptTree,
   JupiterDynamicForm,
+  JupiterFilterRolesDialog,
   JupiterFormField,
   JupiterFormSection,
   version