@classic-homes/theme-svelte 1.15.0 → 1.15.2

package/dist/__tests__/data-panel-card-gestures.test.js

@@ -0,0 +1,138 @@
+/**
+ * DataPanel phone card: gestures and layout.
+ *
+ * - A cancelled pointer (iOS's swipe up from the home indicator to leave the
+ *   app) must not expand the card. It used to be handled like pointerup, so a
+ *   quick cancel read as a tap.
+ * - The phone card is laid out at its expanded height and slid with
+ *   `translate`, padded by the safe-area inset so its collapsed header sits
+ *   above the home indicator.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
+import DataPanel from '../lib/components/DataPanel.svelte';
+const children = createRawSnippet(() => ({ render: () => '<p>Legend body</p>' }));
+let instance = null;
+let host;
+function pointer(type, target, y) {
+    const event = new MouseEvent(type, { bubbles: true, clientX: 100, clientY: y });
+    Object.defineProperty(event, 'pointerId', { value: 1 });
+    target.dispatchEvent(event);
+}
+function mountCard(props = {}) {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+    instance = mount(DataPanel, {
+        target: host,
+        props: {
+            title: 'Legend & Information',
+            variant: 'card',
+            disableClose: true,
+            mobileBreakpoint: 768,
+            children,
+            ...props,
+        },
+    });
+    flushSync();
+    return {
+        panel: host.querySelector('[role="dialog"]'),
+        header: host.querySelector('[data-panel-header]'),
+    };
+}
+beforeEach(() => {
+    var _a, _b, _c, _d;
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(390);
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800);
+    vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(390);
+    // jsdom has no pointer capture
+    (_a = HTMLElement.prototype).setPointerCapture ?? (_a.setPointerCapture = () => { });
+    (_b = HTMLElement.prototype).releasePointerCapture ?? (_b.releasePointerCapture = () => { });
+    (_c = HTMLElement.prototype).hasPointerCapture ?? (_c.hasPointerCapture = () => false);
+    // ...nor Web Animations, which the scrim's fade transition uses
+    (_d = Element.prototype).animate ?? (_d.animate = function () {
+        const animation = {
+            onfinish: null,
+            cancel() { },
+            finished: Promise.resolve(),
+        };
+        queueMicrotask(() => animation.onfinish?.());
+        return animation;
+    });
+});
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    host?.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+});
+describe('DataPanel card pointer cancel', () => {
+    it('does not expand when the OS cancels the pointer', () => {
+        const onExpandedChange = vi.fn();
+        const { header } = mountCard({ expanded: false, onExpandedChange });
+        pointer('pointerdown', header, 790);
+        flushSync();
+        pointer('pointercancel', header, 790);
+        flushSync();
+        expect(onExpandedChange).not.toHaveBeenCalled();
+    });
+    it('does not expand on a fast upward cancel either', () => {
+        const onExpandedChange = vi.fn();
+        const { header } = mountCard({ expanded: false, onExpandedChange });
+        pointer('pointerdown', header, 790);
+        flushSync();
+        pointer('pointermove', header, 700);
+        flushSync();
+        pointer('pointercancel', header, 600);
+        flushSync();
+        expect(onExpandedChange).not.toHaveBeenCalled();
+    });
+    it('still expands on a tap', () => {
+        const onExpandedChange = vi.fn();
+        const { header } = mountCard({ expanded: false, onExpandedChange });
+        pointer('pointerdown', header, 790);
+        flushSync();
+        pointer('pointerup', header, 790);
+        flushSync();
+        expect(onExpandedChange).toHaveBeenCalledWith(true);
+    });
+});
+describe('DataPanel phone card layout', () => {
+    it('slides a full-height sheet instead of resizing it, clear of the home indicator', () => {
+        const { panel, header } = mountCard({ expanded: false });
+        // 0.85 of an 800px viewport
+        // jsdom cannot parse env() (it drops padding-bottom and garbles height),
+        // so the safe-area padding itself is checked in a browser
+        expect(panel.style.height).toContain('680px');
+        expect(panel.style.height).toContain('safe-area-inset-bottom');
+        // Collapsed: everything but the 72px header is below the fold
+        expect(panel.style.getPropertyValue('translate')).toBe('0 608px');
+        expect(header.classList.contains('touch-none')).toBe(true);
+    });
+    it('keeps content mounted while the card animates closed', () => {
+        vi.useFakeTimers();
+        // Uncontrolled: the chevron drives expanded state
+        const { panel } = mountCard();
+        const chevron = () => host.querySelector('button[title="Expand"], button[title="Collapse"]');
+        if (chevron().title === 'Expand')
+            chevron().click();
+        flushSync();
+        expect(panel.style.getPropertyValue('translate')).toBe('0 0px');
+        expect(host.textContent).toContain('Legend body');
+        chevron().click();
+        flushSync();
+        expect(panel.style.getPropertyValue('translate')).toBe('0 608px');
+        expect(host.textContent).toContain('Legend body');
+        vi.advanceTimersByTime(400);
+        flushSync();
+        expect(host.textContent).not.toContain('Legend body');
+    });
+    it('leaves the desktop card sized by height', () => {
+        vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1280);
+        vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(1280);
+        const { panel } = mountCard({ expanded: false });
+        expect(panel.style.height).toBe('72px');
+        expect(panel.style.getPropertyValue('translate')).toBe('');
+    });
+});

package/dist/__tests__/data-panel-viewport.test.js

@@ -0,0 +1,45 @@
+/**
+ * DataPanel card sizing uses the layout viewport, not window.innerWidth.
+ *
+ * innerWidth includes a vertical scrollbar; the layout width does not. With
+ * a 15px scrollbar the card used to be 16px from the left edge and 1px from
+ * the right, because both its width and its centred offset came from the
+ * wider number.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
+import DataPanel from '../lib/components/DataPanel.svelte';
+const children = createRawSnippet(() => ({ render: () => '<p>Legend</p>' }));
+let instance = null;
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    vi.restoreAllMocks();
+});
+describe('DataPanel card viewport width', () => {
+    it('insets the card equally when a scrollbar makes innerWidth wider than the layout', () => {
+        // 390px window with a 15px vertical scrollbar: 375px of layout
+        vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(390);
+        vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(375);
+        const host = document.createElement('div');
+        document.body.appendChild(host);
+        instance = mount(DataPanel, {
+            target: host,
+            props: {
+                title: 'Legend & Information',
+                variant: 'card',
+                expanded: false,
+                disableClose: true,
+                mobileBreakpoint: 768,
+                cardConfig: { maxWidth: 480, horizontalMargin: 16 },
+                children,
+            },
+        });
+        flushSync();
+        const panel = host.querySelector('[role="dialog"]');
+        expect(panel.style.left).toBe('16px');
+        // 375 - 2 * 16, so the right margin is 16px too
+        expect(panel.style.width).toBe('343px');
+    });
+});

package/dist/lib/components/DataPanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { cn } from '../utils.js';
   import { onMount, onDestroy } from 'svelte';
+  import { fade } from 'svelte/transition';
   import type { Snippet } from 'svelte';
   import type {
     PanelEdge,
@@ -224,6 +225,9 @@
   let cardDragStartHorizontalPosition = $state(0);
   // Flag to indicate we're animating after a drag (keeps using cardDragCurrentHeight for height)
   let isCardHeightTransitioning = $state(false);
+  // Keeps a collapsing card's content mounted until the collapse animation ends,
+  // so the sheet does not go blank before it has shrunk.
+  let isCardContentLingering = $state(false);
 
   // Card width resize state
   let isCardWidthResizing = $state(false);
@@ -244,8 +248,19 @@
   // Panel element ref
   let panelRef = $state<HTMLDivElement | null>(null);
 
+  /**
+   * Layout viewport width. Not layoutViewportWidth(): that includes a vertical
+   * scrollbar, and the card sheet's width and centred left offset are
+   * computed from this number, so with a scrollbar showing (a desktop
+   * browser at phone width, device toolbars) the card came out 16px from the
+   * left edge and a scrollbar's width short of the right one.
+   */
+  function layoutViewportWidth(): number {
+    return document.documentElement.clientWidth;
+  }
+
   // Viewport dimensions
