@lapismd/design-core 0.2.0 → 0.3.0

package/src/shared/shadcn/column-canvas/column-canvas.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import "./column-canvas.css";
-  import { onDestroy, onMount, tick, untrack } from "svelte";
+  import { onDestroy, tick, untrack } from "svelte";
   import type { Snippet } from "svelte";
+  import type { Action } from "svelte/action";
   import type { HTMLAttributes } from "svelte/elements";
   import ArrowLeft from "@lucide/svelte/icons/arrow-left";
   import type { WithElementRef } from "../../../lib/utils.js";
@@ -11,6 +12,10 @@
     allocateColumnCanvasPair,
     allocateColumnCanvasWidth,
   } from "./column-canvas-layout.js";
+  import {
+    resolveColumnCanvasPinning,
+    type PinningLayout,
+  } from "./column-canvas-pinning.js";
   import {
     setColumnCanvasContext,
     type ColumnCanvasResizeBehavior,
@@ -36,6 +41,7 @@
   let {
     ref = $bindable(null),
     controller,
+    scrollViewport = null,
     displayMode = "auto",
     compactBreakpoint = DEFAULT_COMPACT_BREAKPOINT,
     tabindex = 0,
@@ -46,6 +52,7 @@
     onwheel,
     class: className,
     children,
+    trailingSpacer,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     /**
@@ -54,13 +61,18 @@
      * site or by typing the const as `ColumnCanvasController`.
      */
     controller: ColumnCanvasController;
+    /** Fixed canvases may use an enclosing Scroll Area's bound viewport. */
+    scrollViewport?: HTMLElement | null;
     /** Adaptive by default; `fixed` preserves the original free-scroll canvas. */
     displayMode?: ColumnCanvasDisplayMode;
     /** Root-width threshold in CSS pixels used by `displayMode="auto"`. */
     compactBreakpoint?: number;
     children?: Snippet;
+    /** Optional accessible content within the existing wide/fixed trailing spacer. */
+    trailingSpacer?: Snippet;
   } = $props();
 
+  const scrollingRoot = $derived(scrollViewport ?? ref);
   const rootController = untrack(() => controller);
   let rowElement = $state<HTMLDivElement | null>(null);
   let wideContextWidthProbe = $state<HTMLDivElement | null>(null);
@@ -74,6 +86,11 @@
   );
   let activeStickyColumns = $state.raw<ResolvedStickyColumn[]>([]);
   let stuckStickyColumns = $state.raw<ResolvedStickyColumn[]>([]);
+  let activeFixedColumns = $state.raw<
+    { element: HTMLElement; offset: number }[]
+  >([]);
+  let fixedPrefixLength = $state(0);
+  let disposed = false;
   let alignmentFrame: number | null = null;
   let alignmentShouldActivateDeepest = false;
   let stickyLayoutFrame: number | null = null;
@@ -112,6 +129,10 @@
     );
   }
 
