@streamscloud/kit 0.2.42-1778522742378 → 0.9.0

package/dist/ui/option-pill/cmp.option-pill.svelte.d.ts

@@ -0,0 +1,73 @@
+import type { OptionPillOption } from './types';
+declare function $$render<T>(): {
+    props: ({
+        options: OptionPillOption<T>[];
+        /** Disable the whole group. */
+        disabled?: boolean;
+        /** Custom equality comparator for non-primitive values (objects with `id`, etc.). @default (a, b) => a === b */
+        compare?: (a: T, b: T) => boolean;
+    } & {
+        /** Single-select mode. */
+        type: "single";
+        value: T | null;
+        on?: {
+            change?: (value: T | null) => void;
+        };
+    }) | ({
+        options: OptionPillOption<T>[];
+        /** Disable the whole group. */
+        disabled?: boolean;
+        /** Custom equality comparator for non-primitive values (objects with `id`, etc.). @default (a, b) => a === b */
+        compare?: (a: T, b: T) => boolean;
+    } & {
+        /** Multi-select mode. */
+        type: "multi";
+        value: T[];
+        on?: {
+            change?: (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']>;
+}
+/**
+ * OptionPill — pill-shaped selection group with a thumbnail (icon, image, color swatch, avatar) on the
+ * left and a label on the right. Discriminated by `type`: pass `type="single"` with `value: T | null`,
+ * or `type="multi"` with `value: T[]`. Provide `compare` for non-primitive values.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--option-pill--gap` | Gap between pills | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--option-pill--height` | Pill height | `32px` |
+ * | `--sc-kit--option-pill--background` | Pill background (unselected) | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--option-pill--background--hover` | Pill background on hover | `var(--sc-kit--color--bg--hover)` |
+ * | `--sc-kit--option-pill--border-color` | Pill border (unselected) | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--option-pill--border-color--hover` | Pill border on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--option-pill--label--color` | Label color (unselected) | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--option-pill--selected--background` | Selected pill background | `var(--sc-kit--color--accent--soft)` |
+ * | `--sc-kit--option-pill--selected--border-color` | Selected pill border | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--option-pill--selected--color` | Selected label + thumb color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--option-pill--thumb--size` | Thumbnail width (height fills the pill) | `28px` |
+ * | `--sc-kit--option-pill--thumb--background` | Thumbnail background | `var(--sc-kit--color--bg--active)` |
+ * | `--sc-kit--option-pill--thumb--color` | Thumbnail color | `var(--sc-kit--color--text--muted)` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/option-pill/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OptionPill } from './cmp.option-pill.svelte';
+export type { OptionPillOption } from './types';

package/dist/ui/option-pill/index.js

@@ -0,0 +1 @@
+export { default as OptionPill } from './cmp.option-pill.svelte';

package/dist/ui/option-pill/types.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export type OptionPillOption<T> = {
+    value: T;
+    label: string;
+    /** Thumbnail content — icon, image, color swatch, avatar, anything. */
+    thumb?: Snippet;
+    disabled?: boolean;
+};

package/dist/ui/option-pill/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/page-header/cmp.page-header.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">let { title, description, crumb, actions, tabs } = $props();
+export {};
+</script>
+
+<div class="page-header">
+  {#if crumb}<div class="page-header__crumb">{@render crumb()}</div>{/if}
+  <div class="page-header__row">
+    <div class="page-header__text">
+      <div class="page-header__title">{title}</div>
+      {#if description}<div class="page-header__desc">{description}</div>{/if}
+    </div>
+    {#if actions}<div class="page-header__actions">{@render actions()}</div>{/if}
+  </div>
+  {#if tabs}<div class="page-header__tabs">{@render tabs()}</div>{/if}
+</div>
+
+<!--
+@component
+PageHeader — page title with optional description, a crumb slot above (typically a Breadcrumb),
+an actions slot to the right (typically buttons), and a tabs slot below (typically a Tabs strip).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--page-header--margin-bottom` | Space below the whole header | `var(--sc-kit--space--10)` |
+| `--sc-kit--page-header--crumb--margin-bottom` | Space below the crumb | `var(--sc-kit--space--3)` |
+| `--sc-kit--page-header--row--gap` | Gap between text and actions | `var(--sc-kit--space--6)` |
+| `--sc-kit--page-header--title--font-size` | Title font size | `var(--sc-kit--font-size--2xl)` |
+| `--sc-kit--page-header--title--font-weight` | Title font weight | `var(--sc-kit--font-weight--semibold)` |
+| `--sc-kit--page-header--title--color` | Title color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--page-header--description--color` | Description color | `var(--sc-kit--color--text--secondary)` |
+| `--sc-kit--page-header--description--max-width` | Description max width | `45rem` |
+| `--sc-kit--page-header--actions--gap` | Gap between action items | `var(--sc-kit--space--2)` |
+| `--sc-kit--page-header--tabs--margin-top` | Space above the tabs strip | `var(--sc-kit--space--4)` |
+-->
+<style>.page-header {
+  width: 100%;
+  margin-bottom: var(--sc-kit--page-header--margin-bottom, var(--sc-kit--space--10));
+}
+.page-header__crumb {
+  margin-bottom: var(--sc-kit--page-header--crumb--margin-bottom, var(--sc-kit--space--3));
+}
+.page-header__row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sc-kit--page-header--row--gap, var(--sc-kit--space--6));
+}
+.page-header__text {
+  flex: 1;
+  min-width: 0;
+}
+.page-header__title {
+  font-size: var(--sc-kit--page-header--title--font-size, var(--sc-kit--font-size--2xl));
+  font-weight: var(--sc-kit--page-header--title--font-weight, var(--sc-kit--font-weight--semibold));
+  letter-spacing: var(--sc-kit--letter-spacing--tight);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--sc-kit--page-header--title--color, var(--sc-kit--color--text--primary));
+}
+.page-header__desc {
+  margin-top: var(--sc-kit--space--2);
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--leading--relaxed);
+  color: var(--sc-kit--page-header--description--color, var(--sc-kit--color--text--secondary));
+  max-width: var(--sc-kit--page-header--description--max-width, 45rem);
+}
+.page-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-kit--page-header--actions--gap, var(--sc-kit--space--2));
+  flex-shrink: 0;
+}
+.page-header__tabs {
+  margin-top: var(--sc-kit--page-header--tabs--margin-top, var(--sc-kit--space--4));
+}</style>

package/dist/ui/page-header/cmp.page-header.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    description?: string;
+    /** Rendered above the title — typically a Breadcrumb. */
+    crumb?: Snippet;
+    /** Rendered to the right of the title — typically action buttons. */
+    actions?: Snippet;
+    /** Rendered below the header — typically a Tabs strip. */
+    tabs?: Snippet;
+};
+/**
+ * PageHeader — page title with optional description, a crumb slot above (typically a Breadcrumb),
+ * an actions slot to the right (typically buttons), and a tabs slot below (typically a Tabs strip).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--page-header--margin-bottom` | Space below the whole header | `var(--sc-kit--space--10)` |
+ * | `--sc-kit--page-header--crumb--margin-bottom` | Space below the crumb | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--page-header--row--gap` | Gap between text and actions | `var(--sc-kit--space--6)` |
+ * | `--sc-kit--page-header--title--font-size` | Title font size | `var(--sc-kit--font-size--2xl)` |
+ * | `--sc-kit--page-header--title--font-weight` | Title font weight | `var(--sc-kit--font-weight--semibold)` |
+ * | `--sc-kit--page-header--title--color` | Title color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--page-header--description--color` | Description color | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--page-header--description--max-width` | Description max width | `45rem` |
+ * | `--sc-kit--page-header--actions--gap` | Gap between action items | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--page-header--tabs--margin-top` | Space above the tabs strip | `var(--sc-kit--space--4)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-header/index.d.ts

@@ -0,0 +1 @@
+export { default as PageHeader } from './cmp.page-header.svelte';

package/dist/ui/page-header/index.js

@@ -0,0 +1 @@
+export { default as PageHeader } from './cmp.page-header.svelte';

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

@@ -0,0 +1,171 @@
+<script lang="ts">import { Icon } from '../icon';
+import { PageLayoutLocalization } from './page-layout-localization';
+import IconWindow from '@fluentui/svg-icons/icons/window_20_regular.svg?raw';
+const { children, title, actions, windowToggleActive = false, scrollable = false, on } = $props();
+const localization = new PageLayoutLocalization();
+</script>
+
+<div class="page-layout" class:page-layout--scrollable={scrollable}>
+  <div class="page-layout__header">
+    <div class="page-layout__title">
+      {#if typeof title === 'function'}
+        {@render title()}
+      {:else if title}
+        {title}
+      {/if}
+    </div>
+    <div class="page-layout__actions">
+      {#if actions}
+        {@render actions()}
+      {/if}
+      {#if on?.windowToggle}
+        <button
+          type="button"
+          class="page-layout__window-toggle"
+          class:page-layout__window-toggle--active={windowToggleActive}
+          onclick={on.windowToggle}
+          aria-label={localization.toggleNavigation}
+          aria-pressed={windowToggleActive}>
+          <Icon src={IconWindow} />
+        </button>
+      {/if}
+    </div>
+  </div>
+  <div class="page-layout__body">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + optional
+window-toggle button) above a flex-column body that typically contains a `PagePanels` row.
+
+Pass `on.windowToggle` to surface a navigation-toggle button at the header's right edge — wire it to
+whatever sidebar / drawer state your app owns. Omit it to hide the button. Set `scrollable` to let
+the whole page scroll as one document with sticky panel headers.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--page-layout--background` | Page background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--page-layout--header--background` | Header background (inherits page background by default) | `transparent` |
+| `--sc-kit--page-layout--color` | Page text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--page-layout--border-color` | Header divider color | `--sc-kit--color--border` |
+| `--sc-kit--page-layout--title--font-size` | Title font size | `18px` |
+-->
+<style>.page-layout {
+  --_page-layout--background: var(--sc-kit--page-layout--background, var(--sc-kit--color--bg--panel));
+  --_page-layout--header-background: var(--sc-kit--page-layout--header--background, transparent);
+  --_page-layout--color: var(--sc-kit--page-layout--color, var(--sc-kit--color--text--primary));
+  --_page-layout--border-color: var(--sc-kit--page-layout--border-color, var(--sc-kit--color--border));
+  --_page-layout--title-font-size: var(--sc-kit--page-layout--title--font-size, 1.125rem);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100%;
+  background: var(--_page-layout--background);
+  color: var(--_page-layout--color);
+}
+.page-layout__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 4.1875rem;
+  padding: 1.25rem 1.5rem 0.875rem;
+  background: var(--_page-layout--header-background);
+  border-bottom: 1px solid var(--_page-layout--border-color);
+  flex-shrink: 0;
+}
+.page-layout__title {
+  font-size: var(--_page-layout--title-font-size);
+  font-weight: var(--sc-kit--font-weight--semibold);
+}
+.page-layout__actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.page-layout__window-toggle {
+  --sc-kit--icon--size: 1.125rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--sc-kit--radius--sm);
+  color: var(--sc-kit--color--text--muted);
+  cursor: pointer;
+}
+.page-layout__window-toggle:hover {
+  background: var(--sc-kit--color--bg--hover);
+  color: var(--sc-kit--color--text--primary);
+}
+.page-layout__window-toggle--active {
+  background: var(--sc-kit--color--bg--active);
+  color: var(--sc-kit--color--text--primary);
+}
+.page-layout__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: var(--_page-layout--body-overflow, hidden);
+  overflow-y: var(--_page-layout--body-overflow, auto);
+  --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.page-layout__body::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.page-layout__body::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.page-layout__body::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .page-layout__body {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.page-layout--scrollable {
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.page-layout--scrollable::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.page-layout--scrollable::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.page-layout--scrollable::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .page-layout--scrollable {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.page-layout--scrollable {
+  --_page-layout--body-overflow: visible;
+  --_--page-layout--panels--height: auto;
+  --_--page-layout--panels--min-height: 100%;
+  --_--page-layout--panel--height: auto;
+  --_--page-layout--panel--header--position: sticky;
+  --_--page-layout--panel--header--top: 0;
+  --_--page-layout--panel--header--z-index: 1;
+  --_--page-layout--panel--content--overflow-y: visible;
+}</style>

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

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    title?: string | Snippet;
+    actions?: Snippet;
+    /** Visual + ARIA state for the window-toggle button. Set `true` when the navigation it controls is hidden / collapsed — the button gets `aria-pressed` and an active background. @default false */
+    windowToggleActive?: boolean;
+    scrollable?: boolean;
+    on?: {
+        /** When set, a window-toggle button is rendered at the right edge of the header. */
+        windowToggle?: () => void;
+    };
+};
+/**
+ * PageLayout — top-level window chrome. Renders a fixed-height header (title + actions + optional
+ * window-toggle button) above a flex-column body that typically contains a `PagePanels` row.
+ *
+ * Pass `on.windowToggle` to surface a navigation-toggle button at the header's right edge — wire it to
+ * whatever sidebar / drawer state your app owns. Omit it to hide the button. Set `scrollable` to let
+ * the whole page scroll as one document with sticky panel headers.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--page-layout--background` | Page background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--page-layout--header--background` | Header background (inherits page background by default) | `transparent` |
+ * | `--sc-kit--page-layout--color` | Page text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--page-layout--border-color` | Header divider color | `--sc-kit--color--border` |
+ * | `--sc-kit--page-layout--title--font-size` | Title font size | `18px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,164 @@
+<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 } = $props();
+let leftPanel = $state(null);
+let rightPanel = $state(null);
+$effect(() => {
+    const hasLeft = !!sidebarLeft;
+    untrack(() => {
+        if (hasLeft && !leftPanel) {
+            leftPanel = panelState.register({ id: undefined, initialWidth: null, collapseDirection: 'left', isValid: sidebarLeftIsValid });
+        }
+        else if (!hasLeft && leftPanel) {
+            panelState.unregister(leftPanel.id, leftPanel.entry);
+            leftPanel = null;
+        }
+    });
+});
+$effect(() => {
+    const hasRight = !!sidebarRight;
+    untrack(() => {
+        if (hasRight && !rightPanel) {
+            rightPanel = panelState.register({ id: undefined, initialWidth: null, collapseDirection: 'right', isValid: sidebarRightIsValid });
+        }
+        else if (!hasRight && rightPanel) {
+            panelState.unregister(rightPanel.id, rightPanel.entry);
+            rightPanel = null;
+        }
+    });
+});
+const collapseButtons = $derived([leftPanel?.id, rightPanel?.id].filter((id) => id !== null && id !== undefined));
+const leftCollapsed = $derived(leftPanel?.entry.collapsed ?? false);
+const rightCollapsed = $derived(rightPanel?.entry.collapsed ?? false);
+$effect(() => {
+    if (leftPanel) {
+        leftPanel.entry.isValid = sidebarLeftIsValid;
+    }
+});
+$effect(() => {
+    if (rightPanel) {
+        rightPanel.entry.isValid = sidebarRightIsValid;
+    }
+});
+$effect(() => {
+    return () => {
+        untrack(() => {
+            if (leftPanel) {
+                panelState.unregister(leftPanel.id, leftPanel.entry);
+            }
+            if (rightPanel) {
+                panelState.unregister(rightPanel.id, rightPanel.entry);
+            }
+        });
+    };
+});
+</script>
+
+<PagePanel
+  panelState={panelState}
+  title={title}
+  actionsLeft={actionsLeft}
+  actionsCenter={actionsCenter}
+  actionsRight={actionsRight}
+  balanceHeaderCenter={balanceHeaderCenter}
+  collapseButtons={collapseButtons}>
+  <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 }}>
+        {@render sidebarLeft()}
+      </div>
+    {/if}
+    <div class="page-panel-sidebars__main">
+      {@render children()}
+    </div>
+    {#if sidebarRight && !rightCollapsed}
+      <div class="page-panel-sidebars__sidebar page-panel-sidebars__sidebar--right" transition:slideHorizontally|local={{ duration: transitionDuration.slow }}>
+        {@render sidebarRight()}
+      </div>
+    {/if}
+  </div>
+</PagePanel>
+
+<!--
+@component
+PagePanelSidebars — a `PagePanel` whose body has collapsible left / right sidebars. Registers
+fictional left/right panels in the shared `PanelState` so the standard collapse buttons in the
+header can target them. Sidebars slide horizontally on collapse / expand.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--page-panel-sidebars--border-color` | Sidebar divider color | `--sc-kit--color--border` |
+-->
+<style>.page-panel-sidebars {
+  --_page-panel-sidebars--border-color: var(--sc-kit--page-panel-sidebars--border-color, var(--sc-kit--color--border));
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.page-panel-sidebars__sidebar {
+  overflow-y: auto;
+  overflow-x: clip;
+  flex-shrink: 0;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.page-panel-sidebars__sidebar:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.page-panel-sidebars__sidebar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.page-panel-sidebars__sidebar::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.page-panel-sidebars__sidebar::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .page-panel-sidebars__sidebar {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.page-panel-sidebars__sidebar--left {
+  border-right: 1px solid var(--_page-panel-sidebars--border-color);
+}
+.page-panel-sidebars__sidebar--right {
+  border-left: 1px solid var(--_page-panel-sidebars--border-color);
+}
+.page-panel-sidebars__main {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  overflow-x: clip;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.page-panel-sidebars__main:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.page-panel-sidebars__main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.page-panel-sidebars__main::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.page-panel-sidebars__main::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .page-panel-sidebars__main {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}</style>

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

@@ -0,0 +1,30 @@
+import type { PanelState } from './panel-state.svelte';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** The shared `PanelState` instance the inner panel + sidebars register with. */
+    panelState: PanelState;
+    children: Snippet;
+    title?: string | Snippet;
+    sidebarLeft?: Snippet;
+    sidebarRight?: Snippet;
+    sidebarLeftIsValid?: boolean;
+    sidebarRightIsValid?: boolean;
+    actionsLeft?: Snippet;
+    actionsCenter?: Snippet;
+    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;
+};
+/**
+ * PagePanelSidebars — a `PagePanel` whose body has collapsible left / right sidebars. Registers
+ * fictional left/right panels in the shared `PanelState` so the standard collapse buttons in the
+ * header can target them. Sidebars slide horizontally on collapse / expand.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--page-panel-sidebars--border-color` | Sidebar divider color | `--sc-kit--color--border` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;