@classic-homes/theme-svelte 0.1.50 → 0.1.51

package/dist/lib/components/DataPanel.svelte

@@ -0,0 +1,1399 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { onMount } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import type {
+    PanelEdge,
+    PanelMode,
+    PanelVariant,
+    CardConfig,
+    Position,
+    Size,
+    PanelConstraints,
+    DataPanelAction,
+    ResizeHandle,
+  } from '@classic-homes/data-panel-core';
+  import {
+    DEFAULT_PANEL_STATE,
+    DEFAULT_CONSTRAINTS,
+    DEFAULT_CARD_CONFIG,
+    CARD_HEADER_HEIGHT,
+    CARD_EXPANDED_RATIO,
+    CARD_MIN_WIDTH,
+    loadPanelState,
+    savePanelState,
+    getPointerPosition,
+    calculateDragPosition,
+    calculateResize,
+    getResizeCursor,
+    getPinnedResizeHandle,
+    constrainSize,
+    constrainPosition,
+    constrainPinnedWidth,
+    constrainPinnedHeight,
+    detectEdgeSnap,
+    getPinnedPositionStyles,
+    getDetachedPositionStyles,
+    getInitialDetachedPosition,
+    isHorizontalEdge,
+    // Pinned drag-to-detach utilities
+    calculateDetachDistance,
+    calculatePullOffset,
+    calculateDetachedPositionFromPinned,
+    getPinnedPullTransform,
+  } from '@classic-homes/data-panel-core';
+
+  import DataPanelHeader from './DataPanelHeader.svelte';
+  import DataPanelContent from './DataPanelContent.svelte';
+  import DataPanelFooter from './DataPanelFooter.svelte';
+  import DataPanelTab from './DataPanelTab.svelte';
+
+  interface Props {
+    /** Panel visibility */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Panel mode - pinned to edge or detached floating */
+    mode?: PanelMode;
+    /** Callback when mode changes */
+    onModeChange?: (mode: PanelMode) => void;
+    /** Panel variant - 'full' for traditional sidebar, 'card' for mobile bottom sheet */
+    variant?: PanelVariant;
+    /** Callback when variant changes */
+    onVariantChange?: (variant: PanelVariant) => void;
+    /** Edge to pin panel to (when mode is 'pinned') */
+    edge?: PanelEdge;
+    /** Callback when edge changes */
+    onEdgeChange?: (edge: PanelEdge) => void;
+    /** Whether panel is expanded or collapsed */
+    expanded?: boolean;
+    /** Callback when expanded state changes */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Panel title */
+    title?: string;
+    /** Panel subtitle */
+    subtitle?: string;
+    /** Content inside the panel */
+    children: Snippet;
+    /** Footer action buttons */
+    actions?: DataPanelAction[];
+    /** Size constraints */
+    constraints?: PanelConstraints;
+    /** Card mode configuration */
+    cardConfig?: CardConfig;
+    /** Disable close button */
+    disableClose?: boolean;
+    /** Disable resize functionality */
+    disableResize?: boolean;
+    /** Disable drag functionality (detached mode) */
+    disableDrag?: boolean;
+    /** Disable mode switching */
+    disableModeSwitch?: boolean;
+    /** localStorage key for state persistence */
+    persistKey?: string;
+    /** Distance in pixels for edge snap detection */
+    snapThreshold?: number;
+    /** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
+    detachThreshold?: number;
+    /** Custom header content (replaces title/subtitle) */
+    header?: Snippet;
+    /** Custom header actions */
+    headerActions?: Snippet;
+    /** Custom footer content */
+    footer?: Snippet;
+    /** Custom footer actions */
+    footerActions?: Snippet;
+    /** Additional class */
+    class?: string;
+  }
+
+  let {
+    open = $bindable(true),
+    onOpenChange,
+    mode: propMode,
+    onModeChange,
+    variant: propVariant,
+    onVariantChange,
+    edge: propEdge,
+    onEdgeChange,
+    expanded: propExpanded,
+    onExpandedChange,
+    title,
+    subtitle,
+    children,
+    actions = [],
+    constraints = {},
+    cardConfig = {},
+    disableClose = false,
+    disableResize = false,
+    disableDrag = false,
+    disableModeSwitch = false,
+    persistKey,
+    snapThreshold = 20,
+    detachThreshold = 40,
+    header,
+    headerActions,
+    footer,
+    footerActions,
+    class: className,
+  }: Props = $props();
+
+  // Resolve constraints and card config (use $derived to react to prop changes)
+  const resolvedConstraints = $derived({ ...DEFAULT_CONSTRAINTS, ...constraints });
+  const resolvedCardConfig = $derived({ ...DEFAULT_CARD_CONFIG, ...cardConfig });
+
+  // Internal state - initialized from props or persistence
+  let internalMode = $state<PanelMode>(DEFAULT_PANEL_STATE.mode);
+  let internalVariant = $state<PanelVariant>(DEFAULT_PANEL_STATE.variant);
+  let internalEdge = $state<PanelEdge>(DEFAULT_PANEL_STATE.edge);
+  let internalExpanded = $state<boolean>(DEFAULT_PANEL_STATE.isExpanded);
+  let detachedPosition = $state<Position>(DEFAULT_PANEL_STATE.detachedPosition);
+  let detachedSize = $state<Size>(DEFAULT_PANEL_STATE.detachedSize);
+  let pinnedSize = $state<number>(DEFAULT_PANEL_STATE.pinnedSize);
+
+  // Card position state (horizontal position for card mode)
+  let cardHorizontalPosition = $state<number>(0);
+  let cardExpandedHeight = $state<number>(0);
+  // Card width state (for desktop width resizing)
+  let cardWidth = $state<number | null>(null); // null means use default calculated width
+
+  // Drag/resize state
+  let isDragging = $state(false);
+  let isResizing = $state(false);
+  let isCardVerticalDragging = $state(false);
+  let isCardHorizontalDragging = $state(false);
+  let dragStart = $state<Position>({ x: 0, y: 0 });
+  let dragPanelStart = $state<Position>({ x: 0, y: 0 });
+  let resizeHandle = $state<ResizeHandle | null>(null);
+  let resizeStart = $state<Position>({ x: 0, y: 0 });
+  let resizePanelStart = $state<Position>({ x: 0, y: 0 });
+  let resizeSizeStart = $state<Size>({ width: 0, height: 0 });
+
+  // Card drag state
+  let cardDragStartY = $state(0);
+  let cardDragStartX = $state(0);
+  let cardDragStartTime = $state(0);
+  let cardDragCurrentHeight = $state(CARD_HEADER_HEIGHT);
+  let cardDragStartExpanded = $state(false);
+  let cardDragStartHorizontalPosition = $state(0);
+  // Flag to indicate we're animating after a drag (keeps using cardDragCurrentHeight for height)
+  let isCardHeightTransitioning = $state(false);
+
+  // Card width resize state
+  let isCardWidthResizing = $state(false);
+  let cardWidthResizeHandle = $state<'left' | 'right' | null>(null);
+  let cardWidthResizeStartX = $state(0);
+  let cardWidthResizeStartWidth = $state(0);
+  let cardWidthResizeStartLeft = $state(0);
+
+  // Snap preview state
+  let snapPreview = $state<PanelEdge | null>(null);
+
+  // Pinned drag-to-detach state
+  let isPinnedDragging = $state(false);
+  let pullOffset = $state(0);
+  let pinnedDragStartPosition = $state<Position>({ x: 0, y: 0 });
+  let pinnedDragHasDetached = $state(false);
+
+  // Panel element ref
+  let panelRef = $state<HTMLDivElement | null>(null);
+
+  // Viewport dimensions
+  let viewportWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 1024);
+  let viewportHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 768);
+
+  // Detect mobile
+  let isMobile = $derived(viewportWidth < 640);
+
+  // Derived state - use props if provided, otherwise internal state
+  const mode = $derived(propMode ?? internalMode);
+  const variant = $derived(propVariant ?? internalVariant);
+  const edge = $derived(propEdge ?? internalEdge);
+  const isExpanded = $derived(propExpanded ?? internalExpanded);
+
+  // Save timeout for debounced persistence
+  let saveTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  function debouncedSave() {
+    if (!persistKey) return;
+
+    if (saveTimeout) {
+      clearTimeout(saveTimeout);
+    }
+
+    saveTimeout = setTimeout(() => {
+      savePanelState(persistKey, {
+        mode: internalMode,
+        variant: internalVariant,
+        edge: internalEdge,
+        isExpanded: internalExpanded,
+        detachedPosition,
+        detachedSize,
+        pinnedSize,
+        cardSnapIndex: 0, // Legacy field
+      });
+      saveTimeout = null;
+    }, 300);
+  }
+
+  // Initialize from persistence on mount
+  onMount(() => {
+    // Update viewport dimensions
+    viewportWidth = window.innerWidth;
+    viewportHeight = window.innerHeight;
+
+    // Initialize card expanded height
+    cardExpandedHeight = viewportHeight * CARD_EXPANDED_RATIO;
+
+    // Listen for resize
+    const handleResize = () => {
+      viewportWidth = window.innerWidth;
+      viewportHeight = window.innerHeight;
+      cardExpandedHeight = viewportHeight * CARD_EXPANDED_RATIO;
+    };
+    window.addEventListener('resize', handleResize);
+
+    if (persistKey) {
+      const persisted = loadPanelState(persistKey);
+      if (persisted) {
+        if (propMode === undefined && persisted.mode) internalMode = persisted.mode;
+        if (propVariant === undefined && persisted.variant) internalVariant = persisted.variant;
+        if (propEdge === undefined && persisted.edge) internalEdge = persisted.edge;
+        if (propExpanded === undefined && persisted.isExpanded !== undefined)
+          internalExpanded = persisted.isExpanded;
+        if (persisted.detachedPosition) detachedPosition = persisted.detachedPosition;
+        if (persisted.detachedSize) detachedSize = persisted.detachedSize;
+        if (persisted.pinnedSize) pinnedSize = persisted.pinnedSize;
+      }
+    }
+
+    // Center detached panel on first show if at default position
+    if (mode === 'detached') {
+      if (
+        detachedPosition.x === DEFAULT_PANEL_STATE.detachedPosition.x &&
+        detachedPosition.y === DEFAULT_PANEL_STATE.detachedPosition.y
+      ) {
+        detachedPosition = getInitialDetachedPosition(
+          detachedSize,
+          window.innerWidth,
+          window.innerHeight
+        );
+      }
+    }
+
+    // Handle escape key to close
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !disableClose) {
+        handleClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  });
+
+  // State update handlers
+  function handleModeChange(newMode: PanelMode) {
+    if (propMode === undefined) {
+      internalMode = newMode;
+      debouncedSave();
+    }
+    onModeChange?.(newMode);
+  }
+
+  function handleVariantChange(newVariant: PanelVariant) {
+    if (propVariant === undefined) {
+      internalVariant = newVariant;
+      debouncedSave();
+    }
+    onVariantChange?.(newVariant);
+  }
+
+  function handleEdgeChange(newEdge: PanelEdge) {
+    if (propEdge === undefined) {
+      internalEdge = newEdge;
+      debouncedSave();
+    }
+    onEdgeChange?.(newEdge);
+  }
+
+  function handleExpandedChange(newExpanded: boolean) {
+    if (propExpanded === undefined) {
+      internalExpanded = newExpanded;
+      debouncedSave();
+    }
+    onExpandedChange?.(newExpanded);
+  }
+
+  function handleClose() {
+    open = false;
+    onOpenChange?.(false);
+  }
+
+  function handleTabClick() {
+    handleExpandedChange(true);
+  }
+
+  function handleToggleExpand() {
+    handleExpandedChange(!isExpanded);
+  }
+
+  // Drag handlers for detached mode
+  function handleDragStart(e: PointerEvent) {
+    if (disableDrag) return;
+
+    // Only drag from header
+    const target = e.target as HTMLElement;
+    if (!target.closest('[data-panel-header]')) return;
+
+    const pos = getPointerPosition(e);
+
+    if (mode === 'detached') {
+      // Standard detached drag
+      isDragging = true;
+      dragStart = pos;
+      dragPanelStart = { ...detachedPosition };
+      document.body.style.cursor = 'grabbing';
+      document.body.style.userSelect = 'none';
+    } else if (mode === 'pinned' && variant === 'full' && detachThreshold > 0) {
+      // Start pinned drag-to-detach
+      isPinnedDragging = true;
+      pinnedDragStartPosition = pos;
+      pinnedDragHasDetached = false;
+      pullOffset = 0;
+      document.body.style.cursor = 'grab';
+      document.body.style.userSelect = 'none';
+    }
+  }
+
+  function handleDragMove(e: PointerEvent) {
+    if (!isDragging) return;
+
+    const currentPos = getPointerPosition(e);
+    const newPosition = calculateDragPosition(
+      {
+        isDragging: true,
+        startPosition: dragStart,
+        startPanelPosition: dragPanelStart,
+        currentPosition: currentPos,
+      },
+      currentPos
+    );
+
+    // Check for edge snap
+    const snap = detectEdgeSnap(
+      newPosition,
+      detachedSize,
+      window.innerWidth,
+      window.innerHeight,
+      snapThreshold
+    );
+
+    snapPreview = snap.shouldSnap ? snap.edge : null;
+
+    // Constrain position to viewport
+    detachedPosition = constrainPosition(
+      newPosition,
+      detachedSize,
+      window.innerWidth,
+      window.innerHeight
+    );
+  }
+
+  function handleDragEnd() {
+    if (!isDragging) return;
+
+    isDragging = false;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+
+    // Apply snap if active
+    if (snapPreview) {
+      handleModeChange('pinned');
+      handleEdgeChange(snapPreview);
+      snapPreview = null;
+    } else {
+      debouncedSave();
+    }
+  }
+
+  // Pinned drag-to-detach handlers
+  function handlePinnedDragMove(e: PointerEvent) {
+    if (!isPinnedDragging) return;
+
+    const currentPos = getPointerPosition(e);
+    const distance = calculateDetachDistance(pinnedDragStartPosition, currentPos, edge);
+
+    if (distance >= detachThreshold && !pinnedDragHasDetached) {
+      // Threshold exceeded - detach the panel
+      pinnedDragHasDetached = true;
+      isPinnedDragging = false;
+      pullOffset = 0;
+
+      // Calculate where to position the detached panel
+      const newPosition = calculateDetachedPositionFromPinned(
+        currentPos,
+        pinnedSize,
+        detachedSize,
+        edge,
+        window.innerWidth,
+        window.innerHeight
+      );
+
+      // Switch to detached mode and start regular drag
+      detachedPosition = newPosition;
+      handleModeChange('detached');
+
+      // Immediately start detached dragging from current position
+      isDragging = true;
+      dragStart = currentPos;
+      dragPanelStart = newPosition;
+      document.body.style.cursor = 'grabbing';
+    } else if (!pinnedDragHasDetached) {
+      // Still within threshold - show pull effect
+      pullOffset = calculatePullOffset(distance, detachThreshold);
+    }
+  }
+
+  function handlePinnedDragEnd() {
+    if (!isPinnedDragging) return;
+
+    isPinnedDragging = false;
+    pullOffset = 0;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  }
+
+  // Card mode handlers
+  function handleCardHeaderPointerDown(e: PointerEvent) {
+    if (variant !== 'card') return;
+
+    const target = e.target as HTMLElement;
+
+    // Check for drag handle FIRST (before button check, since drag handle is a button)
+    const isDragHandle = target.closest('[data-card-drag-handle]');
+
+    // Don't start drag if clicking on other buttons (not the drag handle)
+    if (!isDragHandle && target.closest('button')) return;
+
+    const pos = getPointerPosition(e);
+    cardDragStartY = pos.y;
+    cardDragStartX = pos.x;
+    cardDragStartTime = Date.now();
+    cardDragStartExpanded = isExpanded;
+    cardDragCurrentHeight = isExpanded ? cardExpandedHeight : CARD_HEADER_HEIGHT;
+    cardDragStartHorizontalPosition = cardHorizontalPosition;
+
+    // On mobile: vertical drag to expand/collapse
+    // On desktop: horizontal drag to reposition (via drag handle), click header to expand/collapse
+    if (isMobile) {
+      isCardVerticalDragging = true;
+    } else {
+      if (isDragHandle) {
+        isCardHorizontalDragging = true;
+      } else {
+        // Clicking elsewhere on header toggles expand
+        isCardVerticalDragging = true;
+      }
+    }
+
+    document.body.style.userSelect = 'none';
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  function handleCardPointerMove(e: PointerEvent) {
+    const currentPos = getPointerPosition(e);
+
+    if (isCardVerticalDragging) {
+      const deltaY = cardDragStartY - currentPos.y; // Positive when dragging up
+
+      // Both mobile and desktop: change height directly during drag
+      const startHeight = cardDragStartExpanded ? cardExpandedHeight : CARD_HEADER_HEIGHT;
+      cardDragCurrentHeight = Math.max(
+        CARD_HEADER_HEIGHT,
+        Math.min(viewportHeight * 0.95, startHeight + deltaY)
+      );
+    }
+
+    if (isCardHorizontalDragging && !isMobile) {
+      const deltaX = currentPos.x - cardDragStartX;
+      // Calculate card width and default offset (centered position)
+      const cardWidth = Math.min(
+        viewportWidth - resolvedCardConfig.horizontalMargin * 2,
+        resolvedCardConfig.maxWidth
+      );
+      const defaultLeftOffset = Math.max(
+        resolvedCardConfig.horizontalMargin,
+        (viewportWidth - cardWidth) / 2
+      );
+      // Calculate bounds: can move from left margin to right margin
+      const minOffset = -(defaultLeftOffset - resolvedCardConfig.horizontalMargin);
+      const maxOffset =
+        viewportWidth - cardWidth - defaultLeftOffset - resolvedCardConfig.horizontalMargin;
+      // Apply delta to starting position and clamp to bounds
+      const newPosition = cardDragStartHorizontalPosition + deltaX;
+      cardHorizontalPosition = Math.max(minOffset, Math.min(maxOffset, newPosition));
+    }
+  }
+
+  function handleCardPointerUp(e: PointerEvent) {
+    const endTime = Date.now();
+    const currentPos = getPointerPosition(e);
+    const deltaTime = endTime - cardDragStartTime;
+    const deltaY = cardDragStartY - currentPos.y;
+    const deltaX = currentPos.x - cardDragStartX;
+
+    document.body.style.userSelect = '';
+    (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+
+    if (isCardVerticalDragging) {
+      // Tap detection - toggle and exit early
+      if (deltaTime < 200 && Math.abs(deltaY) < 10) {
+        isCardVerticalDragging = false;
+        handleToggleExpand();
+        return;
+      }
+
+      // Determine final state based on velocity or position
+      const velocity = deltaY / deltaTime;
+      let newExpanded: boolean;
+
+      if (Math.abs(velocity) > 0.5) {
+        // Velocity-based: fast swipe snaps in direction of swipe
+        newExpanded = velocity > 0;
+      } else {
+        // Position-based: snap to whichever state the card is closer to
+        const midpoint = (CARD_HEADER_HEIGHT + cardExpandedHeight) / 2;
+        newExpanded = cardDragCurrentHeight > midpoint;
+      }
+
+      const targetHeight = newExpanded ? cardExpandedHeight : CARD_HEADER_HEIGHT;
+
+      // Step 1: Stop dragging (enables CSS transitions) but keep current height
+      isCardVerticalDragging = false;
+      isCardHeightTransitioning = true;
+      handleExpandedChange(newExpanded);
+
+      // Step 2: Next frame, update height to trigger the animation
+      // This ensures transitions are enabled before the height changes
+      requestAnimationFrame(() => {
+        cardDragCurrentHeight = targetHeight;
+      });
+    }
+
+    if (isCardHorizontalDragging) {
+      isCardHorizontalDragging = false;
+      debouncedSave();
+    }
+  }
+
+  // Resize handlers
+  function handleResizeStart(e: PointerEvent, handle: ResizeHandle) {
+    if (disableResize) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    isResizing = true;
+    resizeHandle = handle;
+    const pos = getPointerPosition(e);
+    resizeStart = pos;
+    resizePanelStart = { ...detachedPosition };
+    resizeSizeStart =
+      mode === 'detached' ? { ...detachedSize } : { width: pinnedSize, height: pinnedSize };
+
+    document.body.style.cursor = getResizeCursor(handle);
+    document.body.style.userSelect = 'none';
+  }
+
+  function handleResizeMove(e: PointerEvent) {
+    if (!isResizing || !resizeHandle) return;
+
+    const currentPos = getPointerPosition(e);
+
+    if (mode === 'detached') {
+      const result = calculateResize(
+        {
+          isResizing: true,
+          handle: resizeHandle,
+          startPosition: resizeStart,
+          startSize: resizeSizeStart,
+          startPanelPosition: resizePanelStart,
+        },
+        currentPos
+      );
+
+      // Constrain size and position
+      const constrainedSize = constrainSize(result.size, resolvedConstraints);
+      const constrainedPosition = constrainPosition(
+        result.position,
+        constrainedSize,
+        window.innerWidth,
+        window.innerHeight
+      );
+
+      detachedSize = constrainedSize;
+      detachedPosition = constrainedPosition;
+    } else {
+      // Pinned mode - resize perpendicular to edge
+      const delta = isHorizontalEdge(edge)
+        ? currentPos.x - resizeStart.x
+        : currentPos.y - resizeStart.y;
+
+      const direction = edge === 'left' || edge === 'top' ? 1 : -1;
+      const newSize = resizeSizeStart.width + delta * direction;
+
+      if (isHorizontalEdge(edge)) {
+        pinnedSize = constrainPinnedWidth(newSize, resolvedConstraints, window.innerWidth);
+      } else {
+        pinnedSize = constrainPinnedHeight(newSize, resolvedConstraints, window.innerHeight);
+      }
+    }
+  }
+
+  function handleResizeEnd() {
+    if (!isResizing) return;
+
+    isResizing = false;
+    resizeHandle = null;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    debouncedSave();
+  }
+
+  // Card resize (top edge only when expanded)
+  function handleCardResizeStart(e: PointerEvent) {
+    if (variant !== 'card' || !isExpanded || disableResize) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    isResizing = true;
+    const pos = getPointerPosition(e);
+    resizeStart = pos;
+    resizeSizeStart = { width: 0, height: cardExpandedHeight };
+
+    document.body.style.cursor = 'ns-resize';
+    document.body.style.userSelect = 'none';
+  }
+
+  function handleCardResizeMove(e: PointerEvent) {
+    if (!isResizing || variant !== 'card') return;
+
+    const currentPos = getPointerPosition(e);
+    const deltaY = resizeStart.y - currentPos.y;
+    const newHeight = Math.max(
+      CARD_HEADER_HEIGHT * 2,
+      Math.min(viewportHeight * 0.95, resizeSizeStart.height + deltaY)
+    );
+    cardExpandedHeight = newHeight;
+  }
+
+  // Card width resize handlers (desktop only)
+  function handleCardWidthResizeStart(e: PointerEvent, handle: 'left' | 'right') {
+    if (variant !== 'card' || !isExpanded || disableResize || isMobile) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    isCardWidthResizing = true;
+    cardWidthResizeHandle = handle;
+    const pos = getPointerPosition(e);
+    cardWidthResizeStartX = pos.x;
+
+    // Calculate current width
+    const defaultCardWidth = Math.min(
+      viewportWidth - resolvedCardConfig.horizontalMargin * 2,
+      resolvedCardConfig.maxWidth
+    );
+    const currentWidth = cardWidth ?? defaultCardWidth;
+    cardWidthResizeStartWidth = currentWidth;
+
+    // Calculate current left position
+    const defaultLeftOffset = Math.max(
+      resolvedCardConfig.horizontalMargin,
+      (viewportWidth - defaultCardWidth) / 2
+    );
+    cardWidthResizeStartLeft = defaultLeftOffset + cardHorizontalPosition;
+
+    document.body.style.cursor = 'ew-resize';
+    document.body.style.userSelect = 'none';
+  }
+
+  function handleCardWidthResizeMove(e: PointerEvent) {
+    if (!isCardWidthResizing || !cardWidthResizeHandle) return;
+
+    const currentPos = getPointerPosition(e);
+    const deltaX = currentPos.x - cardWidthResizeStartX;
+
+    if (cardWidthResizeHandle === 'right') {
+      // Right handle: only adjust width
+      const newWidth = Math.max(
+        CARD_MIN_WIDTH,
+        Math.min(
+          resolvedCardConfig.maxWidth,
+          viewportWidth - cardWidthResizeStartLeft - resolvedCardConfig.horizontalMargin,
+          cardWidthResizeStartWidth + deltaX
+        )
+      );
+      cardWidth = newWidth;
+    } else {
+      // Left handle: adjust both left position and width
+      const newLeft = cardWidthResizeStartLeft + deltaX;
+      const newWidth = cardWidthResizeStartWidth - deltaX;
+
+      // Constrain: left can't go below margin, width can't go below min or above max
+      if (newLeft >= resolvedCardConfig.horizontalMargin && newWidth >= CARD_MIN_WIDTH) {
+        const constrainedWidth = Math.min(newWidth, resolvedCardConfig.maxWidth);
+        cardWidth = constrainedWidth;
+
+        // Calculate new horizontal position offset from default centered position
+        const defaultCardWidth = Math.min(
+          viewportWidth - resolvedCardConfig.horizontalMargin * 2,
+          resolvedCardConfig.maxWidth
+        );
+        const defaultLeftOffset = Math.max(
+          resolvedCardConfig.horizontalMargin,
+          (viewportWidth - defaultCardWidth) / 2
+        );
+        cardHorizontalPosition = newLeft - defaultLeftOffset;
+      }
+    }
+  }
+
+  function handleCardWidthResizeEnd() {
+    if (!isCardWidthResizing) return;
+
+    isCardWidthResizing = false;
+    cardWidthResizeHandle = null;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    debouncedSave();
+  }
+
+  // Global event listeners
+  function handlePointerMove(e: PointerEvent) {
+    if (isDragging) handleDragMove(e);
+    if (isPinnedDragging) handlePinnedDragMove(e);
+    if (isResizing && variant !== 'card') handleResizeMove(e);
+    if (isResizing && variant === 'card') handleCardResizeMove(e);
+    if (isCardVerticalDragging || isCardHorizontalDragging) handleCardPointerMove(e);
+    if (isCardWidthResizing) handleCardWidthResizeMove(e);
+  }
+
+  function handlePointerUp(e: PointerEvent) {
+    if (isDragging) handleDragEnd();
+    if (isPinnedDragging) handlePinnedDragEnd();
+    if (isResizing) handleResizeEnd();
+    if (isCardVerticalDragging || isCardHorizontalDragging) handleCardPointerUp(e);
+    if (isCardWidthResizing) handleCardWidthResizeEnd();
+  }
+
+  // Add/remove global listeners
+  $effect(() => {
+    if (
+      isDragging ||
+      isPinnedDragging ||
+      isResizing ||
+      isCardVerticalDragging ||
+      isCardHorizontalDragging ||
+      isCardWidthResizing
+    ) {
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp);
+      return () => {
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+      };
+    }
+  });
+
+  // Reset card position and width when switching to mobile
+  $effect(() => {
+    if (isMobile && variant === 'card') {
+      // Reset to centered, full-width on mobile
+      cardHorizontalPosition = 0;
+      cardWidth = null;
+    }
+  });
+
+  // Clear height transition flag after CSS transition completes
+  // This returns control to the normal isExpanded-based height calculation
+  $effect(() => {
+    if (isCardHeightTransitioning) {
+      const timeout = setTimeout(() => {
+        isCardHeightTransitioning = false;
+      }, 350); // Slightly longer than CSS transition (300ms) to ensure completion
+      return () => clearTimeout(timeout);
+    }
+  });
+
+  // Calculate panel styles
+  const panelStyles = $derived(() => {
+    if (variant === 'card') {
+      // Card mode - bottom sheet style
+      const defaultCardWidth = Math.min(
+        viewportWidth - resolvedCardConfig.horizontalMargin * 2,
+        resolvedCardConfig.maxWidth
+      );
+      // Use custom cardWidth if set, otherwise use default
+      const actualCardWidth = cardWidth ?? defaultCardWidth;
+      const defaultLeftOffset = Math.max(
+        resolvedCardConfig.horizontalMargin,
+        (viewportWidth - defaultCardWidth) / 2
+      );
+
+      // Height based on expanded state or drag
+      let height: number;
+      if (isCardVerticalDragging || isCardHeightTransitioning) {
+        // During drag or animated transition, use cardDragCurrentHeight
+        height = cardDragCurrentHeight;
+      } else {
+        height = isExpanded ? cardExpandedHeight : CARD_HEADER_HEIGHT;
+      }
+
+      return {
+        bottom: '0',
+        left: `${defaultLeftOffset + cardHorizontalPosition}px`,
+        width: `${actualCardWidth}px`,
+        height: `${height}px`,
+        maxHeight: `${viewportHeight * 0.95}px`,
+        borderRadius: `${resolvedCardConfig.borderRadius}px ${resolvedCardConfig.borderRadius}px 0 0`,
+      };
+    }
+    if (mode === 'pinned') {
+      const baseStyles = getPinnedPositionStyles(edge, pinnedSize);
+      // Add pull transform when dragging from pinned
+      if (pullOffset > 0) {
+        const transform = getPinnedPullTransform(pullOffset, edge);
+        return { ...baseStyles, transform };
+      }
+      return baseStyles;
+    }
+    return getDetachedPositionStyles(detachedPosition, detachedSize);
+  });
+
+  // Panel position classes for full pinned mode
+  const pinnedClasses = $derived(
+    mode === 'pinned' && variant === 'full'
+      ? {
+          left: 'left-0 top-0 bottom-0 border-r',
+          right: 'right-0 top-0 bottom-0 border-l',
+          top: 'top-0 left-0 right-0 border-b',
+          bottom: 'bottom-0 left-0 right-0 border-t',
+        }[edge]
+      : ''
+  );
+
+  // Animation classes
+  const animationClass = $derived(() => {
+    if (variant === 'card') {
+      return 'animate-panel-slide-in-bottom';
+    }
+    if (mode === 'pinned') {
+      return {
+        left: 'animate-slide-right',
+        right: 'animate-slide-left',
+        top: 'animate-slide-down',
+        bottom: 'animate-slide-up',
+      }[edge];
+    }
+    return 'animate-scale-in';
+  });
+
+  // Whether to show content (collapsed card only shows header)
+  const showContent = $derived(variant !== 'card' || isExpanded || isCardVerticalDragging);
+</script>
+
+{#if open}
+  {#if variant === 'full' && !isExpanded && mode === 'pinned'}
+    <!-- Collapsed tab (full variant only) -->
+    <DataPanelTab {title} {edge} onclick={handleTabClick} />
+  {:else}
+    <!-- Snap preview indicator (detached mode only) -->
+    {#if snapPreview}
+      <div
+        class={cn(
+          'fixed z-40 bg-primary/20 border-2 border-primary border-dashed transition-all',
+          snapPreview === 'left' && 'left-0 top-0 bottom-0 w-80',
+          snapPreview === 'right' && 'right-0 top-0 bottom-0 w-80',
+          snapPreview === 'top' && 'top-0 left-0 right-0 h-64',
+          snapPreview === 'bottom' && 'bottom-0 left-0 right-0 h-64'
+        )}
+      ></div>
+    {/if}
+
+    <!-- Overlay for expanded card on mobile -->
+    {#if variant === 'card' && isExpanded && isMobile}
+      <div
+        class="fixed inset-0 z-40 bg-black/50 transition-opacity"
+        onclick={handleToggleExpand}
+        onkeydown={(e) => e.key === 'Enter' && handleToggleExpand()}
+        role="button"
+        tabindex="-1"
+        aria-label="Close panel"
+      ></div>
+    {/if}
+
+    <!-- Panel -->
+    <div
+      bind:this={panelRef}
+      class={cn(
+        'fixed z-50 flex flex-col bg-background border border-border shadow-lg overflow-hidden',
+        variant === 'full' && mode === 'pinned' && pinnedClasses,
+        variant === 'full' && mode === 'detached' && 'rounded-lg',
+        variant === 'card' && 'rounded-t-lg border-b-0',
+        isPinnedDragging && pullOffset > 0 && 'shadow-2xl',
+        !isDragging &&
+          !isPinnedDragging &&
+          !isCardHorizontalDragging &&
+          !isCardVerticalDragging &&
+          !isResizing &&
+          !isCardWidthResizing &&
+          'transition-[height,left,width,transform] duration-300 ease-out',
+        animationClass(),
+        className
+      )}
+      style={Object.entries(panelStyles())
+        .map(([k, v]) => `${k}:${v}`)
+        .join(';')}
+      role={mode === 'detached' || variant === 'card' ? 'dialog' : 'complementary'}
+      aria-modal={mode === 'detached' || (variant === 'card' && isExpanded) ? 'true' : undefined}
+      aria-labelledby={title ? 'data-panel-title' : undefined}
+      aria-expanded={variant === 'card' ? isExpanded : undefined}
+      tabindex="-1"
+      onpointerdown={variant === 'full' &&
+      (mode === 'detached' || (mode === 'pinned' && detachThreshold > 0))
+        ? handleDragStart
+        : undefined}
+    >
+      <!-- Header -->
+      <div
+        data-panel-header
+        class={cn(
+          'relative flex items-center justify-between gap-2 border-b border-border bg-muted/30 px-4',
+          variant === 'full' && 'py-3',
+          variant === 'card' && 'pt-5 pb-3',
+          variant === 'full' &&
+            !disableDrag &&
+            (mode === 'detached' || (mode === 'pinned' && detachThreshold > 0)) &&
+            'cursor-grab',
+          variant === 'card' && 'cursor-pointer'
+        )}
+        onpointerdown={variant === 'card' ? handleCardHeaderPointerDown : undefined}
+      >
+        <!-- Card drag handle / puller (overlays header) -->
+        {#if variant === 'card' && resolvedCardConfig.showDragHandle}
+          <div
+            class="absolute top-1.5 left-1/2 -translate-x-1/2 w-10 h-1.5 rounded-full bg-muted-foreground/30 cursor-pointer touch-none"
+            onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleToggleExpand()}
+            onpointerdown={handleCardHeaderPointerDown}
+            role="button"
+            tabindex="0"
+            aria-label={isExpanded ? 'Collapse panel' : 'Expand panel'}
+            aria-expanded={isExpanded}
+          ></div>
+        {/if}
+        {#if variant === 'card'}
+          <div
+            class="flex-1 min-w-0"
+            onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleToggleExpand()}
+            role="button"
+            tabindex="0"
+          >
+            {#if header}
+              {@render header()}
+            {:else}
+              {#if subtitle}
+                <p class="text-sm text-muted-foreground truncate">{subtitle}</p>
+              {/if}
+              {#if title}
+                <h3 id="data-panel-title" class="text-lg font-semibold truncate">{title}</h3>
+              {/if}
+            {/if}
+          </div>
+        {:else}
+          <div class="flex-1 min-w-0">
+            {#if header}
+              {@render header()}
+            {:else}
+              {#if subtitle}
+                <p class="text-sm text-muted-foreground truncate">{subtitle}</p>
+              {/if}
+              {#if title}
+                <h3 id="data-panel-title" class="text-lg font-semibold truncate">{title}</h3>
+              {/if}
+            {/if}
+          </div>
+        {/if}
+
+        <div class="flex items-center gap-1">
+          {#if headerActions}
+            {@render headerActions()}
+          {/if}
+
+          <!-- Horizontal drag handle (desktop card only) -->
+          {#if variant === 'card' && !isMobile}
+            <button
+              data-card-drag-handle
+              type="button"
+              class="p-1.5 rounded hover:bg-muted cursor-move touch-none"
+              aria-label="Drag to reposition panel"
+              title="Drag to move"
+              onpointerdown={handleCardHeaderPointerDown}
+            >
+              <svg
+                class="w-4 h-4 text-muted-foreground"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M4 8h16M4 16h16"
+                />
+              </svg>
+            </button>
+          {/if}
+
+          <!-- Expand/collapse toggle -->
+          {#if variant === 'card' || (variant === 'full' && mode === 'pinned')}
+            <button
+              type="button"
+              class="p-1.5 rounded hover:bg-muted"
+              onclick={handleToggleExpand}
+              aria-expanded={isExpanded}
+              aria-label={isExpanded ? 'Collapse panel' : 'Expand panel'}
+              title={isExpanded ? 'Collapse' : 'Expand'}
+            >
+              {#if isExpanded}
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              {:else}
+                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 15l7-7 7 7"
+                  />
+                </svg>
+              {/if}
+            </button>
+          {/if}
+
+          <!-- Mode menu (full variant only) -->
+          {#if variant === 'full' && !disableModeSwitch}
+            <DataPanelHeader
+              {mode}
+              {edge}
+              isExpanded={true}
+              disableModeSwitch={false}
+              onModeChange={handleModeChange}
+              onEdgeChange={handleEdgeChange}
+              showModeMenuOnly
+            />
+          {/if}
+
+          <!-- Close button -->
+          {#if !disableClose}
+            <button
+              type="button"
+              class="p-1.5 rounded hover:bg-muted"
+              onclick={handleClose}
+              aria-label="Close panel"
+              title="Close"
+            >
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          {/if}
+        </div>
+      </div>
+
+      <!-- Content (hidden when card is collapsed) -->
+      {#if showContent}
+        <DataPanelContent>
+          {@render children()}
+        </DataPanelContent>
+
+        <!-- Footer -->
+        <DataPanelFooter {actions} {footer} {footerActions} />
+      {/if}
+
+      <!-- Resize handles (full variant only) -->
+      {#if variant === 'full' && !disableResize}
+        {#if mode === 'detached'}
+          <!-- Edge handles -->
+          <div
+            class="resize-handle resize-handle--horizontal resize-handle--top"
+            onpointerdown={(e) => handleResizeStart(e, 'top')}
+          ></div>
+          <div
+            class="resize-handle resize-handle--horizontal resize-handle--bottom"
+            onpointerdown={(e) => handleResizeStart(e, 'bottom')}
+          ></div>
+          <div
+            class="resize-handle resize-handle--vertical resize-handle--left"
+            onpointerdown={(e) => handleResizeStart(e, 'left')}
+          ></div>
+          <div
+            class="resize-handle resize-handle--vertical resize-handle--right"
+            onpointerdown={(e) => handleResizeStart(e, 'right')}
+          ></div>
+          <!-- Corner handles (6px radius = 8px panel radius minus 2px offset) -->
+          <div
+            class="resize-handle resize-handle--corner resize-handle--top-left"
+            onpointerdown={(e) => handleResizeStart(e, 'top-left')}
+          ></div>
+          <div
+            class="resize-handle resize-handle--corner resize-handle--top-right"
+            onpointerdown={(e) => handleResizeStart(e, 'top-right')}
+          ></div>
+          <div
+            class="resize-handle resize-handle--corner resize-handle--bottom-left"
+            onpointerdown={(e) => handleResizeStart(e, 'bottom-left')}
+          ></div>
+          <div
+            class="resize-handle resize-handle--corner resize-handle--bottom-right"
+            onpointerdown={(e) => handleResizeStart(e, 'bottom-right')}
+          ></div>
+        {:else}
+          <!-- Single resize handle for pinned mode -->
+          {@const pinnedHandle = getPinnedResizeHandle(edge)}
+          <div
+            class={cn(
+              'resize-handle',
+              edge === 'left' && 'resize-handle--vertical resize-handle--right',
+              edge === 'right' && 'resize-handle--vertical resize-handle--left',
+              edge === 'top' && 'resize-handle--horizontal resize-handle--bottom',
+              edge === 'bottom' && 'resize-handle--horizontal resize-handle--top'
+            )}
+            onpointerdown={(e) => handleResizeStart(e, pinnedHandle)}
+          ></div>
+        {/if}
+      {/if}
+
+      <!-- Card resize handles (top edge for height, left/right for width - desktop only when expanded) -->
+      {#if variant === 'card' && isExpanded && !disableResize && !isMobile}
+        <!-- Top edge for height resize -->
+        <div
+          class="resize-handle resize-handle--horizontal resize-handle--top"
+          onpointerdown={handleCardResizeStart}
+        ></div>
+        <!-- Left edge for width resize -->
+        <div
+          class="resize-handle resize-handle--vertical resize-handle--left resize-handle--card-edge"
+          onpointerdown={(e) => handleCardWidthResizeStart(e, 'left')}
+        ></div>
+        <!-- Right edge for width resize -->
+        <div
+          class="resize-handle resize-handle--vertical resize-handle--right resize-handle--card-edge"
+          onpointerdown={(e) => handleCardWidthResizeStart(e, 'right')}
+        ></div>
+      {/if}
+    </div>
+  {/if}
+{/if}
+
+<style>
+  /* Base resize handle - invisible hit area */
+  .resize-handle {
+    position: absolute;
+    z-index: 10;
+    touch-action: none;
+    background: transparent;
+  }
+
+  /* Edge handles - horizontal (top/bottom) */
+  .resize-handle--horizontal {
+    left: 14px;
+    right: 14px;
+    height: 8px;
+    cursor: ns-resize;
+  }
+
+  .resize-handle--horizontal::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: transparent;
+    transition: background-color 0.15s ease;
+  }
+
+  .resize-handle--top {
+    top: 2px;
+  }
+
+  .resize-handle--top::after {
+    top: 0;
+  }
+
+  .resize-handle--bottom {
+    bottom: 2px;
+  }
+
+  .resize-handle--bottom::after {
+    bottom: 0;
+  }
+
+  /* Edge handles - vertical (left/right) */
+  .resize-handle--vertical {
+    top: 14px;
+    bottom: 14px;
+    width: 8px;
+    cursor: ew-resize;
+  }
+
+  .resize-handle--vertical::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: transparent;
+    transition: background-color 0.15s ease;
+  }
+
+  .resize-handle--left {
+    left: 2px;
+  }
+
+  .resize-handle--left::after {
+    left: 0;
+  }
+
+  .resize-handle--right {
+    right: 2px;
+  }
+
+  .resize-handle--right::after {
+    right: 0;
+  }
+
+  /* Hover state for edge handles */
+  .resize-handle--horizontal:hover::after,
+  .resize-handle--vertical:hover::after {
+    background: hsl(var(--border));
+  }
+
+  /* Card edge handles - extend to bottom edge (no bottom corners) */
+  .resize-handle--card-edge {
+    top: 14px;
+    bottom: 2px;
+  }
+
+  /* Corner handles - quarter-circle arcs matching panel border-radius */
+  .resize-handle--corner {
+    width: 20px;
+    height: 20px;
+    background: transparent;
+  }
+
+  .resize-handle--corner::after {
+    content: '';
+    position: absolute;
+    /* Element size slightly larger than radius for good hover target */
+    width: 10px;
+    height: 10px;
+    /* !important needed to override Tailwind preflight reset (border-width: 0) */
+    border: 2px solid transparent !important;
+    transition:
+      border-top-color 0.15s ease,
+      border-right-color 0.15s ease,
+      border-bottom-color 0.15s ease,
+      border-left-color 0.15s ease;
+  }
+
+  /* Corner positions */
+  .resize-handle--top-left {
+    top: 2px;
+    left: 2px;
+    cursor: nwse-resize;
+  }
+
+  .resize-handle--top-left::after {
+    top: 0;
+    left: 0;
+    /* Match panel's 8px border-radius for smooth visual continuity */
+    border-top-left-radius: 8px;
+  }
+
+  .resize-handle--top-left:hover::after {
+    border-top-color: hsl(var(--border)) !important;
+    border-left-color: hsl(var(--border)) !important;
+  }
+
+  .resize-handle--top-right {
+    top: 2px;
+    right: 2px;
+    cursor: nesw-resize;
+  }
+
+  .resize-handle--top-right::after {
+    top: 0;
+    right: 0;
+    /* Match panel's 8px border-radius for smooth visual continuity */
+    border-top-right-radius: 8px;
+  }
+
+  .resize-handle--top-right:hover::after {
+    border-top-color: hsl(var(--border)) !important;
+    border-right-color: hsl(var(--border)) !important;
+  }
+
+  .resize-handle--bottom-left {
+    bottom: 2px;
+    left: 2px;
+    cursor: nesw-resize;
+  }
+
+  .resize-handle--bottom-left::after {
+    bottom: 0;
+    left: 0;
+    /* Match panel's 8px border-radius for smooth visual continuity */
+    border-bottom-left-radius: 8px;
+  }
+
+  .resize-handle--bottom-left:hover::after {
+    border-bottom-color: hsl(var(--border)) !important;
+    border-left-color: hsl(var(--border)) !important;
+  }
+
+  .resize-handle--bottom-right {
+    bottom: 2px;
+    right: 2px;
+    cursor: nwse-resize;
+  }
+
+  .resize-handle--bottom-right::after {
+    bottom: 0;
+    right: 0;
+    /* Match panel's 8px border-radius for smooth visual continuity */
+    border-bottom-right-radius: 8px;
+  }
+
+  .resize-handle--bottom-right:hover::after {
+    border-bottom-color: hsl(var(--border)) !important;
+    border-right-color: hsl(var(--border)) !important;
+  }
+</style>