+  function scrollingColumns(): HTMLElement[] {
+    return visibleColumns().slice(fixedPrefixLength);
+  }
+
   function contentEnd(root: HTMLElement): number {
     const padding = Number.parseFloat(getComputedStyle(root).paddingInlineEnd);
     return (
@@ -121,6 +142,15 @@
   }
 
   function targetScrollLeft(root: HTMLElement, target: HTMLElement): number {
+    if (getComputedStyle(root).direction === "rtl") {
+      const end =
+        root.getBoundingClientRect().left +
+        finitePixels(getComputedStyle(root).paddingInlineEnd);
+      return Math.min(
+        0,
+        root.scrollLeft + target.getBoundingClientRect().left - end,
+      );
+    }
     const delta = target.getBoundingClientRect().right - contentEnd(root);
     return Math.max(0, root.scrollLeft + delta);
   }
@@ -189,6 +219,7 @@
     row: HTMLElement,
     rootStyle: CSSStyleDeclaration,
     columns: HTMLElement[],
+    reservedWidth = 0,
   ): void {
     for (const column of columns) clearResponsiveStageLayout(column);
     activePairResize = undefined;
@@ -211,6 +242,7 @@
     const contentWidth = Math.max(
       0,
       root.clientWidth -
+        reservedWidth -
         finitePixels(rootStyle.paddingInlineStart) -
         finitePixels(rootStyle.paddingInlineEnd),
     );
@@ -291,27 +323,87 @@
   }
 
   function scheduleStickyStateUpdate(): void {
+    if (disposed) return;
     if (stickyStateFrame !== null) cancelAnimationFrame(stickyStateFrame);
     stickyStateFrame = requestAnimationFrame(() => {
       stickyStateFrame = null;
-      updateStickyStates();
+      if (!disposed) updateStickyStates();
     });
   }
 
   function syncStickyLayout(): void {
-    const root = ref;
+    if (disposed) return;
+    const root = scrollingRoot;
     if (!root || !rowElement) return;
+    const previousScrollLeft = root.scrollLeft;
 
     const columns = visibleColumns();
-    for (const column of columns) clearStickyLayout(column);
+    for (const column of columns) {
+      clearStickyLayout(column);
+      clearResponsiveStageLayout(column);
+    }
+    for (const column of rowElement.querySelectorAll<HTMLElement>(
+      ":scope > [data-fixed-active]",
+    )) {
+      column.removeAttribute("data-fixed-active");
+      column.removeAttribute("data-fixed-state");
+      column.style.removeProperty("--ui-column-canvas-fixed-offset");
+    }
     activeStickyColumns = [];
     stuckStickyColumns = [];
-    const rootStyle = getComputedStyle(root);
-    syncResponsiveStageLayout(root, rowElement, rootStyle, columns);
+    const rootStyle = getComputedStyle(ref ?? root);
+    const gap = finitePixels(getComputedStyle(rowElement).columnGap);
+    const pinning = measurePinning(columns, root, rootStyle, gap);
+    activeFixedColumns = pinning.slots
+      .filter((slot) => slot.kind === "fixed")
+      .map((slot) => ({
+        element: columns.find((column) => column.dataset.columnId === slot.id)!,
+        offset: slot.offset,
+      }));
+    fixedPrefixLength = activeFixedColumns.length ? pinning.prefixLength : 0;
+    syncResponsiveStageLayout(
+      root,
+      rowElement,
+      rootStyle,
+      columns.slice(fixedPrefixLength),
+      fixedPrefixLength
+        ? pinning.extent + (columns.length > fixedPrefixLength ? gap : 0)
+        : 0,
+    );
+    for (const { element, offset } of activeFixedColumns) {
+      // Native sticky positions in the internal root include its padding;
+      // external Scroll Area viewports have no canvas padding of their own.
+      const inset =
+        offset -
+        (scrollViewport ? 0 : finitePixels(rootStyle.paddingInlineStart));
+      element.dataset.fixedActive = "true";
+      element.style.setProperty(
+        "--ui-column-canvas-fixed-offset",
+        `${inset}px`,
+      );
+      const anchor = Array.from(
+        rowElement.querySelectorAll<HTMLElement>(
+          ":scope > [data-ui-part='column-preview-anchor']",
+        ),
+      ).find((anchor) => anchor.dataset.columnId === element.dataset.columnId);
+      if (anchor) {
+        anchor.dataset.fixedActive = "true";
+        anchor.style.setProperty(
+          "--ui-column-canvas-fixed-offset",
+          `${inset}px`,
+        );
+      }
+    }
     stickyLayerHeight = root.clientHeight;
-    stickyLayerInlineOffset = finitePixels(rootStyle.paddingInlineStart);
+    stickyLayerInlineOffset = scrollViewport
+      ? 0
+      : finitePixels(rootStyle.paddingInlineStart);
     stickyLayerBlockOffset = finitePixels(rootStyle.paddingBlockStart);
-    if (resolvedDisplayMode === "compact") return;
+    if (resolvedDisplayMode === "compact") {
+      for (const registration of stickyRegistrations)
+        registration.setStuck(false);
+      return;
+    }
 
     const registrations = new Map(
       stickyRegistrations.map((registration) => [
@@ -322,22 +414,14 @@
     const configuredWidth =
       stickyWidthProbe?.getBoundingClientRect().width ?? 0;
     const active: ResolvedStickyColumn[] = [];
-    let stackOffset = 0;
-    let withinLeadingStack = true;
-
-    for (const column of columns) {
-      const requested = column.dataset.sticky === "true";
-      if (!withinLeadingStack || !requested) {
-        withinLeadingStack = false;
-        continue;
-      }
-
-      const id = column.dataset.columnId;
+    for (const slot of pinning.slots) {
+      if (slot.kind === "fixed") continue;
+      const column = columns.find(
+        (column) => column.dataset.columnId === slot.id,
+      )!;
+      const id = slot.id;
       const registration = id ? registrations.get(id) : undefined;
-      if (!id || !registration) {
-        withinLeadingStack = false;
-        continue;
-      }
+      if (!registration) break;
 
       const width = column.getBoundingClientRect().width;
       const collapsed = column.dataset.uiPart === "collapsed-column";
@@ -349,18 +433,61 @@
         registration,
         element: column,
         width: railWidth,
-        offset: stackOffset,
+        offset: slot.offset,
       });
-      stackOffset += railWidth;
     }
 
     activeStickyColumns = active;
+    // Measuring natural widths can briefly shrink the scrollable extent and
+    // clamp the viewport. Restore its position after the responsive allocation.
     if (pairResizeScrollLeft !== null) {
       root.scrollLeft = pairResizeScrollLeft;
+    } else if (resolvedDisplayMode === "wide") {
+      root.scrollLeft = previousScrollLeft;
     }
     scheduleStickyStateUpdate();
   }
 
+  function measurePinning(
+    columns: HTMLElement[],
+    root: HTMLElement,
+    style: CSSStyleDeclaration,
+    gap: number,
+  ): PinningLayout {
+    return resolveColumnCanvasPinning(
+      columns.map((column) => {
+        const columnStyle = getComputedStyle(column);
+        const id = columnId(column);
+        return {
+          id: id ?? "",
+          kind: !id
+            ? null
+            : column.dataset.fixed === "true"
+              ? "fixed"
+              : column.dataset.sticky === "true"
+                ? "sticky"
+                : null,
+          expanded: column.dataset.uiPart === "column",
+          width: column.getBoundingClientRect().width,
+          minWidth: id ? rootController.getMinWidth(id) : 0,
+          marginStart: finitePixels(columnStyle.marginInlineStart),
+          marginEnd: finitePixels(columnStyle.marginInlineEnd),
+        };
+      }),
+      {
+        mode: resolvedDisplayMode,
+        availableWidth:
+          root.clientWidth -
+          finitePixels(style.paddingInlineStart) -
+          finitePixels(style.paddingInlineEnd),
+        gap,
+        railWidth: stickyWidthProbe?.getBoundingClientRect().width ?? 0,
+        contextWidth: wideContextWidthProbe?.getBoundingClientRect().width ?? 0,
+        activePairLeadingId,
+      },
+    );
+  }
+
   function inlineStartPosition(root: HTMLElement, column: HTMLElement): number {
     const rootRect = root.getBoundingClientRect();
     const columnRect = column.getBoundingClientRect();
@@ -370,13 +497,24 @@
   }
 
   function updateStickyStates(): void {
-    const root = ref;
+    if (disposed) return;
+    const root = scrollingRoot;
     if (!root || resolvedDisplayMode === "compact") {
       stuckStickyColumns = [];
+      for (const registration of stickyRegistrations)
+        registration.setStuck(false);
       return;
     }
 
     const hasScrolled = Math.abs(root.scrollLeft) > 1;
+    for (const column of activeFixedColumns) {
+      column.element.dataset.fixedState =
+        hasScrolled &&
+        inlineStartPosition(root, column.element) <=
+          column.offset + root.clientLeft + 1
+          ? "stuck"
+          : "flowing";
+    }
     const stuckColumns: ResolvedStickyColumn[] = [];
     for (const column of activeStickyColumns) {
       const activationEdge =
@@ -388,6 +526,11 @@
       if (isStuck) stuckColumns.push(column);
     }
     stuckStickyColumns = stuckColumns;
+    for (const registration of stickyRegistrations) {
+      registration.setStuck(
+        stuckColumns.some((column) => column.id === registration.id),
+      );
+    }
   }
 
   function inlineEndPosition(root: HTMLElement, column: HTMLElement): number {
@@ -399,11 +542,13 @@
   }
 
   function requestStickyLayout(): void {
+    if (disposed) return;
     void tick().then(() => {
+      if (disposed) return;
       if (stickyLayoutFrame !== null) cancelAnimationFrame(stickyLayoutFrame);
       stickyLayoutFrame = requestAnimationFrame(() => {
         stickyLayoutFrame = null;
-        syncStickyLayout();
+        if (!disposed) syncStickyLayout();
       });
     });
   }
@@ -424,10 +569,33 @@
     };
   }
 
