@classic-homes/theme-svelte 1.1.2 → 1.2.0

package/dist/lib/components/DataPanel.svelte

@@ -17,6 +17,7 @@
     DEFAULT_PANEL_STATE,
     DEFAULT_CONSTRAINTS,
     DEFAULT_CARD_CONFIG,
+    DEFAULT_TAB_WIDTH,
     CARD_HEADER_HEIGHT,
     CARD_EXPANDED_RATIO,
     CARD_MIN_WIDTH,
@@ -84,6 +85,17 @@
     constraints?: PanelConstraints;
     /** Card mode configuration */
     cardConfig?: CardConfig;
+    /**
+     * Length (px) of the collapsed tab along its edge. Fixed rather than
+     * content-sized; raise it for longer titles. Defaults to 220.
+     */
+    tabWidth?: number;
+    /**
+     * Distance (px) of the collapsed tab from its pinned edge. Use it to clear
+     * fixed app chrome — a sticky header, a toolbar — that would otherwise
+     * cover the tab. Defaults to 0.
+     */
+    tabInset?: number;
     /** Disable close button */
     disableClose?: boolean;
     /** Disable resize functionality */
@@ -127,6 +139,8 @@
     actions = [],
     constraints = {},
     cardConfig = {},
+    tabWidth = DEFAULT_TAB_WIDTH,
+    tabInset = 0,
     disableClose = false,
     disableResize = false,
     disableDrag = false,
@@ -1153,6 +1167,8 @@
       {subtitle}
       {edge}
       {disableClose}
+      {tabWidth}
+      {tabInset}
       onclick={handleTabClick}
       onClose={handleClose}
       offset={internalTabOffset}

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

@@ -33,6 +33,17 @@ interface Props {
     constraints?: PanelConstraints;
     /** Card mode configuration */
     cardConfig?: CardConfig;
+    /**
+     * Length (px) of the collapsed tab along its edge. Fixed rather than
+     * content-sized; raise it for longer titles. Defaults to 220.
+     */
+    tabWidth?: number;
+    /**
+     * Distance (px) of the collapsed tab from its pinned edge. Use it to clear
+     * fixed app chrome — a sticky header, a toolbar — that would otherwise
+     * cover the tab. Defaults to 0.
+     */
+    tabInset?: number;
     /** Disable close button */
     disableClose?: boolean;
     /** Disable resize functionality */

package/dist/lib/components/DataPanelTab.svelte

@@ -1,7 +1,13 @@
 <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';
+  import {
+    constrainTabOffset,
+    getTabTransform,
+    getTabBounds,
+    TAB_THICKNESS,
+    DEFAULT_TAB_WIDTH,
+  } from '@classic-homes/data-panel-core';
 
   interface Props {
     /** Tab label/title */
@@ -19,6 +25,18 @@
     offset?: number;
     /** Called with the new offset after the tab is dragged along its edge */
     onOffsetChange?: (offset: number) => void;
+    /**
+     * Length (px) of the tab along its edge. Fixed rather than content-sized so
+     * the tab's geometry is pure pixel math in every browser; raise it for
+     * longer labels. Defaults to 220.
+     */
+    tabWidth?: number;
+    /**
+     * Distance (px) from the pinned edge. Use it to clear fixed app chrome — a
+     * sticky header, a toolbar — that would otherwise cover the tab. Defaults
+     * to 0 (flush with the edge).
+     */
+    tabInset?: number;
     /** Additional class */
     class?: string;
   }
@@ -32,6 +50,8 @@
     disableClose = false,
     offset = 0,
     onOffsetChange,
+    tabWidth = DEFAULT_TAB_WIDTH,
+    tabInset = 0,
     class: className,
   }: Props = $props();
 
@@ -39,35 +59,32 @@
 
   const positionClasses = $derived<string>(
     {
-      // 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',
+      // 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 side edges drop the bottom border and round the top.
+      // The anchored axis is set inline (see insetStyle) so tabInset can move it.
+      left: 'top-1/2 rounded-t-lg border-b-0',
+      right: 'top-1/2 rounded-t-lg border-b-0',
+      top: 'left-1/2 rounded-b-lg border-t-0',
+      bottom: 'left-1/2 rounded-t-lg border-b-0',
     }[edge]
   );
 
+  // Distance from the anchored edge. Pushes the tab clear of fixed app chrome
+  // (header, toolbar) that would otherwise cover it. The transform is relative
+  // to the tab's own box, so shifting the anchor leaves the geometry intact.
+  const insetStyle = $derived<string>(`${edge}: ${tabInset}px;`);
+
   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))`
-  );
+  // Geometry is entirely pixel-based (see getTabTransform): the tab carries an
+  // explicit width so nothing has to resolve a percentage against a
+  // content-sized box while a rotation is composed onto it.
+  const tabTransform = $derived<string>(getTabTransform(edge, tabWidth, effectiveOffset));
+  const tabBounds = $derived(getTabBounds(edge, tabWidth));
 
   // Non-reactive drag bookkeeping.
   let drag = { startX: 0, startY: 0, startOffset: 0, moved: false, pointerId: -1 };
@@ -93,12 +110,10 @@
     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,
+      tabBounds,
       window.innerWidth,
       window.innerHeight
     );
@@ -148,27 +163,24 @@
 
   function clampOffset() {
     if (!onOffsetChange) return;
-    const rect = btn?.getBoundingClientRect();
-    if (!rect) return;
     const clamped = constrainTabOffset(
       offset,
       edge,
-      { width: rect.width, height: rect.height },
+      tabBounds,
       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.
+  // Re-clamp the persisted offset to the current geometry: an offset saved under
+  // a different edge, tabWidth, or viewport can land the tab off-screen. The
+  // tab's bounds are known from its props, so this never measures the DOM.
   $effect(() => {
     // Track the reactive inputs so this re-runs when they change.
     void edge;
     void offset;
-    void btn;
+    void tabBounds;
     if (dragOffset !== null) return;
     clampOffset();
   });
@@ -187,14 +199,19 @@
      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 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',
+    // Same layer as the expanded panel: the tab is the only way to bring the
+    // panel back, so it must never sit under chrome the panel covers.
+    'fixed z-50 flex 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,
     className
   )}
-  style={`transform: ${tabTransform}`}
+  style={`${insetStyle} width: ${tabWidth}px; ${
+    /* Side tabs rotate, so they need a fixed thickness for a deterministic edge
+       hug; top/bottom stay content-height. */
+    isVertical ? `height: ${TAB_THICKNESS}px; ` : ''
+  }transform-origin: 0 0; transform: ${tabTransform};`}
   onpointerdown={handlePointerDown}
   onpointermove={draggable ? handlePointerMove : undefined}
   onpointerup={draggable ? handlePointerUp : undefined}

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

@@ -15,6 +15,18 @@ interface Props {
     offset?: number;
     /** Called with the new offset after the tab is dragged along its edge */
     onOffsetChange?: (offset: number) => void;
+    /**
+     * Length (px) of the tab along its edge. Fixed rather than content-sized so
+     * the tab's geometry is pure pixel math in every browser; raise it for
+     * longer labels. Defaults to 220.
+     */
+    tabWidth?: number;
+    /**
+     * Distance (px) from the pinned edge. Use it to clear fixed app chrome — a
+     * sticky header, a toolbar — that would otherwise cover the tab. Defaults
+     * to 0 (flush with the edge).
+     */
+    tabInset?: number;
     /** Additional class */
     class?: string;
 }

package/package.json

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