-  let viewportWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 1024);
+  let viewportWidth = $state(typeof document !== 'undefined' ? layoutViewportWidth() : 1024);
   let viewportHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 768);
 
   // Detect mobile
@@ -257,6 +272,14 @@
   const edge = $derived(propEdge ?? internalEdge);
   const isExpanded = $derived(propExpanded ?? internalExpanded);
 
+  /**
+   * A phone bottom sheet. It is laid out once at its expanded height and slid
+   * with `translate`, rather than animating `height` (which re-lays-out the
+   * whole panel every frame and stutters on iOS), and it clears the home
+   * indicator with `env(safe-area-inset-bottom)`.
+   */
+  const isMobileCard = $derived(variant === 'card' && isMobile);
+
   // Whether the panel is currently presented as a modal dialog (detached, or an
   // expanded mobile card). In that state we trap focus for a11y parity with React.
   // A desktop card is a non-modal floating sheet with no scrim, so it must not
@@ -311,7 +334,7 @@
   // Initialize from persistence on mount
   onMount(() => {
     // Update viewport dimensions
-    viewportWidth = window.innerWidth;
+    viewportWidth = layoutViewportWidth();
     viewportHeight = window.innerHeight;
 
     // Initialize card expanded height
@@ -319,7 +342,7 @@
 
     // Listen for resize
     const handleResize = () => {
-      viewportWidth = window.innerWidth;
+      viewportWidth = layoutViewportWidth();
       viewportHeight = window.innerHeight;
       cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
     };
@@ -348,7 +371,7 @@
       ) {
         detachedPosition = getInitialDetachedPosition(
           detachedSize,
-          window.innerWidth,
+          layoutViewportWidth(),
           window.innerHeight
         );
       }
@@ -465,7 +488,7 @@
     const snap = detectEdgeSnap(
       newPosition,
       detachedSize,
-      window.innerWidth,
+      layoutViewportWidth(),
       window.innerHeight,
       snapThreshold
     );
@@ -476,7 +499,7 @@
     detachedPosition = constrainPosition(
       newPosition,
       detachedSize,
-      window.innerWidth,
+      layoutViewportWidth(),
       window.innerHeight
     );
   }
