@classic-homes/theme-svelte 1.0.0 → 1.1.1

package/dist/lib/components/DataPanel.svelte

@@ -29,6 +29,7 @@
     getPinnedResizeHandle,
     constrainSize,
     constrainPosition,
+    constrainResize,
     constrainPinnedWidth,
     constrainPinnedHeight,
     detectEdgeSnap,
@@ -47,6 +48,8 @@
   import DataPanelContent from './DataPanelContent.svelte';
   import DataPanelFooter from './DataPanelFooter.svelte';
   import DataPanelTab from './DataPanelTab.svelte';
+  import { useFocusTrap } from '../composables/useFocusTrap.svelte.js';
+  import { useEscapeKey } from '../composables/useEscapeKey.svelte.js';
 
   interface Props {
     /** Panel visibility */
@@ -150,6 +153,8 @@
   let detachedPosition = $state<Position>(DEFAULT_PANEL_STATE.detachedPosition);
   let detachedSize = $state<Size>(DEFAULT_PANEL_STATE.detachedSize);
   let pinnedSize = $state<number>(DEFAULT_PANEL_STATE.pinnedSize);
+  // Offset of the collapsed pinned tab along its edge
+  let internalTabOffset = $state<number>(DEFAULT_PANEL_STATE.tabOffset);
 
   // Card position state (horizontal position for card mode)
   let cardHorizontalPosition = $state<number>(0);
@@ -211,6 +216,18 @@
   const edge = $derived(propEdge ?? internalEdge);
   const isExpanded = $derived(propExpanded ?? internalExpanded);
 
+  // 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
+  // trap focus — gate the card branch on isMobile.
+  const isDialog = $derived(mode === 'detached' || (variant === 'card' && isExpanded && isMobile));
+
+  // Trap focus inside the panel while it acts as a dialog; return focus on close.
+  const { action: focusTrap } = useFocusTrap({ active: () => open && isDialog });
+
+  // Close on Escape (all modes, matching the previous behavior) unless disabled.
+  useEscapeKey(() => handleClose(), { enabled: () => open && !disableClose });
+
   // Save timeout for debounced persistence
   let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -233,6 +250,7 @@
         detachedSize,
         pinnedSize,
         cardSnapIndex: 0, // Legacy field
+        tabOffset: internalTabOffset,
       });
       saveTimeout = null;
     }, 300);
@@ -240,6 +258,13 @@
 
   onDestroy(() => {
     if (saveTimeout) clearTimeout(saveTimeout);
+    // If we unmount mid-drag/resize (e.g. Escape closes the panel), the *End
+    // handlers never run — reset the body styles they own so the page isn't
+    // left stuck at grabbing cursor / no user-select.
+    if (typeof document !== 'undefined') {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
   });
 
   // Initialize from persistence on mount
@@ -270,6 +295,7 @@
         if (persisted.detachedPosition) detachedPosition = persisted.detachedPosition;
         if (persisted.detachedSize) detachedSize = persisted.detachedSize;
         if (persisted.pinnedSize) pinnedSize = persisted.pinnedSize;
+        if (persisted.tabOffset !== undefined) internalTabOffset = persisted.tabOffset;
       }
     }
 
@@ -287,17 +313,10 @@
       }
     }
 
-    // Handle escape key to close
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !disableClose) {
-        handleClose();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
+    // Escape-to-close is handled by useEscapeKey; focus trapping by useFocusTrap.
 
     return () => {
       window.removeEventListener('resize', handleResize);
-      window.removeEventListener('keydown', handleKeyDown);
     };
   });
 
@@ -347,6 +366,18 @@
     handleExpandedChange(!isExpanded);
   }
 
+  // Header collapse button. A detached full panel collapses by re-pinning to its
+  // last edge (edge always holds the previous pin, or the default) and showing the
+  // collapsed tab. Pinned/card just toggle expanded.
+  function handleCollapseToggle() {
+    if (variant === 'full' && mode === 'detached') {
+      handleModeChange('pinned');
+      handleExpandedChange(false);
+    } else {
+      handleToggleExpand();
+    }
+  }
+
   // Drag handlers for detached mode
   function handleDragStart(e: PointerEvent) {
     if (disableDrag) return;
@@ -632,13 +663,16 @@
         currentPos
       );
 
-      // Constrain size and position
-      const constrainedSize = constrainSize(result.size, resolvedConstraints);
-      const constrainedPosition = constrainPosition(
+      // Route through constrainResize so a left/top/corner resize that clamps to
+      // min/max compensates the position and keeps the anchored (right/bottom)
+      // edge fixed instead of drifting.
+      const { position: constrainedPosition, size: constrainedSize } = constrainResize(
         result.position,
-        constrainedSize,
+        result.size,
+        resolvedConstraints,
         window.innerWidth,
-        window.innerHeight
+        window.innerHeight,
+        resizeHandle
       );
 
       detachedSize = constrainedSize;
@@ -670,6 +704,130 @@
     debouncedSave();
   }
 
