Refactor stackHorizontal for dynamic column counts

- Updated the stackHorizontal method to stack card configurations into
  horizontal stacks based on their type.
- Changed the parameter from a single columnCount to an object mapping
  card types to their respective column counts, allowing for greater
  flexibility.

src/Registry.ts

@@ -260,24 +260,66 @@ class Registry {
   }
 
   /**
-   * Splits an array of card configurations into horizontal stack card configurations.
+   * Stacks an array of Lovelace card configurations into horizontal stacks based on their type.
    *
-   * Each horizontal stack contains a specified number of cards.
+   * This method processes sequences of cards with the same type and applies a specified column count
+   * for each type of card.
+   * It returns a new array of stacked card configurations, preserving the original order of the cards.
    *
-   * @param {LovelaceCardConfig[]} cardConfigurations - Array of card configurations to be stacked.
+   * @param cardConfigurations - An array of Lovelace card configurations to be stacked.
-   * @param {number} columnCount - Maximal number of cards per horizontal stack.
+   * @param [columnCounts] - An object mapping card types to their respective column counts.
+   *                         If a type is not found in the mapping, it defaults to 2.
+   * @returns An array of stacked card configurations, where each configuration is a horizontal stack
+   *          containing a specified number of cards.
+   *
+   * @example
+   * ```typescript
+   * stackedCards = stackHorizontal(card, {area: 1, "custom:card": 2});
+   * ```
    */
-  static stackHorizontal(cardConfigurations: LovelaceCardConfig[], columnCount: number): StackCardConfig[] {
+  static stackHorizontal(
-    const stackedCardConfigurations: StackCardConfig[] = [];
+    cardConfigurations: LovelaceCardConfig[],
+    columnCounts?: {
+      [key: string]: number;
+    },
+  ): LovelaceCardConfig[] {
+    // Function to process a sequence of cards
+    const doStack = (cards: LovelaceCardConfig[], columnCount: number) => {
+      const stackedCardConfigurations: StackCardConfig[] = [];
 
-    for (let i = 0; i < cardConfigurations.length; i += columnCount) {
+      for (let i = 0; i < cards.length; i += columnCount) {
-      stackedCardConfigurations.push({
+        stackedCardConfigurations.push({
-        type: 'horizontal-stack',
+          type: 'horizontal-stack',
-        cards: cardConfigurations.slice(i, i + columnCount),
+          cards: cards.slice(i, i + columnCount),
-      } as StackCardConfig);
+        } as StackCardConfig);
+      }
+
+      return stackedCardConfigurations;
+    };
+
+    // Array to hold the processed cards
+    const processedConfigurations: LovelaceCardConfig[] = [];
+
+    for (let i = 0; i < cardConfigurations.length; ) {
+      const currentCard = cardConfigurations[i];
+      const currentType = currentCard.type; // Assuming each card has a 'type' property
+
+      // Start a new sequence
+      const sequence: LovelaceCardConfig[] = [];
+
+      // Collect all cards of the same type into the sequence
+      while (i < cardConfigurations.length && cardConfigurations[i].type === currentType) {
+        sequence.push(cardConfigurations[i]);
+        i++; // Move to the next card
+      }
+
+      const columnCount = Math.max(columnCounts?.[currentType] || 2, 1);
+
+      // Process the sequence and add the result to the processedConfigurations array
+      processedConfigurations.push(...doStack(sequence, columnCount));
     }
 
-    return stackedCardConfigurations;
+    return processedConfigurations;
   }
 
   /**