@@ -517,7 +540,7 @@
         pinnedSize,
         detachedSize,
         edge,
-        window.innerWidth,
+        layoutViewportWidth(),
         window.innerHeight
       );
 
@@ -588,11 +611,13 @@
     if (isCardVerticalDragging) {
       const deltaY = cardDragStartY - currentPos.y; // Positive when dragging up
 
-      // Both mobile and desktop: change height directly during drag
+      // Both mobile and desktop: change height directly during drag. A phone
+      // sheet is only as tall as its expanded state, so it stops there.
       const startHeight = cardDragStartExpanded ? cardExpandedHeight : CARD_HEADER_HEIGHT;
+      const maxHeight = isMobileCard ? cardExpandedHeight : viewportHeight * 0.95;
       cardDragCurrentHeight = Math.max(
         CARD_HEADER_HEIGHT,
-        Math.min(viewportHeight * 0.95, startHeight + deltaY)
+        Math.min(maxHeight, startHeight + deltaY)
       );
     }
 
@@ -665,6 +690,33 @@
     }
   }
 
+  /**
+   * The OS took the pointer: iOS's swipe up from the home indicator to leave the
+   * app, a system scroll, a palm. Nothing was released, so nothing is decided -
+   * the card settles back where the gesture started. Treating this like
+   * pointerup read a quick cancel as a tap and a fast one as an upward flick,
+   * so leaving the app opened the sheet every time.
+   */
+  function handleCardPointerCancel(e: PointerEvent) {
+    document.body.style.userSelect = '';
+    const target = e.target as HTMLElement;
+    if (target?.hasPointerCapture?.(e.pointerId)) target.releasePointerCapture(e.pointerId);
+
+    if (isCardVerticalDragging) {
+      isCardVerticalDragging = false;
+      isCardHeightTransitioning = true;
+      const restingHeight = cardDragStartExpanded ? cardExpandedHeight : CARD_HEADER_HEIGHT;
+      requestAnimationFrame(() => {
+        cardDragCurrentHeight = restingHeight;
+      });
+    }
+
+    if (isCardHorizontalDragging) {
+      isCardHorizontalDragging = false;
+      cardHorizontalPosition = cardDragStartHorizontalPosition;
+    }
+  }
+
   // Resize handlers
   function handleResizeStart(e: PointerEvent, handle: ResizeHandle) {
     if (disableResize) return;
@@ -708,7 +760,7 @@
         result.position,
         result.size,
         resolvedConstraints,
-        window.innerWidth,
+        layoutViewportWidth(),
         window.innerHeight,
         resizeHandle
       );