+  // Keyboard resize (arrow keys) — parity with the React ResizeHandles slider.
+  const KEYBOARD_RESIZE_STEP = 10; // pixels per key press
+  const KEYBOARD_RESIZE_STEP_LARGE = 50; // pixels per shift+key press
+
+  function handleResizeKeyDown(e: KeyboardEvent, handle: ResizeHandle) {
+    if (disableResize) return;
+    const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;
+
+    if (mode === 'detached') {
+      let width = detachedSize.width;
+      let height = detachedSize.height;
+      let handled = false;
+
+      switch (e.key) {
+        case 'ArrowUp':
+          if (handle.includes('top')) ((height += step), (handled = true));
+          else if (handle.includes('bottom')) ((height -= step), (handled = true));
+          break;
+        case 'ArrowDown':
+          if (handle.includes('top')) ((height -= step), (handled = true));
+          else if (handle.includes('bottom')) ((height += step), (handled = true));
+          break;
+        case 'ArrowLeft':
+          if (handle.includes('left')) ((width += step), (handled = true));
+          else if (handle.includes('right')) ((width -= step), (handled = true));
+          break;
+        case 'ArrowRight':
+          if (handle.includes('left')) ((width -= step), (handled = true));
+          else if (handle.includes('right')) ((width += step), (handled = true));
+          break;
+      }
+
+      if (handled) {
+        e.preventDefault();
+        // Left/top handles move the panel so the anchored (right/bottom) edge
+        // stays put as the size changes; right/bottom handles keep position.
+        // constrainResize then clamps size and compensates the position on clamp.
+        const candidatePosition = {
+          x: handle.includes('left')
+            ? detachedPosition.x + (detachedSize.width - width)
+            : detachedPosition.x,
+          y: handle.includes('top')
+            ? detachedPosition.y + (detachedSize.height - height)
+            : detachedPosition.y,
+        };
+        const { position, size } = constrainResize(
+          candidatePosition,
+          { width, height },
+          resolvedConstraints,
+          window.innerWidth,
+          window.innerHeight,
+          handle
+        );
+        detachedSize = size;
+        detachedPosition = position;
+        debouncedSave();
+      }
+    } else {
+      // Pinned mode - single handle grows/shrinks perpendicular to the edge.
+      const horizontal = isHorizontalEdge(edge);
+      let newSize = pinnedSize;
+      let handled = false;
+
+      if (horizontal) {
+        if (
+          (e.key === 'ArrowLeft' && edge === 'right') ||
+          (e.key === 'ArrowRight' && edge === 'left')
+        )
+          ((newSize += step), (handled = true));
+        else if (
+          (e.key === 'ArrowRight' && edge === 'right') ||
+          (e.key === 'ArrowLeft' && edge === 'left')
+        )
+          ((newSize -= step), (handled = true));
+      } else {
+        if ((e.key === 'ArrowUp' && edge === 'bottom') || (e.key === 'ArrowDown' && edge === 'top'))
+          ((newSize += step), (handled = true));
+        else if (
+          (e.key === 'ArrowDown' && edge === 'bottom') ||
+          (e.key === 'ArrowUp' && edge === 'top')
+        )
+          ((newSize -= step), (handled = true));
+      }
+
+      if (handled) {
+        e.preventDefault();
+        pinnedSize = horizontal
+          ? constrainPinnedWidth(newSize, resolvedConstraints, window.innerWidth)
+          : constrainPinnedHeight(newSize, resolvedConstraints, window.innerHeight);
+        debouncedSave();
+      }
+    }
+  }
+
+  // aria-value* for the resize sliders.
+  function resizeAriaNow(handle: ResizeHandle): number {
+    const isWidth = handle.includes('left') || handle.includes('right');
+    if (mode === 'detached') return isWidth ? detachedSize.width : detachedSize.height;
+    return pinnedSize;
+  }
+  function resizeAriaMin(handle: ResizeHandle): number {
+    const isWidth = handle.includes('left') || handle.includes('right');
+    return isWidth ? resolvedConstraints.minWidth : resolvedConstraints.minHeight;
+  }
+  function resizeAriaMax(handle: ResizeHandle): number {
+    const isWidth = handle.includes('left') || handle.includes('right');
+    return isWidth ? resolvedConstraints.maxWidth : resolvedConstraints.maxHeight;
+  }
+
+  // The eight detached resize handles, driving the {#each} in the template.
+  const detachedResizeHandles: {
+    handle: ResizeHandle;
+    orientation: 'horizontal' | 'vertical' | null;
+  }[] = [
+    { handle: 'top', orientation: 'horizontal' },
+    { handle: 'bottom', orientation: 'horizontal' },
+    { handle: 'left', orientation: 'vertical' },
+    { handle: 'right', orientation: 'vertical' },
+    { handle: 'top-left', orientation: null },
+    { handle: 'top-right', orientation: null },
+    { handle: 'bottom-left', orientation: null },
+    { handle: 'bottom-right', orientation: null },
+  ];
+
   // Card resize (top edge only when expanded)
   function handleCardResizeStart(e: PointerEvent) {
     if (variant !== 'card' || !isExpanded || disableResize) return;
@@ -780,6 +938,63 @@
     debouncedSave();
   }
 
+  // The current desktop card width (falls back to the computed default).
+  const cardDefaultWidth = $derived(
+    Math.min(viewportWidth - resolvedCardConfig.horizontalMargin * 2, resolvedCardConfig.maxWidth)
+  );
+  const cardCurrentWidth = $derived(cardWidth ?? cardDefaultWidth);
+  const cardHeightMin = $derived(CARD_HEADER_HEIGHT * 2);
+  const cardHeightMax = $derived(Math.round(viewportHeight * 0.95));
+
+  // Keyboard resize for the desktop card handles (parity with the full-variant
+  // sliders). Top edge steps height; left/right edges step width, with the left
+  // edge shifting position so the opposite edge stays anchored.
+  function handleCardResizeKeyDown(
+    e: KeyboardEvent,
+    kind: 'height' | 'width-left' | 'width-right'
+  ) {
+    if (disableResize) return;
+    const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;
+
+    if (kind === 'height') {
+      let delta = 0;
+      if (e.key === 'ArrowUp') delta = step;
+      else if (e.key === 'ArrowDown') delta = -step;
+      else return;
+      e.preventDefault();
+      cardExpandedHeight = Math.max(
+        cardHeightMin,
+        Math.min(cardHeightMax, cardExpandedHeight + delta)
+      );
+      debouncedSave();
+      return;
+    }
+
+    // Width handles.
+    let widthDelta = 0;
+    if (kind === 'width-right') {
+      if (e.key === 'ArrowRight') widthDelta = step;
+      else if (e.key === 'ArrowLeft') widthDelta = -step;
+    } else {
+      // Left edge: ArrowLeft grows leftward, ArrowRight shrinks.
+      if (e.key === 'ArrowLeft') widthDelta = step;
+      else if (e.key === 'ArrowRight') widthDelta = -step;
+    }
+    if (widthDelta === 0) return;
+    e.preventDefault();
+
+    const maxWidth = Math.min(
+      resolvedCardConfig.maxWidth,
+      viewportWidth - resolvedCardConfig.horizontalMargin * 2
+    );
+    const nextWidth = Math.max(CARD_MIN_WIDTH, Math.min(maxWidth, cardCurrentWidth + widthDelta));
+    const appliedDelta = nextWidth - cardCurrentWidth;
+    cardWidth = nextWidth;
+    // Left edge keeps its right edge fixed: growing width moves the panel left.
+    if (kind === 'width-left') cardHorizontalPosition -= appliedDelta;
+    debouncedSave();
+  }
+
   // Global event listeners
   function handlePointerMove(e: PointerEvent) {
     if (isDragging) handleDragMove(e);
@@ -810,9 +1025,13 @@
     ) {
       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);
       return () => {
         window.removeEventListener('pointermove', handlePointerMove);
         window.removeEventListener('pointerup', handlePointerUp);
+        window.removeEventListener('pointercancel', handlePointerUp);
       };
     }
   });
