@streamscloud/kit 0.45.0 → 0.47.0

package/dist/ui/document-tabs/cmp.document-tabs.svelte.d.ts

@@ -0,0 +1,80 @@
+import type { DocumentTab, DocumentTabsOverflow } from './types';
+declare function $$render<T>(): {
+    props: {
+        value: T;
+        /** `NoInfer<T>` ensures `T` narrows from `value` only; inline tab literals type-check against the value's T without widening — no `as const` needed at callsites. */
+        tabs: DocumentTab<NoInfer<T>>[];
+        /** `'scroll'` makes the strip its own scroll container with edge fades and chevrons. Leave it `'visible'` when the container already scrolls the strip. @default 'visible' */
+        overflow?: DocumentTabsOverflow;
+        /** Equality for object T values. @default reference equality (`===`) */
+        compare?: (a: T, b: T) => boolean;
+        on?: {
+            change?: (value: T) => void;
+            /** Providing this renders a close button on every tab that doesn't opt out with `closable: false`. */
+            close?: (value: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * DocumentTabs — browser-style tabs for an editor: the active tab is taller than its neighbours and
+ * sits flush on the container's bottom rule, so it reads as continuous with the panel below while the
+ * inactive ones stay behind that line. Each tab carries an optional icon, an unsaved-changes dot, a
+ * `tone` for a tab of a different kind (a live preview), and its own `closable` opt-out. A closable or
+ * dirty tab reserves the trailing slot permanently: the dot sits there at rest, the close button takes
+ * its place on hover, and a tab's width never depends on which of them is showing. Arrow keys / Home /
+ * End move between tabs (roving tabindex), Delete closes the focused one.
+ *
+ * `overflow="scroll"` gives the strip its own scroll container with edge fades, chevrons and
+ * wheel-to-scroll. Leave it `'visible'` where the container already scrolls the strip — two nested
+ * scrollers fight each other.
+ *
+ * The active tab dips `--sc-kit--document-tabs--baseline-overlap` below the strip to cover the bottom
+ * rule of the bar it sits in. A container that clips (any `overflow` other than `visible`) has to
+ * leave that last pixel inside its own clip region, or the overlap is cut off.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--document-tabs--height` | Inactive tab height | `29px` |
+ * | `--sc-kit--document-tabs--height--active` | Active tab height | `32px` |
+ * | `--sc-kit--document-tabs--padding-inline` | Tab horizontal padding — the same in both states, so activating a tab shifts nothing sideways | `10px` |
+ * | `--sc-kit--document-tabs--min-width` | Minimum tab width | `112px` |
+ * | `--sc-kit--document-tabs--max-width` | Maximum tab width — the label ellipsizes past it | `200px` |
+ * | `--sc-kit--document-tabs--gap` | Gap between tabs | `1px` |
+ * | `--sc-kit--document-tabs--tab--gap` | Gap between a tab's icon, label and trailing slot | `8px` |
+ * | `--sc-kit--document-tabs--radius` | Top corner radius | `--sc-kit--radius--sm` |
+ * | `--sc-kit--document-tabs--border-width` | Tab border width | `1px` |
+ * | `--sc-kit--document-tabs--border-color` | Tab border color | `--sc-kit--color--border` |
+ * | `--sc-kit--document-tabs--baseline-overlap` | How far the active tab dips below the strip to cover its container's bottom rule | `1px` |
+ * | `--sc-kit--document-tabs--background` | Inactive tab background | `--sc-kit--color--bg--app` |
+ * | `--sc-kit--document-tabs--background--active` | Active tab background — matches the pane below | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--document-tabs--background--hover` | Inactive tab hover background | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--document-tabs--color` | Inactive tab label color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--document-tabs--color--active` | Active tab label color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--document-tabs--color--hover` | Inactive tab hover label color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--document-tabs--color--disabled` | Disabled tab label color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--document-tabs--font-size` | Label font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--document-tabs--font-weight` | Label font weight | `--sc-kit--font-weight--regular` |
+ * | `--sc-kit--document-tabs--scroll-btn--background` | Fade behind the overflow chevrons | `--sc-kit--color--bg--panel` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/document-tabs/document-tab.svelte

@@ -0,0 +1,210 @@
+<script lang="ts" generics="T">import { IconSlot } from '../icon';
+import { DocumentTabsLocalization } from './document-tabs-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+const { tab, active, closable, on } = $props();
+const localization = new DocumentTabsLocalization();
+const ariaLabel = $derived(tab.dirty ? `${tab.label} — ${localization.unsavedChanges}` : undefined);
+const handleClick = () => {
+    if (tab.disabled || active) {
+        return;
+    }
+    on?.select?.(tab.value);
+};
+const handleClose = () => {
+    on?.close?.(tab.value);
+};
+</script>
+
+<div
+  class="document-tab"
+  class:document-tab--active={active}
+  class:document-tab--disabled={tab.disabled}
+  class:document-tab--hoverable={!active && !tab.disabled}
+  class:document-tab--dirty={tab.dirty}
+  class:document-tab--closable={closable}
+  class:document-tab--tone-gray={tab.tone === 'gray'}
+  class:document-tab--tone-blue={tab.tone === 'blue'}
+  class:document-tab--tone-green={tab.tone === 'green'}
+  class:document-tab--tone-red={tab.tone === 'red'}
+  class:document-tab--tone-orange={tab.tone === 'orange'}
+  class:document-tab--tone-teal={tab.tone === 'teal'}
+  role="presentation">
+  <button
+    type="button"
+    class="document-tab__button"
+    role="tab"
+    aria-selected={active}
+    aria-label={ariaLabel}
+    tabindex={active ? 0 : -1}
+    disabled={tab.disabled}
+    title={tab.tooltip}
+    onclick={handleClick}
+    onkeydown={on?.keydown}>
+    {#if tab.icon}
+      <span class="document-tab__icon"><IconSlot icon={tab.icon} fallbacks={{ size: 'sm' }} /></span>
+    {/if}
+    <span class="document-tab__label">{tab.label}</span>
+  </button>
+  {#if tab.dirty || closable}
+    <span class="document-tab__trailing">
+      <span class="document-tab__dot" class:document-tab__dot--hidden={!tab.dirty}></span>
+      {#if closable}
+        <button type="button" class="document-tab__close" tabindex={active ? 0 : -1} aria-label={localization.close} onclick={handleClose}>
+          <IconSlot icon={IconDismiss} fallbacks={{ size: 'sm' }} />
+        </button>
+      {/if}
+    </span>
+  {/if}
+</div>
+
+<style>.document-tab {
+  --_document-tab--height: var(--sc-kit--document-tabs--height, 1.8125rem);
+  --_document-tab--padding-inline: var(--sc-kit--document-tabs--padding-inline, 0.625rem);
+  --_document-tab--min-width: var(--sc-kit--document-tabs--min-width, 7rem);
+  --_document-tab--max-width: var(--sc-kit--document-tabs--max-width, 12.5rem);
+  --_document-tab--gap: var(--sc-kit--document-tabs--tab--gap, 0.5rem);
+  --_document-tab--radius: var(--sc-kit--document-tabs--radius, var(--sc-kit--radius--sm));
+  --_document-tab--border-width: var(--sc-kit--document-tabs--border-width, 1px);
+  --_document-tab--border-color: var(--sc-kit--document-tabs--border-color, var(--sc-kit--color--border));
+  --_document-tab--baseline-overlap: var(--sc-kit--document-tabs--baseline-overlap, 1px);
+  --_document-tab--background: var(--_document-tab--tone-background, var(--sc-kit--document-tabs--background, var(--sc-kit--color--bg--app)));
+  --_document-tab--background-hover: var(
+    --_document-tab--tone-background-hover,
+    var(--sc-kit--document-tabs--background--hover, var(--sc-kit--color--bg--hover))
+  );
+  --_document-tab--color: var(--sc-kit--document-tabs--color, var(--sc-kit--color--text--secondary));
+  --_document-tab--font-size: var(--sc-kit--document-tabs--font-size, var(--sc-kit--font-size--sm));
+  --_document-tab--font-weight: var(--sc-kit--document-tabs--font-weight, var(--sc-kit--font-weight--regular));
+  --_document-tab--cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_document-tab--gap);
+  block-size: var(--_document-tab--height);
+  min-inline-size: var(--_document-tab--min-width);
+  max-inline-size: var(--_document-tab--max-width);
+  flex-shrink: 0;
+  padding-inline: var(--_document-tab--padding-inline);
+  margin-block-end: var(--_document-tab--baseline-overlap);
+  background: var(--_document-tab--background);
+  border: var(--_document-tab--border-width) solid var(--_document-tab--border-color);
+  border-block-end: 0;
+  border-start-start-radius: var(--_document-tab--radius);
+  border-start-end-radius: var(--_document-tab--radius);
+  color: var(--_document-tab--color);
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.document-tab--tone-gray {
+  --_document-tab--tone-background: var(--sc-kit--tone--gray--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--gray--fg) 10%, var(--sc-kit--tone--gray--bg));
+}
+.document-tab--tone-blue {
+  --_document-tab--tone-background: var(--sc-kit--tone--blue--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--blue--fg) 10%, var(--sc-kit--tone--blue--bg));
+}
+.document-tab--tone-green {
+  --_document-tab--tone-background: var(--sc-kit--tone--green--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--green--fg) 10%, var(--sc-kit--tone--green--bg));
+}
+.document-tab--tone-red {
+  --_document-tab--tone-background: var(--sc-kit--tone--red--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--red--fg) 10%, var(--sc-kit--tone--red--bg));
+}
+.document-tab--tone-orange {
+  --_document-tab--tone-background: var(--sc-kit--tone--orange--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--orange--fg) 10%, var(--sc-kit--tone--orange--bg));
+}
+.document-tab--tone-teal {
+  --_document-tab--tone-background: var(--sc-kit--tone--teal--bg);
+  --_document-tab--tone-background-hover: color-mix(in srgb, var(--sc-kit--tone--teal--fg) 10%, var(--sc-kit--tone--teal--bg));
+}
+.document-tab--active {
+  --_document-tab--height: var(--sc-kit--document-tabs--height--active, 2rem);
+  --_document-tab--background: var(--_document-tab--tone-background, var(--sc-kit--document-tabs--background--active, var(--sc-kit--color--bg--panel)));
+  --_document-tab--color: var(--sc-kit--document-tabs--color--active, var(--sc-kit--color--text--primary));
+  margin-block-end: 0;
+}
+.document-tab--hoverable:hover {
+  --_document-tab--background: var(--_document-tab--background-hover);
+  --_document-tab--color: var(--sc-kit--document-tabs--color--hover, var(--sc-kit--color--text--primary));
+}
+.document-tab--disabled {
+  --_document-tab--color: var(--sc-kit--document-tabs--color--disabled, var(--sc-kit--color--text--muted));
+  --_document-tab--cursor: default;
+}
+.document-tab--closable:hover, .document-tab--closable:focus-within {
+  --_document-tab--dot-visibility: hidden;
+  --_document-tab--close-display: inline-flex;
+}
+.document-tab__button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_document-tab--gap);
+  flex: 1;
+  min-inline-size: 0;
+  block-size: 100%;
+  padding: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--_document-tab--font-size);
+  font-weight: var(--_document-tab--font-weight);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: var(--_document-tab--cursor);
+}
+.document-tab__button:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+}
+.document-tab__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.document-tab__label {
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.document-tab__trailing {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+}
+.document-tab__dot {
+  display: inline-flex;
+  visibility: var(--_document-tab--dot-visibility, visible);
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  background: currentcolor;
+  border-radius: 50%;
+}
+.document-tab__dot--hidden {
+  visibility: hidden;
+}
+.document-tab__close {
+  display: var(--_document-tab--close-display, none);
+  position: absolute;
+  inset: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 1px;
+  background: none;
+  border: none;
+  border-radius: var(--sc-kit--radius--sm);
+  color: var(--sc-kit--color--text--secondary);
+  cursor: pointer;
+  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.document-tab__close:hover {
+  background: var(--sc-kit--color--bg--hover);
+  color: var(--sc-kit--color--text--primary);
+}
+.document-tab__close:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 1px;
+}</style>

package/dist/ui/document-tabs/document-tab.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { DocumentTab } from './types';
+declare function $$render<T>(): {
+    props: {
+        tab: DocumentTab<T>;
+        active: boolean;
+        closable: boolean;
+        on?: {
+            select?: (value: T) => void;
+            close?: (value: T) => void;
+            keydown?: (event: KeyboardEvent) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DocumentTab: $$IsomorphicComponent;
+type DocumentTab<T> = InstanceType<typeof DocumentTab<T>>;
+export default DocumentTab;

package/dist/ui/document-tabs/document-tabs-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class DocumentTabsLocalization {
+    get close(): string;
+    get unsavedChanges(): string;
+    get scrollBack(): string;
+    get scrollForward(): string;
+}

package/dist/ui/document-tabs/document-tabs-localization.js

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    close: {
+        en: 'Close tab',
+        no: 'Lukk fane'
+    },
+    unsavedChanges: {
+        en: 'unsaved changes',
+        no: 'ulagrede endringer'
+    },
+    scrollBack: {
+        en: 'Scroll back',
+        no: 'Rull tilbake'
+    },
+    scrollForward: {
+        en: 'Scroll forward',
+        no: 'Rull fremover'
+    }
+};
+export class DocumentTabsLocalization {
+    get close() {
+        return loc.close[AppLocale.current];
+    }
+    get unsavedChanges() {
+        return loc.unsavedChanges[AppLocale.current];
+    }
+    get scrollBack() {
+        return loc.scrollBack[AppLocale.current];
+    }
+    get scrollForward() {
+        return loc.scrollForward[AppLocale.current];
+    }
+}

package/dist/ui/document-tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DocumentTabs } from './cmp.document-tabs.svelte';
+export { DOCUMENT_TAB_TONES } from './types';
+export type { DocumentTab, DocumentTabsOverflow, DocumentTabTone } from './types';

package/dist/ui/document-tabs/index.js

@@ -0,0 +1,2 @@
+export { default as DocumentTabs } from './cmp.document-tabs.svelte';
+export { DOCUMENT_TAB_TONES } from './types';

package/dist/ui/document-tabs/types.d.ts

@@ -0,0 +1,20 @@
+import type { IconProp } from '../icon';
+export declare const DOCUMENT_TAB_TONES: readonly ["gray", "blue", "green", "red", "orange", "teal"];
+export type DocumentTabTone = (typeof DOCUMENT_TAB_TONES)[number];
+export type DocumentTabsOverflow = 'visible' | 'scroll';
+export type DocumentTab<TValue = unknown> = {
+    value: TValue;
+    label: string;
+    /** Leading glyph — a file-type mark, typically. */
+    icon?: IconProp;
+    /** Unsaved changes: a dot in the trailing slot, which the close button takes over on hover. */
+    dirty?: boolean;
+    /** Set `false` to keep one tab open while its neighbours stay closable. @default true (whenever `on.close` is provided) */
+    closable?: boolean;
+    /** Tints the tab so it reads as a different kind of thing from the documents beside it — a live preview, a diff, a terminal. */
+    tone?: DocumentTabTone;
+    /** Full text for a label that truncates — the complete file path, typically. */
+    tooltip?: string;
+    /** Non-interactive — click does nothing. */
+    disabled?: boolean;
+};

package/dist/ui/document-tabs/types.js

@@ -0,0 +1 @@
+export const DOCUMENT_TAB_TONES = ['gray', 'blue', 'green', 'red', 'orange', 'teal'];

package/dist/ui/page-layout/cmp.page-panel-sidebars.svelte

@@ -1,9 +1,25 @@
 <script lang="ts">import { slideHorizontally, transitionDuration } from '../../core/transitions';
 import PagePanel from './cmp.page-panel.svelte';
 import { untrack } from 'svelte';
-const { panelState, children, sidebarLeft, sidebarRight, sidebarLeftIsValid = true, sidebarRightIsValid = true, title, actionsLeft, actionsCenter, actionsRight, balanceHeaderCenter = false, toggle } = $props();
+const { panelState, children, sidebarLeft, sidebarRight, sidebarLeftIsValid = true, sidebarRightIsValid = true, title, actionsLeft, actionsCenter, actionsRight, balanceHeaderCenter = false, alignActionsLeftToContent = false, toggle } = $props();
 let leftPanel = $state(null);
 let rightPanel = $state(null);
+let sidebarLeftWidth = $state(0);
+const sidebarLeftMounted = (node) => {
+    const measure = () => {
+        const divider = parseFloat(getComputedStyle(node).borderInlineEndWidth) || 0;
+        sidebarLeftWidth = Math.max(0, node.offsetWidth - divider);
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    measure();
+    return {
+        destroy: () => {
+            observer.disconnect();
+            sidebarLeftWidth = 0;
+        }
+    };
+};
 $effect(() => {
     const hasLeft = !!sidebarLeft;
     untrack(() => {
@@ -69,10 +85,14 @@ $effect(() => {
   actionsCenter={actionsCenter}
   actionsRight={actionsRight}
   balanceHeaderCenter={balanceHeaderCenter}
-  collapseButtons={collapseButtons}>
+  collapseButtons={collapseButtons}
+  --_--page-panel--content-start="{alignActionsLeftToContent ? sidebarLeftWidth : 0}px">
   <div class="page-panel-sidebars">
     {#if sidebarLeft && !leftCollapsed}
-      <div class="page-panel-sidebars__sidebar page-panel-sidebars__sidebar--left" transition:slideHorizontally|local={{ duration: transitionDuration.slow }}>
+      <div
+        class="page-panel-sidebars__sidebar page-panel-sidebars__sidebar--left"
+        use:sidebarLeftMounted
+        transition:slideHorizontally|local={{ duration: transitionDuration.slow }}>
         {@render sidebarLeft()}
       </div>
     {/if}
@@ -97,6 +117,12 @@ Pass a `SidebarsToggle` instance as `toggle` to drive an external "collapse both
 top-bar button) without `bind:this` or a local collapsed flag — read `toggleBoth` / `allCollapsed`
 off that same instance.
 
+`alignActionsLeftToContent` starts the header's scrolling left track at the content column rather
+than right after the collapse button: whatever sits in `actionsLeft` begins exactly where the
+content pane begins, and follows that edge as the sidebar resizes, collapses, or isn't there at all.
+The track starts on the sidebar's divider rather than after it, so a bordered child lands on that
+line instead of doubling it. The collapse button stays put outside that track.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

package/dist/ui/page-layout/cmp.page-panel-sidebars.svelte.d.ts

@@ -14,6 +14,8 @@ type Props = {
     actionsRight?: Snippet;
     /** Lay the inner panel header out as a 3-column grid so `actionsCenter` is centered against the panel width. @default false */
     balanceHeaderCenter?: boolean;
+    /** Start the header's left track at the content column instead of right after the collapse button, so `actionsLeft` begins where the content pane begins and follows the sidebar as it resizes or collapses. @default false */
+    alignActionsLeftToContent?: boolean;
     /** Shared collapse target for an external "collapse both sidebars" control (e.g. `PageLayout`'s `editorControls.panelsToggle`). */
     toggle?: SidebarsToggle;
 };
@@ -26,6 +28,12 @@ type Props = {
  * top-bar button) without `bind:this` or a local collapsed flag — read `toggleBoth` / `allCollapsed`
  * off that same instance.
  *
+ * `alignActionsLeftToContent` starts the header's scrolling left track at the content column rather
+ * than right after the collapse button: whatever sits in `actionsLeft` begins exactly where the
+ * content pane begins, and follows that edge as the sidebar resizes, collapses, or isn't there at all.
+ * The track starts on the sidebar's divider rather than after it, so a bordered child lands on that
+ * line instead of doubling it. The collapse button stays put outside that track.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

package/dist/ui/page-layout/cmp.page-panel.svelte

@@ -145,44 +145,50 @@ $effect(() => {
         {:else}
           {#if balanceHeaderCenter || leftCollapseIds.length > 0 || title || actionsLeft}
             <div class="page-panel__header-left" class:page-panel__header-left--balanced={balanceHeaderCenter}>
-              {#if canScrollHeaderLeftBack}
-                <button
-                  type="button"
-                  class="page-panel__header-scroll-btn page-panel__header-scroll-btn--back"
-                  onclick={scrollHeaderLeftBack}
-                  aria-label={localization.scrollBack}>
-                  <Icon src={IconChevronLeft} size="sm" />
-                </button>
+              {#if leftCollapseIds.length > 0}
+                <div class="page-panel__header-collapse">
+                  {#each leftCollapseIds as cid (cid)}
+                    <PanelCollapseButton panelState={panelState} panelId={cid} />
+                  {/each}
+                </div>
               {/if}
-              <div
-                class="page-panel__header-left-track"
-                class:page-panel__header-left-track--mask-back={canScrollHeaderLeftBack && !canScrollHeaderLeftForward}
-                class:page-panel__header-left-track--mask-forward={canScrollHeaderLeftForward && !canScrollHeaderLeftBack}
-                class:page-panel__header-left-track--mask-both={canScrollHeaderLeftBack && canScrollHeaderLeftForward}
-                use:headerLeftTrackMounted
-                use:horizontalWheelScroll
-                onscroll={(e) => updateHeaderLeftScrollState(e.currentTarget)}>
-                {#each leftCollapseIds as cid (cid)}
-                  <PanelCollapseButton panelState={panelState} panelId={cid} />
-                {/each}
-                {#if typeof title === 'function'}
-                  {@render title()}
-                {:else if title}
-                  <span class="page-panel__title">{title}</span>
+              <div class="page-panel__header-track-wrap">
+                {#if canScrollHeaderLeftBack}
+                  <button
+                    type="button"
+                    class="page-panel__header-scroll-btn page-panel__header-scroll-btn--back"
+                    onclick={scrollHeaderLeftBack}
+                    aria-label={localization.scrollBack}>
+                    <Icon src={IconChevronLeft} size="sm" />
+                  </button>
                 {/if}
-                {#if actionsLeft}
-                  {@render actionsLeft()}
+                <div
+                  class="page-panel__header-left-track"
+                  class:page-panel__header-left-track--mask-back={canScrollHeaderLeftBack && !canScrollHeaderLeftForward}
+                  class:page-panel__header-left-track--mask-forward={canScrollHeaderLeftForward && !canScrollHeaderLeftBack}
+                  class:page-panel__header-left-track--mask-both={canScrollHeaderLeftBack && canScrollHeaderLeftForward}
+                  use:headerLeftTrackMounted
+                  use:horizontalWheelScroll
+                  onscroll={(e) => updateHeaderLeftScrollState(e.currentTarget)}>
+                  {#if typeof title === 'function'}
+                    {@render title()}
+                  {:else if title}
+                    <span class="page-panel__title">{title}</span>
+                  {/if}
+                  {#if actionsLeft}
+                    {@render actionsLeft()}
+                  {/if}
+                </div>
+                {#if canScrollHeaderLeftForward}
+                  <button
+                    type="button"
+                    class="page-panel__header-scroll-btn page-panel__header-scroll-btn--forward"
+                    onclick={scrollHeaderLeftForward}
+                    aria-label={localization.scrollForward}>
+                    <Icon src={IconChevronRight} size="sm" />
+                  </button>
                 {/if}
               </div>
-              {#if canScrollHeaderLeftForward}
-                <button
-                  type="button"
-                  class="page-panel__header-scroll-btn page-panel__header-scroll-btn--forward"
-                  onclick={scrollHeaderLeftForward}
-                  aria-label={localization.scrollForward}>
-                  <Icon src={IconChevronRight} size="sm" />
-                </button>
-              {/if}
             </div>
           {/if}
           {#if balanceHeaderCenter || actionsCenter}
@@ -274,6 +280,7 @@ to min / max; Enter / Space toggle collapsed.
   --_page-panel--footer-justify: var(--sc-kit--page-panel--footer--justify, flex-end);
   --_page-panel--header-background: var(--sc-kit--page-panel--header--background, var(--sc-kit--color--bg--panel));
   --_page-panel--header-padding-inline: var(--sc-kit--page-panel--header--padding-inline, 1.5rem);
+  --_page-panel--content-start: var(--_--page-panel--content-start, 0px);
   --_page-panel--title-font-size: var(--sc-kit--page-panel--title--font-size, 0.875rem);
   --_page-panel--resizer-color: var(--sc-kit--page-panel--resizer-color, var(--sc-kit--color--border));
   --_page-panel--height: var(--_--page-layout--panel--height, 100%);
@@ -334,7 +341,8 @@ to min / max; Enter / Space toggle collapsed.
   font-size: var(--_page-panel--title-font-size);
 }
 .page-panel__header-left {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(min-content, max(0px, var(--_page-panel--content-start) - var(--_page-panel--header-padding-inline))) minmax(0, 1fr);
   align-self: stretch;
   align-items: center;
   min-width: 0;
@@ -346,12 +354,29 @@ to min / max; Enter / Space toggle collapsed.
 .page-panel__header-left:hover {
   --_scroll-btn-opacity: 1;
 }
+.page-panel__header-collapse {
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+  padding-inline-end: 1rem;
+}
+.page-panel__header-track-wrap {
+  grid-column: 2;
+  position: relative;
+  display: flex;
+  align-self: stretch;
+  align-items: stretch;
+  min-width: 0;
+}
 .page-panel__header-left-track {
   --_mask-size: 1.5rem;
   display: flex;
+  align-self: stretch;
   align-items: center;
   gap: 1rem;
   min-width: 0;
+  padding-block-end: 1px;
+  margin-block-end: -1px;
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -369,13 +394,12 @@ to min / max; Enter / Space toggle collapsed.
 }
 .page-panel__header-scroll-btn {
   position: absolute;
-  top: 0;
-  bottom: 0;
+  inset-block: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0.25rem;
+  padding-inline: 0.25rem;
   background: transparent;
   backdrop-filter: blur(2px);
   border: none;
@@ -388,13 +412,13 @@ to min / max; Enter / Space toggle collapsed.
   color: var(--sc-kit--color--text--primary);
 }
 .page-panel__header-scroll-btn--back {
-  left: 0;
-  padding-right: 0.625rem;
+  inset-inline-start: 0;
+  padding-inline-end: 0.625rem;
   background: linear-gradient(to right, var(--_page-panel--header-background) 60%, transparent);
 }
 .page-panel__header-scroll-btn--forward {
-  right: 0;
-  padding-left: 0.625rem;
+  inset-inline-end: 0;
+  padding-inline-start: 0.625rem;
   background: linear-gradient(to left, var(--_page-panel--header-background) 60%, transparent);
 }
 .page-panel__header-center {