@@ -725,7 +777,7 @@
       const newSize = resizeSizeStart.width + delta * direction;
 
       if (isHorizontalEdge(edge)) {
-        pinnedSize = constrainPinnedWidth(newSize, resolvedConstraints, window.innerWidth);
+        pinnedSize = constrainPinnedWidth(newSize, resolvedConstraints, layoutViewportWidth());
       } else {
         pinnedSize = constrainPinnedHeight(newSize, resolvedConstraints, window.innerHeight);
       }
@@ -791,7 +843,7 @@
           candidatePosition,
           { width, height },
           resolvedConstraints,
-          window.innerWidth,
+          layoutViewportWidth(),
           window.innerHeight,
           handle
         );
@@ -829,7 +881,7 @@
       if (handled) {
         e.preventDefault();
         pinnedSize = horizontal
-          ? constrainPinnedWidth(newSize, resolvedConstraints, window.innerWidth)
+          ? constrainPinnedWidth(newSize, resolvedConstraints, layoutViewportWidth())
           : constrainPinnedHeight(newSize, resolvedConstraints, window.innerHeight);
         debouncedSave();
       }
@@ -1045,6 +1097,17 @@
     if (isCardWidthResizing) handleCardWidthResizeEnd();
   }
 
+  function handlePointerCancel(e: PointerEvent) {
+    // A card gesture is abandoned rather than completed (see
+    // handleCardPointerCancel); every other interaction ends as on pointerup so
+    // nothing is left stuck with body styles applied.
+    if (isCardVerticalDragging || isCardHorizontalDragging) handleCardPointerCancel(e);
+    if (isDragging) handleDragEnd();
+    if (isPinnedDragging) handlePinnedDragEnd();
+    if (isResizing) handleResizeEnd();
+    if (isCardWidthResizing) handleCardWidthResizeEnd();
+  }
+
   // Add/remove global listeners
   $effect(() => {
     if (
@@ -1057,13 +1120,11 @@
     ) {
       window.addEventListener('pointermove', handlePointerMove);
       window.addEventListener('pointerup', handlePointerUp);
-      // Treat a canceled pointer (OS gesture, scroll) like pointerup so we don't
-      // get stuck mid-interaction with body styles applied.
-      window.addEventListener('pointercancel', handlePointerUp);
+      window.addEventListener('pointercancel', handlePointerCancel);
       return () => {
         window.removeEventListener('pointermove', handlePointerMove);
         window.removeEventListener('pointerup', handlePointerUp);
-        window.removeEventListener('pointercancel', handlePointerUp);
+        window.removeEventListener('pointercancel', handlePointerCancel);
       };
     }
   });
