@classic-homes/theme-svelte 1.3.0 → 1.4.0

package/dist/lib/components/DataPanel.svelte

@@ -19,7 +19,6 @@
     DEFAULT_CARD_CONFIG,
     DEFAULT_TAB_WIDTH,
     CARD_HEADER_HEIGHT,
-    CARD_EXPANDED_RATIO,
     CARD_MIN_WIDTH,
     loadPanelState,
     savePanelState,
@@ -166,6 +165,20 @@
   const resolvedConstraints = $derived({ ...DEFAULT_CONSTRAINTS, ...constraints });
   const resolvedCardConfig = $derived({ ...DEFAULT_CARD_CONFIG, ...cardConfig });
 
+  /**
+   * Default left offset for the card sheet, honoring cardConfig.align.
+   * Drag/resize bounds derive from the same offset so existing
+   * interactions are unaffected by non-center alignment.
+   */
+  function cardDefaultLeftOffset(width: number): number {
+    const margin = resolvedCardConfig.horizontalMargin;
+    if (resolvedCardConfig.align === 'left') return margin;
+    if (resolvedCardConfig.align === 'right') {
+      return Math.max(margin, viewportWidth - width - margin);
+    }
+    return Math.max(margin, (viewportWidth - width) / 2);
+  }
+
   // Internal state - initialized from props or persistence
   let internalMode = $state<PanelMode>(DEFAULT_PANEL_STATE.mode);
   let internalVariant = $state<PanelVariant>(DEFAULT_PANEL_STATE.variant);
@@ -295,13 +308,13 @@
     viewportHeight = window.innerHeight;
 
     // Initialize card expanded height
-    cardExpandedHeight = viewportHeight * CARD_EXPANDED_RATIO;
+    cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
 
     // Listen for resize
     const handleResize = () => {
       viewportWidth = window.innerWidth;
       viewportHeight = window.innerHeight;
-      cardExpandedHeight = viewportHeight * CARD_EXPANDED_RATIO;
+      cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
     };
     window.addEventListener('resize', handleResize);
 
@@ -583,10 +596,7 @@
         viewportWidth - resolvedCardConfig.horizontalMargin * 2,
         resolvedCardConfig.maxWidth
       );
-      const defaultLeftOffset = Math.max(
-        resolvedCardConfig.horizontalMargin,
-        (viewportWidth - cardWidth) / 2
-      );
+      const defaultLeftOffset = cardDefaultLeftOffset(cardWidth);
       // Calculate bounds: can move from left margin to right margin
       const minOffset = -(defaultLeftOffset - resolvedCardConfig.horizontalMargin);
       const maxOffset =
@@ -898,10 +908,7 @@
     cardWidthResizeStartWidth = currentWidth;
 
     // Calculate current left position
-    const defaultLeftOffset = Math.max(
-      resolvedCardConfig.horizontalMargin,
-      (viewportWidth - defaultCardWidth) / 2
-    );
+    const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
     cardWidthResizeStartLeft = defaultLeftOffset + cardHorizontalPosition;
 
     document.body.style.cursor = 'ew-resize';
@@ -940,10 +947,7 @@
           viewportWidth - resolvedCardConfig.horizontalMargin * 2,
           resolvedCardConfig.maxWidth
         );
-        const defaultLeftOffset = Math.max(
-          resolvedCardConfig.horizontalMargin,
-          (viewportWidth - defaultCardWidth) / 2
-        );
+        const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
         cardHorizontalPosition = newLeft - defaultLeftOffset;
       }
     }
@@ -1087,10 +1091,7 @@
       );
       // Use custom cardWidth if set, otherwise use default
       const actualCardWidth = cardWidth ?? defaultCardWidth;
-      const defaultLeftOffset = Math.max(
-        resolvedCardConfig.horizontalMargin,
-        (viewportWidth - defaultCardWidth) / 2
-      );
+      const defaultLeftOffset = cardDefaultLeftOffset(defaultCardWidth);
 
       // Height based on expanded state or drag
       let height: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",