+  const stickyRailInteractions: Action<
+    HTMLElement,
+    ColumnCanvasStickyColumnRegistration
+  > = (node, initial) => {
+    let registration = initial;
+    const enter = (event: PointerEvent) => registration.pointerEnter(event);
+    const leave = (event: PointerEvent) => registration.pointerLeave(event);
+    const press = (event: PointerEvent) => registration.pointerDown(event);
+    node.addEventListener("pointerenter", enter);
+    node.addEventListener("pointerleave", leave);
+    node.addEventListener("pointerdown", press);
+    return {
+      update(next) {
+        registration = next;
+      },
+      destroy() {
+        node.removeEventListener("pointerenter", enter);
+        node.removeEventListener("pointerleave", leave);
+        node.removeEventListener("pointerdown", press);
+      },
+    };
+  };
+
   function returnToStickyColumn(column: ResolvedStickyColumn): void {
-    const root = ref;
+    const root = scrollingRoot;
     if (!root) return;
-    const rootStyle = getComputedStyle(root);
+    const rootStyle = getComputedStyle(ref ?? root);
     const paddingStart = finitePixels(rootStyle.paddingInlineStart);
     const currentStart = inlineStartPosition(root, column.element);
     const desiredStart = paddingStart + column.offset;
@@ -464,7 +632,7 @@
       clearTimeout(stickyWheelRoutingTimer);
       stickyWheelRoutingTimer = null;
     }
