@classic-homes/theme-svelte 0.1.56 → 1.0.1

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/layout/DashboardLayout.svelte

@@ -229,6 +229,7 @@
   <Sidebar
     navigation={effectiveNavigation}
     userRoles={user?.roles}
+    userPermissions={user?.permissions}
     variant={sidebarVariant}
     collapsed={!sidebarStore.isOpen && !isMobile}
     {isMobile}

package/dist/lib/components/layout/Sidebar.svelte

@@ -15,6 +15,7 @@
   import type { Snippet } from 'svelte';
   import type { NavSection, NavItem, QuickLink } from '../../types/layout.js';
   import { cn } from '../../utils.js';
+  import { filterNavItems } from '../../utils/nav-access.js';
   import { sidebarStore } from '../../stores/sidebar.svelte.js';
   import LogoMain from '../LogoMain.svelte';
   import QuickLinks from './QuickLinks.svelte';
@@ -25,8 +26,17 @@
   interface Props {
     /** Navigation sections */
     navigation: NavSection[];
-    /** User roles for filtering navigation items */
+    /**
+     * Every role the current user holds. Items are matched against the whole
+     * set, so a user with several roles sees the union of what they allow.
+     */
     userRoles?: string[];
+    /** Every permission the current user holds, for permission-gated items. */
+    userPermissions?: string[];
+    /** Require ALL of an item's `roles` rather than any (default: any). */
+    requireAllRoles?: boolean;
+    /** Require ALL of an item's `permissions` rather than any (default: any). */
+    requireAllPermissions?: boolean;
     /** Whether sidebar is collapsed (desktop) */
     collapsed?: boolean;
     /** Whether currently on mobile */
@@ -80,6 +90,9 @@
   let {
     navigation,
     userRoles,
+    userPermissions,
+    requireAllRoles = false,
+    requireAllPermissions = false,
     collapsed = false,
     isMobile = false,
     mobileOpen = false,
@@ -106,27 +119,19 @@
     class: className,
   }: Props = $props();
 
-  // Helper to check if item is visible based on roles
-  function isItemVisible(item: NavItem): boolean {
-    if (!item.roles || item.roles.length === 0) return true;
-    if (!userRoles || userRoles.length === 0) return false;
-    return item.roles.some((role) => userRoles.includes(role));
-  }
-
-  // Recursively filter items based on roles
-  function filterItems(items: NavItem[]): NavItem[] {
-    return items.filter(isItemVisible).map((item) => ({
-      ...item,
-      children: item.children ? filterItems(item.children) : undefined,
-    }));
-  }
+  const accessContext = $derived({
+    userRoles,
+    userPermissions,
+    requireAllRoles,
+    requireAllPermissions,
+  });
 
-  // Filter navigation based on user roles
+  // Filter navigation by what the user holds, dropping sections left empty.
   const roleFilteredNavigation = $derived(
     navigation
       .map((section) => ({
         ...section,
-        items: filterItems(section.items),
+        items: filterNavItems(section.items, accessContext),
       }))
       .filter((section) => section.items.length > 0)
   );

package/dist/lib/components/layout/Sidebar.svelte.d.ts

@@ -16,8 +16,17 @@ import type { NavSection, NavItem, QuickLink } from '../../types/layout.js';
 interface Props {
     /** Navigation sections */
     navigation: NavSection[];
-    /** User roles for filtering navigation items */
+    /**
+     * Every role the current user holds. Items are matched against the whole
+     * set, so a user with several roles sees the union of what they allow.
+     */
     userRoles?: string[];
+    /** Every permission the current user holds, for permission-gated items. */
+    userPermissions?: string[];
+    /** Require ALL of an item's `roles` rather than any (default: any). */
+    requireAllRoles?: boolean;
+    /** Require ALL of an item's `permissions` rather than any (default: any). */
+    requireAllPermissions?: boolean;
     /** Whether sidebar is collapsed (desktop) */
     collapsed?: boolean;
     /** Whether currently on mobile */

package/dist/lib/schemas/auth.d.ts

@@ -243,7 +243,10 @@ export declare const emailChangeSchema: z.ZodObject<{
 }>;
 export type EmailChangeFormData = z.infer<typeof emailChangeSchema>;
 /**
- * User schema
+ * User schema — for validating a user payload from an API.
+ *
+ * Distinct from the layout `User` in `types/layout.ts`, which is a display
+ * view-model for the sidebar and avatar. This one describes data on the wire.
  */
 export declare const userSchema: z.ZodObject<{
     id: z.ZodString;
@@ -262,9 +265,9 @@ export declare const userSchema: z.ZodObject<{
     email: string;
     username?: string | undefined;
     roles?: string[] | undefined;
+    permissions?: string[] | undefined;
     fullName?: string | undefined;
     avatarUrl?: string | null | undefined;
-    permissions?: string[] | undefined;
     mfaEnabled?: boolean | undefined;
     emailVerified?: boolean | undefined;
     createdAt?: string | undefined;
@@ -274,15 +277,22 @@ export declare const userSchema: z.ZodObject<{
     email: string;
     username?: string | undefined;
     roles?: string[] | undefined;
+    permissions?: string[] | undefined;
     fullName?: string | undefined;
     avatarUrl?: string | null | undefined;
-    permissions?: string[] | undefined;
     mfaEnabled?: boolean | undefined;
     emailVerified?: boolean | undefined;
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
 }>;
-export type User = z.infer<typeof userSchema>;
+/**
+ * A user payload as validated by {@link userSchema}.
+ *
+ * Named `AuthUser` to keep the package's `User` unambiguous — that name belongs
+ * to the layout view-model. Previously exported as `User`, where it collided
+ * with the layout type and lost, making it unreachable from the package root.
+ */
+export type AuthUser = z.infer<typeof userSchema>;
 /**
  * Auth tokens schema
  */
@@ -324,9 +334,9 @@ export declare const loginResponseSchema: z.ZodObject<{
         email: string;
         username?: string | undefined;
         roles?: string[] | undefined;
+        permissions?: string[] | undefined;
         fullName?: string | undefined;
         avatarUrl?: string | null | undefined;
-        permissions?: string[] | undefined;
         mfaEnabled?: boolean | undefined;
         emailVerified?: boolean | undefined;
         createdAt?: string | undefined;
@@ -336,9 +346,9 @@ export declare const loginResponseSchema: z.ZodObject<{
         email: string;
         username?: string | undefined;
         roles?: string[] | undefined;
+        permissions?: string[] | undefined;
         fullName?: string | undefined;
         avatarUrl?: string | null | undefined;
-        permissions?: string[] | undefined;
         mfaEnabled?: boolean | undefined;
         emailVerified?: boolean | undefined;
         createdAt?: string | undefined;
@@ -368,9 +378,9 @@ export declare const loginResponseSchema: z.ZodObject<{
         email: string;
         username?: string | undefined;
         roles?: string[] | undefined;
+        permissions?: string[] | undefined;
         fullName?: string | undefined;
         avatarUrl?: string | null | undefined;
-        permissions?: string[] | undefined;
         mfaEnabled?: boolean | undefined;
         emailVerified?: boolean | undefined;
         createdAt?: string | undefined;
@@ -390,9 +400,9 @@ export declare const loginResponseSchema: z.ZodObject<{
         email: string;
         username?: string | undefined;
         roles?: string[] | undefined;
+        permissions?: string[] | undefined;
         fullName?: string | undefined;
         avatarUrl?: string | null | undefined;
-        permissions?: string[] | undefined;
         mfaEnabled?: boolean | undefined;
         emailVerified?: boolean | undefined;
         createdAt?: string | undefined;

package/dist/lib/schemas/auth.js

@@ -181,7 +181,10 @@ export const emailChangeSchema = z.object({
 // API Response Schemas (for validating API responses)
 // ============================================================================
 /**
- * User schema
+ * User schema — for validating a user payload from an API.
+ *
+ * Distinct from the layout `User` in `types/layout.ts`, which is a display
+ * view-model for the sidebar and avatar. This one describes data on the wire.
  */
 export const userSchema = z.object({
     id: z.string(),

package/dist/lib/schemas/index.d.ts

@@ -9,7 +9,7 @@ export { emailSchema, passwordSchema, loginPasswordSchema, usernameSchema, fullN
 export { loginSchema, registerSchema, forgotPasswordSchema, resetPasswordSchema, changePasswordSchema, mfaVerifySchema, mfaSetupSchema, profileUpdateSchema, emailChangeSchema, } from './auth.js';
 export type { LoginFormData, RegisterFormData, ForgotPasswordFormData, ResetPasswordFormData, ChangePasswordFormData, MfaVerifyFormData, MfaSetupFormData, ProfileUpdateFormData, EmailChangeFormData, } from './auth.js';
 export { userSchema, authTokensSchema, loginResponseSchema } from './auth.js';
-export type { User, AuthTokens, LoginResponse } from './auth.js';
+export type { AuthUser, AuthTokens, LoginResponse } from './auth.js';
 export { nonEmptyString, trimmedString, optionalString, urlSchema, optionalUrlSchema, slugSchema, } from './common.js';
 export { positiveInt, nonNegativeInt, percentageSchema, priceSchema, numericString, } from './common.js';
 export { isoDateSchema, dateStringSchema, timeStringSchema, futureDateSchema, pastDateSchema, } from './common.js';

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/dist/lib/stores/sidebar.svelte.d.ts

@@ -122,8 +122,13 @@ declare class SidebarStore {
     getPinnedIds(): string[];
     /**
      * Compute which sections should be initially expanded based on user roles.
-     * Sections with expandForRoles that match user roles will be auto-expanded.
-     * Falls back to section.expanded or default behavior.
+     *
+     * A section listing `expandForRoles` expands for a user holding ANY of them.
+     * Sections without it fall back to the default: expanded unless explicitly
+     * collapsed.
+     *
+     * This is a UX affordance, not access control — it decides what starts open,
+     * not what is visible. Filtering is `filterNavItems`.
      */
     computeInitialExpansions(sections: NavSection[], userRoles?: string[]): string[];
     /**