@@ -838,7 +1057,7 @@
   });
 
   // Calculate panel styles
-  const panelStyles = $derived(() => {
+  const panelStyles = $derived.by(() => {
     if (variant === 'card') {
       // Card mode - bottom sheet style
       const defaultCardWidth = Math.min(
@@ -895,7 +1114,7 @@
   );
 
   // Animation classes
-  const animationClass = $derived(() => {
+  const animationClass = $derived.by(() => {
     if (variant === 'card') {
       return 'animate-panel-slide-in-bottom';
     }
@@ -912,12 +1131,36 @@
 
   // Whether to show content (collapsed card only shows header)
   const showContent = $derived(variant !== 'card' || isExpanded || isCardVerticalDragging);
+
+  // 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,
+  // or, when detached, the edge it will re-pin to. The card toggles up (expand) /
+  // down (collapse).
+  const collapseChevronRotation = $derived<string>(
+    variant === 'full'
+      ? { top: '', bottom: 'rotate-180', left: '-rotate-90', right: 'rotate-90' }[edge]
+      : isExpanded
+        ? 'rotate-180'
+        : ''
+  );
 </script>
 
 {#if open}
   {#if variant === 'full' && !isExpanded && mode === 'pinned'}
     <!-- Collapsed tab (full variant only) -->
-    <DataPanelTab {title} {edge} onclick={handleTabClick} />
+    <DataPanelTab
+      {title}
+      {subtitle}
+      {edge}
+      {disableClose}
+      onclick={handleTabClick}
+      onClose={handleClose}
+      offset={internalTabOffset}
+      onOffsetChange={(o) => {
+        internalTabOffset = o;
+        debouncedSave();
+      }}
+    />
   {:else}
     <!-- Snap preview indicator (detached mode only) -->
     {#if snapPreview}
@@ -932,21 +1175,21 @@
       ></div>
     {/if}
 
-    <!-- Overlay for expanded card on mobile -->
+    <!-- Presentational scrim for the expanded mobile card. Keyboard users dismiss
+         via Escape (useEscapeKey); the backdrop is click-to-dismiss only. -->
     {#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"
         onclick={handleToggleExpand}
-        onkeydown={(e) => e.key === 'Enter' && handleToggleExpand()}
-        role="button"
-        tabindex="-1"
-        aria-label="Close panel"
+        aria-hidden="true"
       ></div>
     {/if}
 
     <!-- Panel -->
     <div
       bind:this={panelRef}
+      use:focusTrap
       class={cn(
         'fixed z-50 flex flex-col bg-background border border-border shadow-lg overflow-hidden',
         variant === 'full' && mode === 'pinned' && pinnedClasses,
@@ -960,14 +1203,14 @@
           !isResizing &&
           !isCardWidthResizing &&
           'transition-[height,left,width,transform] duration-300 ease-out',
-        animationClass(),
+        animationClass,
         className
       )}
-      style={Object.entries(panelStyles())
+      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-modal={isDialog ? 'true' : undefined}
       aria-labelledby={title ? 'data-panel-title' : undefined}
       aria-expanded={variant === 'card' ? isExpanded : undefined}
       tabindex="-1"
@@ -1052,18 +1295,13 @@
               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 class="w-4 h-4 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor">
+                <circle cx="9" cy="6" r="1.5" />
+                <circle cx="15" cy="6" r="1.5" />
+                <circle cx="9" cy="12" r="1.5" />
+                <circle cx="15" cy="12" r="1.5" />
+                <circle cx="9" cy="18" r="1.5" />
+                <circle cx="15" cy="18" r="1.5" />
               </svg>
             </button>
           {/if}
@@ -1073,30 +1311,27 @@
             <button
               type="button"
               class="p-1.5 rounded hover:bg-muted"
-              onclick={handleToggleExpand}
+              onclick={handleCollapseToggle}
               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}
+              <!-- Base chevron points up; rotate it so that when pinned it points
+                   toward the pinned edge (the collapse direction), and for the card
+                   it toggles the usual up (expand) / down (collapse). -->
+              <svg
+                class={cn('w-4 h-4 transition-transform', collapseChevronRotation)}
+                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>
             </button>
           {/if}
 
@@ -1148,52 +1383,30 @@
       <!-- Resize handles (full variant only) -->
       {#if variant === 'full' && !disableResize}
         {#if mode === 'detached'}
-          <!-- Edge handles -->
-          <div
-            class="resize-handle resize-handle--horizontal resize-handle--top"
-            role="separator"
-            aria-orientation="horizontal"
-            onpointerdown={(e) => handleResizeStart(e, 'top')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--horizontal resize-handle--bottom"
-            role="separator"
-            aria-orientation="horizontal"
-            onpointerdown={(e) => handleResizeStart(e, 'bottom')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--vertical resize-handle--left"
-            role="separator"
-            aria-orientation="vertical"
-            onpointerdown={(e) => handleResizeStart(e, 'left')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--vertical resize-handle--right"
-            role="separator"
-            aria-orientation="vertical"
-            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"
-            role="separator"
-            onpointerdown={(e) => handleResizeStart(e, 'top-left')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--corner resize-handle--top-right"
-            role="separator"
-            onpointerdown={(e) => handleResizeStart(e, 'top-right')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--corner resize-handle--bottom-left"
-            role="separator"
-            onpointerdown={(e) => handleResizeStart(e, 'bottom-left')}
-          ></div>
-          <div
-            class="resize-handle resize-handle--corner resize-handle--bottom-right"
-            role="separator"
-            onpointerdown={(e) => handleResizeStart(e, 'bottom-right')}
-          ></div>
+          <!-- Edge + corner handles: keyboard-resizable sliders (arrow keys, shift for large steps) -->
+          {#each detachedResizeHandles as { handle, orientation } (handle)}
+            <div
+              class={cn(
+                'resize-handle',
+                orientation === 'horizontal' && 'resize-handle--horizontal',
+                orientation === 'vertical' && 'resize-handle--vertical',
+                orientation === null && 'resize-handle--corner',
+                `resize-handle--${handle}`
+              )}
+              role="slider"
+              tabindex="0"
+              aria-orientation={orientation === 'vertical' ? 'vertical' : 'horizontal'}
+              aria-label={`Resize panel from ${handle.replace('-', ' ')} ${
+                handle.includes('-') ? 'corner' : 'edge'
+              }`}
+              aria-valuenow={resizeAriaNow(handle)}
+              aria-valuemin={resizeAriaMin(handle)}
+              aria-valuemax={resizeAriaMax(handle)}
+              aria-valuetext={`${resizeAriaNow(handle)} pixels`}
+              onpointerdown={(e) => handleResizeStart(e, handle)}
+              onkeydown={(e) => handleResizeKeyDown(e, handle)}
+            ></div>
+          {/each}
         {:else}
           <!-- Single resize handle for pinned mode -->
           {@const pinnedHandle = getPinnedResizeHandle(edge)}
@@ -1205,9 +1418,16 @@
               edge === 'top' && 'resize-handle--horizontal resize-handle--bottom',
               edge === 'bottom' && 'resize-handle--horizontal resize-handle--top'
             )}
-            role="separator"
-            aria-orientation={isHorizontalEdge(edge) ? 'vertical' : 'horizontal'}
+            role="slider"
+            tabindex="0"
+            aria-orientation={isHorizontalEdge(edge) ? 'horizontal' : 'vertical'}
+            aria-label={`Resize panel from ${edge} edge`}
+            aria-valuenow={pinnedSize}
+            aria-valuemin={resizeAriaMin(pinnedHandle)}
+            aria-valuemax={resizeAriaMax(pinnedHandle)}
+            aria-valuetext={`${pinnedSize} pixels`}
             onpointerdown={(e) => handleResizeStart(e, pinnedHandle)}
+            onkeydown={(e) => handleResizeKeyDown(e, pinnedHandle)}
           ></div>
         {/if}
       {/if}
@@ -1217,23 +1437,44 @@
         <!-- Top edge for height resize -->
         <div
           class="resize-handle resize-handle--horizontal resize-handle--top"
-          role="separator"
-          aria-orientation="horizontal"
+          role="slider"
+          tabindex="0"
+          aria-orientation="vertical"
+          aria-label="Resize card height"
+          aria-valuenow={Math.round(cardExpandedHeight)}
+          aria-valuemin={cardHeightMin}
+          aria-valuemax={cardHeightMax}
+          aria-valuetext={`${Math.round(cardExpandedHeight)} pixels`}
           onpointerdown={handleCardResizeStart}
+          onkeydown={(e) => handleCardResizeKeyDown(e, 'height')}
         ></div>
         <!-- Left edge for width resize -->
         <div
           class="resize-handle resize-handle--vertical resize-handle--left resize-handle--card-edge"
-          role="separator"
-          aria-orientation="vertical"
+          role="slider"
+          tabindex="0"
+          aria-orientation="horizontal"
+          aria-label="Resize card width from left edge"
+          aria-valuenow={Math.round(cardCurrentWidth)}
+          aria-valuemin={CARD_MIN_WIDTH}
+          aria-valuemax={resolvedCardConfig.maxWidth}
+          aria-valuetext={`${Math.round(cardCurrentWidth)} pixels`}
           onpointerdown={(e) => handleCardWidthResizeStart(e, 'left')}
+          onkeydown={(e) => handleCardResizeKeyDown(e, 'width-left')}
         ></div>
         <!-- Right edge for width resize -->
         <div
           class="resize-handle resize-handle--vertical resize-handle--right resize-handle--card-edge"
-          role="separator"
-          aria-orientation="vertical"
+          role="slider"
+          tabindex="0"
+          aria-orientation="horizontal"
+          aria-label="Resize card width from right edge"
+          aria-valuenow={Math.round(cardCurrentWidth)}
+          aria-valuemin={CARD_MIN_WIDTH}
+          aria-valuemax={resolvedCardConfig.maxWidth}
+          aria-valuetext={`${Math.round(cardCurrentWidth)} pixels`}
           onpointerdown={(e) => handleCardWidthResizeStart(e, 'right')}
+          onkeydown={(e) => handleCardResizeKeyDown(e, 'width-right')}
         ></div>
       {/if}
     </div>
@@ -1249,7 +1490,8 @@
     background: transparent;
   }
 
-  /* Edge handles - horizontal (top/bottom) */
+  /* Edge handles - invisible hit strip inset from the corners, with a 2px line
+     inset 2px from the panel edge so it aligns with the corner arcs' gap. */
   .resize-handle--horizontal {
     left: 14px;
     right: 14px;
@@ -1317,10 +1559,16 @@
     right: 0;
   }
 
-  /* Hover state for edge handles */
+  /* Hover / keyboard-focus state for edge handles */
   .resize-handle--horizontal:hover::after,
-  .resize-handle--vertical:hover::after {
-    background: hsl(var(--border));
+  .resize-handle--vertical:hover::after,
+  .resize-handle--horizontal:focus-visible::after,
+  .resize-handle--vertical:focus-visible::after {
+    background: hsl(var(--ring));
+  }
+
+  .resize-handle:focus-visible {
+    outline: none;
   }
 
   /* Card edge handles - extend to bottom edge (no bottom corners) */
@@ -1423,4 +1671,25 @@
     border-bottom-color: hsl(var(--border)) !important;
     border-right-color: hsl(var(--border)) !important;
   }
+
+  /* Keyboard-focus state for corner handles */
+  .resize-handle--top-left:focus-visible::after {
+    border-top-color: hsl(var(--ring)) !important;
+    border-left-color: hsl(var(--ring)) !important;
+  }
+
+  .resize-handle--top-right:focus-visible::after {
+    border-top-color: hsl(var(--ring)) !important;
+    border-right-color: hsl(var(--ring)) !important;
+  }
+
+  .resize-handle--bottom-left:focus-visible::after {
+    border-bottom-color: hsl(var(--ring)) !important;
+    border-left-color: hsl(var(--ring)) !important;
+  }
+
+  .resize-handle--bottom-right:focus-visible::after {
+    border-bottom-color: hsl(var(--ring)) !important;
+    border-right-color: hsl(var(--ring)) !important;
+  }
 </style>

package/dist/lib/components/DataPanelHeader.svelte

@@ -89,7 +89,7 @@
       {#snippet trigger()}
         <button
           type="button"
-          class="flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          class="relative flex h-8 w-8 items-center justify-center rounded-md before:absolute before:-inset-1.5 before:content-[''] bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           aria-label="Panel options"
         >
           <svg
@@ -141,7 +141,7 @@
       <!-- Collapse/Expand button -->
       <button
         type="button"
-        class="flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        class="relative flex h-8 w-8 items-center justify-center rounded-md before:absolute before:-inset-1.5 before:content-[''] bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         onclick={() => onExpandedChange?.(!isExpanded)}
         aria-label={isExpanded ? 'Collapse panel' : 'Expand panel'}
         aria-expanded={isExpanded}
@@ -168,7 +168,7 @@
           {#snippet trigger()}
             <button
               type="button"
-              class="flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              class="relative flex h-8 w-8 items-center justify-center rounded-md before:absolute before:-inset-1.5 before:content-[''] bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               aria-label="Panel options"
             >
               <svg
@@ -195,7 +195,7 @@
       {#if !disableClose}
         <button
           type="button"
-          class="flex h-8 w-8 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          class="relative flex h-8 w-8 items-center justify-center rounded-md before:absolute before:-inset-1.5 before:content-[''] bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           onclick={() => onClose?.()}
           aria-label="Close panel"
         >

package/dist/lib/components/DataPanelTab.svelte

@@ -1,72 +1,240 @@
 <script lang="ts">
   import { cn } from '../utils.js';
   import type { PanelEdge } from '@classic-homes/data-panel-core';
+  import { constrainTabOffset } from '@classic-homes/data-panel-core';
 
   interface Props {
     /** Tab label/title */
     title?: string;
+    /** Secondary line under the title */
+    subtitle?: string;
     /** Current edge position */
     edge: PanelEdge;
-    /** Click handler to expand panel */
+    /** Expand the panel (tap/click/keyboard on the chip body) */
     onclick?: () => void;
+    /** Close the panel (chip close button) */
+    onClose?: () => void;
+    disableClose?: boolean;
+    /** Offset (px) of the tab along its edge from the centered position */
+    offset?: number;
+    /** Called with the new offset after the tab is dragged along its edge */
+    onOffsetChange?: (offset: number) => void;
     /** Additional class */
     class?: string;
   }
 
-  let { title = 'Panel', edge, onclick, class: className }: Props = $props();
+  let {
+    title = 'Panel',
+    subtitle,
+    edge,
+    onclick,
+    onClose,
+    disableClose = false,
+    offset = 0,
+    onOffsetChange,
+    class: className,
+  }: Props = $props();
+
+  const isVertical = $derived(edge === 'left' || edge === 'right');
 
-  // Position classes based on edge
   const positionClasses = $derived<string>(
     {
-      left: 'left-0 top-1/2 -translate-y-1/2 rounded-r-md border-l-0',
-      right: 'right-0 top-1/2 -translate-y-1/2 rounded-l-md border-r-0',
-      top: 'top-0 left-1/2 -translate-x-1/2 rounded-b-md border-t-0',
-      bottom: 'bottom-0 left-1/2 -translate-x-1/2 rounded-t-md border-b-0',
+      // Side tabs are the whole chip rotated 90°, so they need a fixed thickness
+      // (h-14 → 56px) for a deterministic edge hug; see tabTransform below. Border
+      // classes are in the chip's pre-rotation frame: its bottom rotates to the
+      // attached (edge) side and its top corners to the viewport-facing corners,
+      // so both edges drop the bottom border and round the top.
+      left: 'left-0 top-1/2 h-14 rounded-t-lg border-b-0',
+      right: 'right-0 top-1/2 h-14 rounded-t-lg border-b-0',
+      top: 'top-0 left-1/2 rounded-b-lg border-t-0',
+      bottom: 'bottom-0 left-1/2 rounded-t-lg border-b-0',
     }[edge]
   );
 
-  // Text direction for vertical edges
-  const isVertical = $derived(edge === 'left' || edge === 'right');
+  const draggable = $derived(!!onOffsetChange);
+
+  let btn = $state<HTMLDivElement | null>(null);
+  let dragOffset = $state<number | null>(null);
+  const effectiveOffset = $derived(dragOffset ?? offset);
+
+  // Half the side-tab thickness (h-14 → 56px). Left/right tabs are the whole chip
+  // rotated 90°; we center the rotated footprint on the edge, then shift it back
+  // by half its thickness so the outer long edge sits flush.
+  const SIDE_HALF = 28;
+  const tabTransform = $derived<string>(
+    edge === 'left'
+      ? `translate(calc(-50% + ${SIDE_HALF}px), calc(-50% + ${effectiveOffset}px)) rotate(90deg)`
+      : edge === 'right'
+        ? `translate(calc(50% - ${SIDE_HALF}px), calc(-50% + ${effectiveOffset}px)) rotate(-90deg)`
+        : `translateX(calc(-50% + ${effectiveOffset}px))`
+  );
+
+  // Non-reactive drag bookkeeping.
+  let drag = { startX: 0, startY: 0, startOffset: 0, moved: false, pointerId: -1 };
+
+  function handlePointerDown(e: PointerEvent) {
+    if (!onOffsetChange) return;
+    if (e.pointerType === 'mouse' && e.button !== 0) return;
+    // Let action buttons (close) handle their own press without starting a drag.
+    if ((e.target as HTMLElement).closest('[data-no-drag]')) return;
+    drag = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startOffset: offset,
+      moved: false,
+      pointerId: e.pointerId,
+    };
+    dragOffset = offset;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  function handlePointerMove(e: PointerEvent) {
+    const el = e.currentTarget as HTMLElement;
+    if (drag.pointerId !== e.pointerId || !el.hasPointerCapture(e.pointerId)) return;
+    const delta = isVertical ? e.clientY - drag.startY : e.clientX - drag.startX;
+    if (Math.abs(delta) > 3) drag.moved = true;
+    const rect = btn?.getBoundingClientRect();
+    const tabSize = { width: rect?.width ?? 160, height: rect?.height ?? 48 };
+    dragOffset = constrainTabOffset(
+      drag.startOffset + delta,
+      edge,
+      tabSize,
+      window.innerWidth,
+      window.innerHeight
+    );
+  }
+
+  function handlePointerUp(e: PointerEvent) {
+    const el = e.currentTarget as HTMLElement;
+    if (drag.pointerId !== e.pointerId) return;
+    if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+    drag.pointerId = -1;
+    if (drag.moved) {
+      // A drag repositions.
+      onOffsetChange?.(dragOffset ?? offset);
+    } else {
+      // A tap anywhere on the chip expands. Handled here (not on the inner
+      // button's click) because the container holds pointer capture during a
+      // press, which would otherwise swallow the button click.
+      onclick?.();
+    }
+    dragOffset = null;
+  }
+
+  // A canceled pointer (OS gesture, scroll) must not count as a tap-to-expand;
+  // just discard the in-flight drag and revert to the persisted offset.
+  function handlePointerCancel(e: PointerEvent) {
+    if (drag.pointerId !== e.pointerId) return;
+    const el = e.currentTarget as HTMLElement;
+    if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
+    drag.pointerId = -1;
+    drag.moved = false;
+    dragOffset = null;
+  }
+
+  // Keyboard activation of the expand button (pointer taps expand via the
+  // container's pointerup above).
+  function handleExpandKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onclick?.();
+    }
+  }
+
+  function handleClose(e: MouseEvent) {
+    e.stopPropagation();
+    onClose?.();
+  }
+
+  function clampOffset() {
+    if (!onOffsetChange) return;
+    const rect = btn?.getBoundingClientRect();
+    if (!rect) return;
+    const clamped = constrainTabOffset(
+      offset,
+      edge,
+      { width: rect.width, height: rect.height },
+      window.innerWidth,
+      window.innerHeight
+    );
+    if (clamped !== offset) onOffsetChange(clamped);
+  }
+
+  // Re-clamp the persisted offset to the current tab geometry. The tab's
+  // along-edge extent depends on its rendered size (and, for side edges, on the
+  // 90° rotation), so an offset saved under a different size/edge/viewport can
+  // land the tab off-screen. Runs on mount and whenever edge/offset/size change.
+  $effect(() => {
+    // Track the reactive inputs so this re-runs when they change.
+    void edge;
+    void offset;
+    void btn;
+    if (dragOffset !== null) return;
+    clampOffset();
+  });
+
+  $effect(() => {
+    const onResize = () => {
+      if (dragOffset === null) clampOffset();
+    };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  });
 </script>
 
-<button
-  type="button"
+<!-- Presentational drag container: holds the expand + close buttons as siblings
+     so neither interactive control is nested inside another (valid a11y). The
+     container carries the position/transform and the pointer-drag handlers. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  bind:this={btn}
   class={cn(
-    'fixed z-40 flex items-center justify-center gap-2 border border-border bg-background px-3 py-2 text-sm font-medium shadow-md hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    'fixed z-40 flex max-w-[220px] items-center gap-2 border border-border bg-background px-2.5 py-1.5 shadow-md focus-within:ring-2 focus-within:ring-ring',
+    draggable && 'cursor-grab touch-none active:cursor-grabbing',
     positionClasses,
-    isVertical && 'writing-mode-vertical',
     className
   )}
-  {onclick}
-  aria-label={`Expand ${title} panel`}
+  style={`transform: ${tabTransform}`}
+  onpointerdown={handlePointerDown}
+  onpointermove={draggable ? handlePointerMove : undefined}
+  onpointerup={draggable ? handlePointerUp : undefined}
+  onpointercancel={draggable ? handlePointerCancel : undefined}
 >
-  <!-- Expand icon -->
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="14"
-    height="14"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class={cn(
-      'shrink-0',
-      edge === 'left' && 'rotate-90',
-      edge === 'right' && '-rotate-90',
-      edge === 'top' && 'rotate-180',
-      edge === 'bottom' && ''
-    )}
+  <button
+    type="button"
+    aria-label={`Expand ${title} panel`}
+    class="flex min-w-0 flex-1 flex-col text-left leading-tight hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    onclick={draggable ? undefined : onclick}
+    onkeydown={handleExpandKeyDown}
   >
-    <path d="m18 15-6-6-6 6" />
-  </svg>
-  <span class={cn(isVertical && 'rotate-180')}>{title}</span>
-</button>
-
-<style>
-  .writing-mode-vertical {
-    writing-mode: vertical-rl;
-    text-orientation: mixed;
-  }
-</style>
+    <span class="truncate text-sm font-semibold">{title}</span>
+    {#if subtitle}
+      <span class="truncate text-xs text-muted-foreground">{subtitle}</span>
+    {/if}
+  </button>
+
+  {#if !disableClose && onClose}
+    <button
+      data-no-drag
+      type="button"
+      class="relative ml-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground before:absolute before:-inset-2.5 before:content-[''] hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      aria-label="Close panel"
+      onclick={handleClose}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+  {/if}
+</div>

package/dist/lib/components/DataPanelTab.svelte.d.ts

@@ -2,10 +2,19 @@ import type { PanelEdge } from '@classic-homes/data-panel-core';
 interface Props {
     /** Tab label/title */
     title?: string;
+    /** Secondary line under the title */
+    subtitle?: string;
     /** Current edge position */
     edge: PanelEdge;
-    /** Click handler to expand panel */
+    /** Expand the panel (tap/click/keyboard on the chip body) */
     onclick?: () => void;
+    /** Close the panel (chip close button) */
+    onClose?: () => void;
+    disableClose?: boolean;
+    /** Offset (px) of the tab along its edge from the centered position */
+    offset?: number;
+    /** Called with the new offset after the tab is dragged along its edge */
+    onOffsetChange?: (offset: number) => void;
     /** Additional class */
     class?: string;
 }

package/dist/lib/components/Icon.svelte

@@ -39,6 +39,7 @@
     | 'archive'
     | 'power'
     | 'zap'
+    | 'sparkles'
     | 'pin'
     // Navigation
     | 'chevron-down'
@@ -496,6 +497,9 @@
     archive: { path: 'M21 8v13H3V8M1 3h22v5H1zM10 12h4' },
     power: { path: 'M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10' },
     zap: { path: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z' },
+    sparkles: {
+      path: 'M12 3l-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3zM5 3v4M19 17v4M3 5h4M17 19h4',
+    },
     pin: {
       path: 'M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48',
     },

package/dist/lib/components/Icon.svelte.d.ts

@@ -2,7 +2,7 @@
  * Available icon names for the Icon component.
  * Organized by category for easier discovery.
  */
-export type IconName = 'close' | 'check' | 'plus' | 'minus' | 'edit' | 'trash' | 'info' | 'alert-circle' | 'alert-triangle' | 'search' | 'settings' | 'home' | 'loading' | 'send' | 'more' | 'more-horizontal' | 'grip' | 'history' | 'copy' | 'download' | 'upload' | 'refresh' | 'save' | 'print' | 'share' | 'cut' | 'paste' | 'undo' | 'redo' | 'archive' | 'power' | 'zap' | 'pin' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'chevrons-down' | 'chevrons-up' | 'chevrons-left' | 'chevrons-right' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'corner-up-left' | 'corner-up-right' | 'corner-down-left' | 'corner-down-right' | 'menu' | 'external-link' | 'expand' | 'collapse' | 'fullscreen' | 'minimize' | 'user' | 'users' | 'user-plus' | 'user-minus' | 'user-check' | 'user-x' | 'shield' | 'shield-check' | 'shield-off' | 'badge' | 'id-card' | 'message' | 'chat' | 'mail' | 'phone' | 'bell' | 'bell-off' | 'inbox' | 'at-sign' | 'hash' | 'rss' | 'send' | 'message-circle' | 'message-square' | 'file' | 'file-text' | 'file-code' | 'file-plus' | 'file-minus' | 'folder' | 'folder-open' | 'folder-plus' | 'folder-minus' | 'clipboard' | 'clipboard-check' | 'clipboard-list' | 'book' | 'book-open' | 'newspaper' | 'link' | 'image' | 'play' | 'pause' | 'stop' | 'skip-forward' | 'skip-back' | 'rewind' | 'fast-forward' | 'volume' | 'volume-1' | 'volume-2' | 'volume-x' | 'video' | 'video-off' | 'mic' | 'mic-off' | 'music' | 'camera' | 'camera-off' | 'shopping-cart' | 'shopping-bag' | 'credit-card' | 'dollar-sign' | 'percent' | 'tag' | 'tags' | 'package' | 'truck' | 'receipt' | 'wallet' | 'briefcase' | 'eye' | 'eye-off' | 'lock' | 'unlock' | 'key' | 'check-circle' | 'x-circle' | 'help-circle' | 'alert-octagon' | 'circle' | 'square' | 'triangle' | 'star' | 'star-half' | 'heart' | 'bookmark' | 'flag' | 'thumbs-up' | 'thumbs-down' | 'award' | 'trophy' | 'gift' | 'grid' | 'list' | 'columns' | 'sidebar' | 'layers' | 'layout' | 'move' | 'maximize' | 'filter' | 'sort' | 'sort-asc' | 'sort-desc' | 'bar-chart' | 'bar-chart-2' | 'line-chart' | 'pie-chart' | 'trending-up' | 'trending-down' | 'activity' | 'target' | 'calendar' | 'calendar-plus' | 'calendar-minus' | 'calendar-check' | 'clock' | 'timer' | 'hourglass' | 'alarm' | 'sun' | 'moon' | 'cloud' | 'cloud-rain' | 'cloud-snow' | 'wind' | 'thermometer' | 'droplet' | 'umbrella' | 'globe' | 'map' | 'map-pin' | 'navigation' | 'compass' | 'crosshair' | 'smartphone' | 'tablet' | 'laptop' | 'monitor' | 'tv' | 'printer' | 'wifi' | 'wifi-off' | 'bluetooth' | 'battery' | 'battery-charging' | 'cpu' | 'hard-drive' | 'server' | 'database' | 'cloud-upload' | 'cloud-download' | 'terminal' | 'code' | 'code-2' | 'bug' | 'git-branch' | 'git-commit' | 'git-merge' | 'git-pull-request' | 'box' | 'package' | 'lightbulb' | 'tool' | 'wrench' | 'scissors' | 'paperclip' | 'anchor' | 'aperture' | 'loader' | 'rotate-cw' | 'rotate-ccw' | 'log-in' | 'log-out' | 'slash' | 'percent' | 'hash';
+export type IconName = 'close' | 'check' | 'plus' | 'minus' | 'edit' | 'trash' | 'info' | 'alert-circle' | 'alert-triangle' | 'search' | 'settings' | 'home' | 'loading' | 'send' | 'more' | 'more-horizontal' | 'grip' | 'history' | 'copy' | 'download' | 'upload' | 'refresh' | 'save' | 'print' | 'share' | 'cut' | 'paste' | 'undo' | 'redo' | 'archive' | 'power' | 'zap' | 'sparkles' | 'pin' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'chevrons-down' | 'chevrons-up' | 'chevrons-left' | 'chevrons-right' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'corner-up-left' | 'corner-up-right' | 'corner-down-left' | 'corner-down-right' | 'menu' | 'external-link' | 'expand' | 'collapse' | 'fullscreen' | 'minimize' | 'user' | 'users' | 'user-plus' | 'user-minus' | 'user-check' | 'user-x' | 'shield' | 'shield-check' | 'shield-off' | 'badge' | 'id-card' | 'message' | 'chat' | 'mail' | 'phone' | 'bell' | 'bell-off' | 'inbox' | 'at-sign' | 'hash' | 'rss' | 'send' | 'message-circle' | 'message-square' | 'file' | 'file-text' | 'file-code' | 'file-plus' | 'file-minus' | 'folder' | 'folder-open' | 'folder-plus' | 'folder-minus' | 'clipboard' | 'clipboard-check' | 'clipboard-list' | 'book' | 'book-open' | 'newspaper' | 'link' | 'image' | 'play' | 'pause' | 'stop' | 'skip-forward' | 'skip-back' | 'rewind' | 'fast-forward' | 'volume' | 'volume-1' | 'volume-2' | 'volume-x' | 'video' | 'video-off' | 'mic' | 'mic-off' | 'music' | 'camera' | 'camera-off' | 'shopping-cart' | 'shopping-bag' | 'credit-card' | 'dollar-sign' | 'percent' | 'tag' | 'tags' | 'package' | 'truck' | 'receipt' | 'wallet' | 'briefcase' | 'eye' | 'eye-off' | 'lock' | 'unlock' | 'key' | 'check-circle' | 'x-circle' | 'help-circle' | 'alert-octagon' | 'circle' | 'square' | 'triangle' | 'star' | 'star-half' | 'heart' | 'bookmark' | 'flag' | 'thumbs-up' | 'thumbs-down' | 'award' | 'trophy' | 'gift' | 'grid' | 'list' | 'columns' | 'sidebar' | 'layers' | 'layout' | 'move' | 'maximize' | 'filter' | 'sort' | 'sort-asc' | 'sort-desc' | 'bar-chart' | 'bar-chart-2' | 'line-chart' | 'pie-chart' | 'trending-up' | 'trending-down' | 'activity' | 'target' | 'calendar' | 'calendar-plus' | 'calendar-minus' | 'calendar-check' | 'clock' | 'timer' | 'hourglass' | 'alarm' | 'sun' | 'moon' | 'cloud' | 'cloud-rain' | 'cloud-snow' | 'wind' | 'thermometer' | 'droplet' | 'umbrella' | 'globe' | 'map' | 'map-pin' | 'navigation' | 'compass' | 'crosshair' | 'smartphone' | 'tablet' | 'laptop' | 'monitor' | 'tv' | 'printer' | 'wifi' | 'wifi-off' | 'bluetooth' | 'battery' | 'battery-charging' | 'cpu' | 'hard-drive' | 'server' | 'database' | 'cloud-upload' | 'cloud-download' | 'terminal' | 'code' | 'code-2' | 'bug' | 'git-branch' | 'git-commit' | 'git-merge' | 'git-pull-request' | 'box' | 'package' | 'lightbulb' | 'tool' | 'wrench' | 'scissors' | 'paperclip' | 'anchor' | 'aperture' | 'loader' | 'rotate-cw' | 'rotate-ccw' | 'log-in' | 'log-out' | 'slash' | 'percent' | 'hash';
 interface Props {
     /** The name of the icon to display */
     name: IconName;

package/dist/lib/stores/dataPanel.svelte.d.ts

@@ -22,6 +22,7 @@ export declare function createDataPanelStore(options?: DataPanelStoreOptions): {
     readonly detachedSize: Size;
     readonly pinnedSize: number;
     readonly cardSnapIndex: number;
+    readonly tabOffset: number;
     setMode: (newMode: PanelMode) => void;
     setVariant: (newVariant: PanelVariant) => void;
     setEdge: (newEdge: PanelEdge) => void;
@@ -31,6 +32,7 @@ export declare function createDataPanelStore(options?: DataPanelStoreOptions): {
     setDetachedSize: (size: Size) => void;
     setPinnedSize: (size: number) => void;
     setCardSnapIndex: (index: number) => void;
+    setTabOffset: (offset: number) => void;
     reset: () => void;
     getState: () => DataPanelState;
 };

package/dist/lib/stores/dataPanel.svelte.js

@@ -22,6 +22,7 @@ export function createDataPanelStore(options = {}) {
     let detachedSize = $state(merged.detachedSize);
     let pinnedSize = $state(merged.pinnedSize);
     let cardSnapIndex = $state(merged.cardSnapIndex);
+    let tabOffset = $state(merged.tabOffset);
     // Resolved constraints
     const resolvedConstraints = { ...DEFAULT_CONSTRAINTS, ...constraints };
     // Debounced save for persistence
@@ -42,6 +43,7 @@ export function createDataPanelStore(options = {}) {
                 detachedSize,
                 pinnedSize,
                 cardSnapIndex,
+                tabOffset,
             });
             saveTimeout = null;
         }, 300);
@@ -116,6 +118,12 @@ export function createDataPanelStore(options = {}) {
         cardSnapIndex = index;
         debouncedSave();
     }
+    function setTabOffset(offset) {
+        if (tabOffset === offset)
+            return;
+        tabOffset = offset;
+        debouncedSave();
+    }
     function reset() {
         mode = DEFAULT_PANEL_STATE.mode;
         variant = DEFAULT_PANEL_STATE.variant;
@@ -125,6 +133,7 @@ export function createDataPanelStore(options = {}) {
         detachedSize = DEFAULT_PANEL_STATE.detachedSize;
         pinnedSize = DEFAULT_PANEL_STATE.pinnedSize;
         cardSnapIndex = DEFAULT_PANEL_STATE.cardSnapIndex;
+        tabOffset = DEFAULT_PANEL_STATE.tabOffset;
         debouncedSave();
     }
     // Getters for current state (readonly)
@@ -138,6 +147,7 @@ export function createDataPanelStore(options = {}) {
             detachedSize,
             pinnedSize,
             cardSnapIndex,
+            tabOffset,
         };
     }
     return {
@@ -166,6 +176,9 @@ export function createDataPanelStore(options = {}) {
         get cardSnapIndex() {
             return cardSnapIndex;
         },
+        get tabOffset() {
+            return tabOffset;
+        },
         // Actions
         setMode,
         setVariant,
@@ -176,6 +189,7 @@ export function createDataPanelStore(options = {}) {
         setDetachedSize,
         setPinnedSize,
         setCardSnapIndex,
+        setTabOffset,
         reset,
         getState,
     };

package/package.json

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