-    ref?.removeAttribute("data-wheel-routing");
+    scrollingRoot?.removeAttribute("data-wheel-routing");
   }
 
   function startStickyWheelRouting(
@@ -480,14 +648,21 @@
       root.removeAttribute("data-wheel-routing");
       const target =
         adjacentSnapPoint(root, direction) ??
-        (direction > 0 ? Math.max(0, root.scrollWidth - root.clientWidth) : 0);
+        (direction > 0
+          ? inlineScrollSign(root) *
+            Math.max(0, root.scrollWidth - root.clientWidth)
+          : 0);
       if (Math.abs(target - root.scrollLeft) <= 2) return;
       animateWheelToSnapPoint(root, target, direction);
     }, 240);
   }
 
   function columnSnapPoints(root: HTMLElement): number[] {
-    return visibleColumns().map((column) => targetScrollLeft(root, column));
+    return scrollingColumns().map((column) => targetScrollLeft(root, column));
+  }
+
+  function inlineScrollSign(root: HTMLElement): number {
+    return getComputedStyle(root).direction === "rtl" ? -1 : 1;
   }
 
   function adjacentSnapPoint(
@@ -495,11 +670,13 @@
     direction: WheelDirection,
   ): number | undefined {
     const points = columnSnapPoints(root);
+    const sign = inlineScrollSign(root);
+    const current = root.scrollLeft * sign;
     if (direction > 0) {
-      return points.find((point) => point > root.scrollLeft + 2);
+      return points.find((point) => point * sign > current + 2);
     }
     for (let index = points.length - 1; index >= 0; index -= 1) {
-      if (points[index] < root.scrollLeft - 2) return points[index];
+      if (points[index] * sign < current - 2) return points[index];
     }
     return undefined;
   }