@@ -1088,6 +1149,25 @@
     }
   });
 
+  // Keep a card's content mounted while it animates closed (from a tap, the
+  // chevron, the scrim, Escape or a parent flipping `expanded`), matching the
+  // 300ms transition.
+  let wasCardExpanded = false;
+  $effect(() => {
+    const expandedNow = isExpanded;
+    const collapsing = variant === 'card' && wasCardExpanded && !expandedNow;
+    wasCardExpanded = expandedNow;
+    if (!collapsing) return;
+    isCardContentLingering = true;
+    const timeout = setTimeout(() => {
+      isCardContentLingering = false;
+    }, 350);
+    return () => {
+      clearTimeout(timeout);
+      isCardContentLingering = false;
+    };
+  });
+
   // Calculate panel styles
   const panelStyles = $derived.by(() => {
     if (variant === 'card') {
@@ -1109,6 +1189,23 @@
         height = isExpanded ? cardExpandedHeight : CARD_HEADER_HEIGHT;
       }
 
+      if (isMobileCard) {
+        // Full-width phone sheet at its expanded height; `height` above is how
+        // much of it shows. The part below the fold is slid off-screen with
+        // `translate` (composited, and it composes with the mount keyframe's
+        // `transform`). The safe-area inset is added to the sheet and padded
+        // out, so the collapsed header sits above the home indicator instead
+        // of inside the strip iOS claims for its swipe-to-leave gesture.
+        return {
+          bottom: '0',
+          left: `${defaultLeftOffset}px`,
+          width: `${defaultCardWidth}px`,
+          height: `calc(${cardExpandedHeight}px + env(safe-area-inset-bottom, 0px))`,
+          'padding-bottom': 'env(safe-area-inset-bottom, 0px)',
+          translate: `0 ${Math.max(0, cardExpandedHeight - height)}px`,
+        };
+      }
+
       return {
         bottom: '0',
         left: `${defaultLeftOffset + cardHorizontalPosition}px`,
@@ -1159,7 +1256,13 @@
   });
 
   // Whether to show content (collapsed card only shows header)
-  const showContent = $derived(variant !== 'card' || isExpanded || isCardVerticalDragging);
+  const showContent = $derived(
+    variant !== 'card' ||
+      isExpanded ||
+      isCardVerticalDragging ||
+      isCardHeightTransitioning ||
+      isCardContentLingering
+  );
 
   // Rotation for the header collapse chevron (base points up). For the full
   // variant it points toward the edge the panel collapses to — the pinned edge,
@@ -1212,7 +1315,8 @@
     {#if variant === 'card' && isExpanded && isMobile}
       <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
       <div
-        class="fixed inset-0 z-40 bg-black/50 transition-opacity"
+        class="fixed inset-0 z-40 bg-black/50"
+        transition:fade={{ duration: 300 }}
         onclick={handleToggleExpand}
         aria-hidden="true"
       ></div>
@@ -1234,7 +1338,7 @@
           !isCardVerticalDragging &&
           !isResizing &&
           !isCardWidthResizing &&
-          'transition-[height,left,width,transform] duration-300 ease-out',
+          'transition-[height,left,width,transform,translate] duration-300 ease-out',
         animationClass,
         className
       )}
@@ -1263,7 +1367,10 @@
             !disableDrag &&
             (mode === 'detached' || (mode === 'pinned' && detachThreshold > 0)) &&
             'cursor-grab',
-          variant === 'card' && 'cursor-pointer'
+          // touch-none: a drag on the header moves the sheet, not the page.
+          // Without it the browser scrolled along, then cancelled the pointer
+          // mid-drag and the sheet snapped.
+          variant === 'card' && 'cursor-pointer touch-none'
         )}
         onpointerdown={variant === 'card' ? handleCardHeaderPointerDown : undefined}
       >

package/package.json

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