@@ -550,11 +727,11 @@
   }
 
   function alignActivePair(): void {
-    const root = ref;
+    const root = scrollingRoot;
     if (!root) return;
     cancelWheelAnimation();
     if (resolvedDisplayMode === "fixed") return;
-    const columns = visibleColumns();
+    const columns = scrollingColumns();
     const target =
       resolvedDisplayMode === "wide"
         ? activePair(columns).at(-1)
@@ -580,12 +757,15 @@
   }
 
   function requestPairAlignment(activateDeepest: boolean): void {
+    if (disposed) return;
     alignmentShouldActivateDeepest =
       alignmentShouldActivateDeepest || activateDeepest;
     void tick().then(() => {
+      if (disposed) return;
       if (alignmentFrame !== null) cancelAnimationFrame(alignmentFrame);
       alignmentFrame = requestAnimationFrame(() => {
         alignmentFrame = null;
+        if (disposed) return;
         const shouldActivateDeepest = alignmentShouldActivateDeepest;
         alignmentShouldActivateDeepest = false;
         const columns = visibleColumns();
@@ -606,6 +786,12 @@
     if (resolvedDisplayMode !== "wide") {
       return { kind: "column" };
     }
+    if (
+      activeFixedColumns.some(
+        (column) => column.element.dataset.columnId === requestedColumnId,
+      )
+    )
+      return { kind: "column" };
     if (
       activePairResize &&
       requestedColumnId === activePairResize.leadingColumnId
@@ -613,7 +799,7 @@
       return activePairResize;
     }
 
-    const expanded = visibleColumns().filter(
+    const expanded = scrollingColumns().filter(
       (column) => column.dataset.uiPart === "column",
     );
     const leadingIndex = expanded.findIndex(
@@ -646,9 +832,17 @@
   function activateResizePair(columnId: string): ColumnCanvasResizeBehavior {
     const behavior = getResizeBehavior(columnId);
     if (resolvedDisplayMode !== "wide" || behavior.kind !== "pair") {
+      if (
+        behavior.kind === "column" &&
+        activeFixedColumns.some(
+          (column) => column.element.dataset.columnId === columnId,
+        ) &&
+        pairResizeScrollLeft === null
+      )
+        pairResizeScrollLeft = scrollingRoot?.scrollLeft ?? null;
       return behavior;
     }
-    const root = ref;
+    const root = scrollingRoot;
     if (root && pairResizeScrollLeft === null) {
       pairResizeScrollLeft = root.scrollLeft;
     }
@@ -662,17 +856,11 @@
   }
 
   function finishResizePair(): void {
-    const root = ref;
-    if (!root || pairResizeScrollLeft === null) return;
-    void tick().then(() => {
-      requestAnimationFrame(() => {
-        if (pairResizeScrollLeft !== null) {
-          root.scrollLeft = pairResizeScrollLeft;
-        }
-        pairResizeScrollLeft = null;
-        scheduleStickyStateUpdate();
-      });
-    });
+    if (!scrollingRoot || pairResizeScrollLeft === null) return;
+    // Layout measurements preserve the viewport themselves. Once the gesture
+    // ends, a later native scroll owns its position even before queued layout.
+    pairResizeScrollLeft = null;
+    scheduleStickyStateUpdate();
   }
 
   setColumnCanvasContext({
@@ -686,6 +874,16 @@
     activateResizePair,
     finishResizePair,
     registerStickyColumn,
+    get viewport() {
+      return scrollingRoot;
+    },
+    getPreviewRail(id) {
+      return (
+        ref?.querySelector<HTMLElement>(
+          `[data-sticky-for="${CSS.escape(id)}"]`,
+        ) ?? null
+      );
+    },
   });
 
   $effect(() => {
@@ -711,16 +909,19 @@
     requestAlignment();
   });
 
-  $effect(() => {
-    // Pair ratios are controller-owned durable state and may be changed by a
-    // consumer without a pointer event from this mounted canvas.
+  // Compare the durable ratios before scheduling layout. Transient previews
+  // also update controller runtime state, but must never remeasure the canvas.
+  const pairSplitIdentity = $derived(
     rootController
       .getLayout()
       .pairSplits.map(
         (split) =>
           `${split.leadingColumnId}\u0000${split.trailingColumnId}\u0000${split.leadingFraction}`,
       )
-      .join("\u0001");
+      .join("\u0001"),
+  );
+  $effect(() => {
+    pairSplitIdentity;
     requestStickyLayout();
   });
 
@@ -730,8 +931,8 @@
     requestAlignment();
   });
 
-  onMount(() => {
-    const root = ref;
+  $effect(() => {
+    const root = scrollingRoot;
     if (!root) return;
 
     const measure = (): void => {
@@ -747,7 +948,9 @@
         requestStickyLayout();
       }
     };
-    measure();
+    // Only the viewport owns this observer; its measured state must not
+    // resubscribe the effect and replace a pending responsive alignment.
+    untrack(measure);
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(root);
@@ -755,6 +958,7 @@
   });
 
   onDestroy(() => {
+    disposed = true;
     if (alignmentFrame !== null) cancelAnimationFrame(alignmentFrame);
     if (stickyLayoutFrame !== null) cancelAnimationFrame(stickyLayoutFrame);
     if (stickyStateFrame !== null) cancelAnimationFrame(stickyStateFrame);
@@ -763,6 +967,17 @@
     pairResizeScrollLeft = null;
   });
 
+  $effect(() => {
+    const viewport = scrollViewport;
+    if (!viewport) return;
+    const onScroll = (event: Event) =>
+      handleScroll(
+        event as UIEvent & { currentTarget: EventTarget & HTMLDivElement },
+      );
+    viewport.addEventListener("scroll", onScroll);
+    return () => viewport.removeEventListener("scroll", onScroll);
+  });
+
   function handleScroll(
     event: UIEvent & { currentTarget: EventTarget & HTMLDivElement },
   ): void {
@@ -781,7 +996,7 @@
       // Only descendants belong to the canvas arbitration boundary. A
       // scrollable ancestor outside the root must not mask available
       // horizontal movement.
-      if (target === ref) break;
+      if (target === scrollingRoot) break;
       if (!(target instanceof HTMLElement)) continue;
       const overflow = getComputedStyle(target).overflowY;
       if (
@@ -799,7 +1014,9 @@
   ): void {
     onwheel?.(event);
     const routesUnusedVerticalWheel =
-      resolvedDisplayMode === "compact" || activeStickyColumns.length > 0;
+      resolvedDisplayMode === "compact" ||
+      activeStickyColumns.length > 0 ||
+      activeFixedColumns.length > 0;
     if (event.defaultPrevented || !routesUnusedVerticalWheel) return;
     if (
       Math.abs(event.deltaY) <= Math.abs(event.deltaX) ||
@@ -816,13 +1033,13 @@
       return;
     }
 
-    const root = ref;
+    const root = scrollingRoot;
     if (!root) return;
     const maxScrollLeft = Math.max(0, root.scrollWidth - root.clientWidth);
+    const sign = inlineScrollSign(root);
+    const current = root.scrollLeft * sign;
     const canMove =
-      event.deltaY < 0
-        ? root.scrollLeft > 1
-        : root.scrollLeft < maxScrollLeft - 1;
+      event.deltaY < 0 ? current > 1 : current < maxScrollLeft - 1;
     if (!canMove) return;
 
     if (resolvedDisplayMode !== "compact") {
@@ -832,10 +1049,12 @@
         const direction: WheelDirection = event.deltaY < 0 ? -1 : 1;
         startStickyWheelRouting(root, direction);
       }
-      root.scrollLeft = Math.min(
-        maxScrollLeft,
-        Math.max(0, root.scrollLeft + event.deltaY * STICKY_WHEEL_DELTA_SCALE),
-      );
+      root.scrollLeft =
+        sign *
+        Math.min(
+          maxScrollLeft,
+          Math.max(0, current + event.deltaY * STICKY_WHEEL_DELTA_SCALE),
+        );
       return;
     }
 
@@ -852,7 +1071,7 @@
   }
 
   function navigateSnapPoint(key: string): boolean {
-    const root = ref;
+    const root = scrollingRoot;
     if (!root) return false;
     const points = columnSnapPoints(root);
     if (points.length === 0) return false;
@@ -860,16 +1079,10 @@
     let target: number | undefined;
     if (key === "Home") target = points[0];
     if (key === "End") target = points.at(-1);
-    if (key === "ArrowRight") {
-      target = points.find((point) => point > root.scrollLeft + 2);
-    }
-    if (key === "ArrowLeft") {
-      for (let index = points.length - 1; index >= 0; index -= 1) {
-        if (points[index] < root.scrollLeft - 2) {
-          target = points[index];
-          break;
-        }
-      }
+    if (key === "ArrowRight" || key === "ArrowLeft") {
+      const direction =
+        (key === "ArrowRight" ? 1 : -1) * inlineScrollSign(root);
+      target = adjacentSnapPoint(root, direction as WheelDirection);
     }
     if (target === undefined) return false;
 
@@ -915,6 +1128,7 @@
   data-ui-part="root"
   data-layout-ready={rootController.layoutReady ? "true" : "false"}
   data-display-mode={resolvedDisplayMode}
+  data-external-scroll={scrollViewport ? "true" : undefined}
   onkeydown={handleKeydown}
   onscroll={handleScroll}
   onwheel={handleWheel}
@@ -931,6 +1145,8 @@
         role="navigation"
         data-ui-component="column-canvas"
         data-ui-part="sticky-stack"
+        data-mixed={activeFixedColumns.length ? "true" : undefined}
+        style:--ui-column-canvas-sticky-stack-width={`${Math.max(...stuckStickyColumns.map((column) => column.offset + column.width))}px`}
         aria-label="Previous columns"
       >
         {#each stuckStickyColumns as column (column.id)}
@@ -939,7 +1155,9 @@
             data-ui-part="sticky-rail"
             data-sticky-for={column.id}
             data-sticky-state="stuck"
+            use:stickyRailInteractions={column.registration}
             style:--ui-column-canvas-sticky-rail-width={`${column.width}px`}
+            style:--ui-column-canvas-sticky-rail-offset={`${column.offset}px`}
           >
             <Button
               variant="outline"
@@ -947,7 +1165,10 @@
               data-ui-part="sticky-return"
               aria-label={`Return to ${column.registration.title} column`}
               title={`Return to ${column.registration.title}`}
-              onclick={() => returnToStickyColumn(column)}
+              onclick={() => {
+                rootController.dismissPreview(column.id);
+                returnToStickyColumn(column);
+              }}
             >
               {#if column.registration.rail}
                 {@render column.registration.rail()}
@@ -988,10 +1209,12 @@
       <div
         data-ui-component="column-canvas"
         data-ui-part="trailing-spacer"
-        aria-hidden="true"
+        aria-hidden={trailingSpacer ? undefined : true}
         style:width={`${trailingSpacerWidth}px`}
         style:min-width={`${trailingSpacerWidth}px`}
-      ></div>
+      >
+        {@render trailingSpacer?.()}
+      </div>
     {/if}
   </div>
 </div>