@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -0,0 +1,379 @@
+<script lang="ts">import { slideHorizontally, transitionDuration } from '../../core/transitions';
+import PanelCollapseButton from './cmp.panel-collapse-button.svelte';
+import { PageLayoutLocalization } from './page-layout-localization';
+import { untrack } from 'svelte';
+const { panelState, children, id, header, footer, title, actionsLeft, actionsCenter, actionsRight, collapseButtons, hideHeader = false, balanceHeaderCenter = false, resizing = null, borders = [], on } = $props();
+const localization = new PageLayoutLocalization();
+const isFlex = untrack(() => !resizing);
+let panelRef = $state(undefined);
+const { id: panelId, entry } = untrack(() => panelState.register({
+    id,
+    initialWidth: resizing?.initialWidth ?? null,
+    collapseDirection: resizing?.collapseDirection ?? 'left'
+}));
+const canResize = $derived(resizing && [resizing.initialWidth, resizing.minWidth, resizing.maxWidth].filter((v) => v !== undefined).length >= 2);
+const widthCss = $derived(entry.width !== null ? `${entry.width}px` : undefined);
+const leftCollapseIds = $derived((collapseButtons ?? []).filter((cid) => panelState.get(cid)?.collapseDirection === 'left'));
+const rightCollapseIds = $derived((collapseButtons ?? []).filter((cid) => panelState.get(cid)?.collapseDirection === 'right'));
+$effect(() => {
+    const collapsed = entry.collapsed;
+    untrack(() => {
+        on?.collapse?.(collapsed);
+    });
+});
+let activePointerId = null;
+const handlePointerMove = (event) => {
+    if (!resizing || !panelRef || event.pointerId !== activePointerId) {
+        return;
+    }
+    const { initialWidth, minWidth, maxWidth, collapseDirection } = resizing;
+    const lower = minWidth ?? initialWidth ?? 0;
+    const upper = maxWidth ?? initialWidth ?? Infinity;
+    const rect = panelRef.getBoundingClientRect();
+    const newWidth = collapseDirection === 'left' ? event.clientX - rect.left : rect.right - event.clientX;
+    entry.setWidth(Math.max(lower, Math.min(upper, newWidth)));
+};
+const handlePointerUp = (event) => {
+    if (event.pointerId !== activePointerId) {
+        return;
+    }
+    activePointerId = null;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    window.removeEventListener('pointermove', handlePointerMove);
+    window.removeEventListener('pointerup', handlePointerUp);
+    window.removeEventListener('pointercancel', handlePointerUp);
+};
+const handleResizerPointerDown = (event) => {
+    activePointerId = event.pointerId;
+    document.body.style.cursor = 'ew-resize';
+    document.body.style.userSelect = 'none';
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+    window.addEventListener('pointercancel', handlePointerUp);
+};
+const handleResizerKeydown = (event) => {
+    if (!resizing || entry.width === null) {
+        return;
+    }
+    const { initialWidth, minWidth, maxWidth } = resizing;
+    const lower = minWidth ?? initialWidth ?? 0;
+    const upper = maxWidth ?? initialWidth ?? Infinity;
+    const step = event.shiftKey ? 32 : 8;
+    let delta;
+    switch (event.key) {
+        case 'ArrowLeft':
+            delta = resizing.collapseDirection === 'left' ? -step : step;
+            break;
+        case 'ArrowRight':
+            delta = resizing.collapseDirection === 'left' ? step : -step;
+            break;
+        case 'Home':
+            entry.setWidth(lower);
+            event.preventDefault();
+            return;
+        case 'End':
+            entry.setWidth(Math.min(upper, 9999));
+            event.preventDefault();
+            return;
+        case 'Enter':
+        case ' ':
+            entry.toggleCollapsed();
+            event.preventDefault();
+            return;
+        default:
+            return;
+    }
+    entry.setWidth(Math.max(lower, Math.min(upper, entry.width + delta)));
+    event.preventDefault();
+};
+$effect(() => {
+    return () => {
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+        window.removeEventListener('pointercancel', handlePointerUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        panelState.unregister(panelId, entry);
+    };
+});
+</script>
+
+{#if !entry.collapsed}
+  <div
+    class="page-panel"
+    bind:this={panelRef}
+    transition:slideHorizontally|local={{ duration: transitionDuration.slow }}
+    style:--_page-panel--calculated-width={widthCss}
+    class:page-panel--flex={isFlex}
+    class:page-panel--border-top={borders.includes('top')}
+    class:page-panel--border-right={borders.includes('right')}
+    class:page-panel--border-bottom={borders.includes('bottom')}
+    class:page-panel--border-left={borders.includes('left')}>
+    {#if !hideHeader}
+      <div class="page-panel__header" class:page-panel__header--balanced={balanceHeaderCenter}>
+        {#if header}
+          {@render header()}
+        {:else}
+          {#if balanceHeaderCenter || leftCollapseIds.length > 0 || title || actionsLeft}
+            <div class="page-panel__header-left" class:page-panel__header-left--balanced={balanceHeaderCenter}>
+              {#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>
+              {/if}
+              {#if actionsLeft}
+                {@render actionsLeft()}
+              {/if}
+            </div>
+          {/if}
+          {#if balanceHeaderCenter || actionsCenter}
+            <div class="page-panel__header-center">
+              {#if actionsCenter}
+                {@render actionsCenter()}
+              {/if}
+            </div>
+          {/if}
+          {#if balanceHeaderCenter || actionsRight || rightCollapseIds.length > 0}
+            <div class="page-panel__header-right" class:page-panel__header-right--balanced={balanceHeaderCenter}>
+              {#if actionsRight}
+                {@render actionsRight()}
+              {/if}
+              {#each rightCollapseIds as cid (cid)}
+                <PanelCollapseButton panelState={panelState} panelId={cid} />
+              {/each}
+            </div>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+
+    <div class="page-panel__content">
+      {@render children()}
+    </div>
+
+    {#if footer}
+      <div class="page-panel__footer">
+        {@render footer()}
+      </div>
+    {/if}
+
+    {#if resizing && canResize}
+      <!-- svelte-ignore a11y_no_interactive_element_to_noninteractive_role -->
+      <button
+        type="button"
+        class="page-panel__resizer"
+        class:page-panel__resizer--left={resizing.collapseDirection === 'right'}
+        class:page-panel__resizer--right={resizing.collapseDirection === 'left'}
+        onpointerdown={handleResizerPointerDown}
+        onkeydown={handleResizerKeydown}
+        role="separator"
+        aria-orientation="vertical"
+        aria-label={localization.resizePanel}
+        aria-valuemin={resizing.minWidth ?? resizing.initialWidth ?? 0}
+        aria-valuemax={resizing.maxWidth ?? resizing.initialWidth ?? 9999}
+        aria-valuenow={entry.width ?? 0}>
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+PagePanel — a panel within `PagePanels`. Renders a fixed-height header and a scrollable content
+area. Supports drag resizing (pointer + keyboard), external collapse via the shared `PanelState`
+instance, and configurable borders. Collapse uses the `slideHorizontally` transition.
+
+Pass the same `panelState` instance to every panel + collapse button that should coordinate.
+
+### Header modes
+- `title` (string | Snippet) — renders in the left section; `actionsLeft` / `actionsRight` and
+  `collapseButtons` are placed alongside.
+- `header` (Snippet) — replaces the entire header content.
+- No props — an empty header bar is rendered unless `hideHeader` is set.
+
+### Resize keyboard
+Focus the resizer (Tab), then: ArrowLeft / ArrowRight resize by 8px (Shift = 32px); Home / End snap
+to min / max; Enter / Space toggle collapsed.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--page-panel--border-color` | Border + header divider color | `--sc-kit--color--border` |
+| `--sc-kit--page-panel--content--background` | Content background | `transparent` |
+| `--sc-kit--page-panel--footer--border-width` | Footer top border width | `0` |
+| `--sc-kit--page-panel--footer--justify` | Footer `justify-content` | `flex-end` |
+| `--sc-kit--page-panel--header--background` | Header background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--page-panel--header--padding-inline` | Header + footer inline padding | `24px` |
+| `--sc-kit--page-panel--title--font-size` | Title font size | `14px` |
+| `--sc-kit--page-panel--resizer-color` | Resizer handle hover color | `--sc-kit--color--border` |
+-->
+<style>.page-panel {
+  --_page-panel--border-color: var(--sc-kit--page-panel--border-color, var(--sc-kit--color--border));
+  --_page-panel--calculated-width: initial;
+  --_page-panel--content-background: var(--sc-kit--page-panel--content--background, transparent);
+  --_page-panel--footer-border-width: var(--sc-kit--page-panel--footer--border-width, 0);
+  --_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--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%);
+  --_page-panel--header-position: var(--_--page-layout--panel--header--position, static);
+  --_page-panel--header-top: var(--_--page-layout--panel--header--top, auto);
+  --_page-panel--header-z-index: var(--_--page-layout--panel--header--z-index, auto);
+  --_page-panel--content-overflow-y: var(--_--page-layout--panel--content--overflow-y, auto);
+  display: flex;
+  flex-direction: column;
+  height: var(--_page-panel--height);
+  flex-shrink: 0;
+  position: relative;
+  width: var(--_page-panel--calculated-width, auto);
+}
+.page-panel--flex {
+  flex: 1;
+  min-width: 0;
+}
+.page-panel--border-top {
+  border-top: 1px solid var(--_page-panel--border-color);
+}
+.page-panel--border-right {
+  border-right: 1px solid var(--_page-panel--border-color);
+}
+.page-panel--border-bottom {
+  border-bottom: 1px solid var(--_page-panel--border-color);
+}
+.page-panel--border-left {
+  border-left: 1px solid var(--_page-panel--border-color);
+}
+.page-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2.875rem;
+  min-height: 2.875rem;
+  width: 100%;
+  padding: 0 var(--_page-panel--header-padding-inline);
+  background: var(--_page-panel--header-background);
+  border-bottom: 1px solid var(--_page-panel--border-color);
+  gap: 1rem;
+  white-space: nowrap;
+  position: var(--_page-panel--header-position);
+  top: var(--_page-panel--header-top);
+  z-index: var(--_page-panel--header-z-index);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.page-panel__header :global([contenteditable]) {
+  user-select: text;
+}
+.page-panel__header--balanced {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(auto, 1fr);
+  justify-content: initial;
+}
+.page-panel__title {
+  font-size: var(--_page-panel--title-font-size);
+}
+.page-panel__header-left {
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  gap: 1rem;
+  min-width: 0;
+  overflow-x: clip;
+}
+.page-panel__header-left--balanced {
+  justify-self: start;
+}
+.page-panel__header-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.page-panel__header-right {
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  gap: 1rem;
+  flex-shrink: 0;
+}
+.page-panel__header-right--balanced {
+  justify-self: end;
+  margin-left: 0;
+}
+.page-panel__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: var(--_page-panel--content-overflow-y);
+  overflow-x: clip;
+  background: var(--_page-panel--content-background);
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.page-panel__content:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.page-panel__content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.page-panel__content::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.page-panel__content::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .page-panel__content {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
+}
+.page-panel__footer {
+  display: flex;
+  justify-content: var(--_page-panel--footer-justify);
+  padding: 0.875rem var(--_page-panel--header-padding-inline);
+  border-top: var(--_page-panel--footer-border-width) solid var(--_page-panel--border-color);
+}
+.page-panel__resizer {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0.625rem;
+  background: transparent;
+  cursor: ew-resize;
+  border: 0 solid var(--_page-panel--resizer-color);
+  padding: 0;
+}
+.page-panel__resizer:focus-visible {
+  outline: none;
+  background: var(--sc-kit--color--border--focus);
+  opacity: 0.4;
+}
+.page-panel__resizer--left {
+  left: 0;
+}
+.page-panel__resizer--left:hover {
+  border-left-width: 3px;
+}
+.page-panel__resizer--right {
+  right: 0;
+}
+.page-panel__resizer--right:hover {
+  border-right-width: 3px;
+}</style>

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

@@ -0,0 +1,60 @@
+import type { PanelState } from './panel-state.svelte';
+import type { PanelBorder, PanelResizingSettings } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** The shared `PanelState` instance this panel registers with. */
+    panelState: PanelState;
+    children: Snippet;
+    /** Explicit registry id. Auto-assigned when omitted. Set it when another component needs to target this panel via `collapseButtons` / `PanelCollapseButton`. */
+    id?: string;
+    /** Full header override — when set, `title` / `actions*` / `collapseButtons` are ignored. */
+    header?: Snippet;
+    footer?: Snippet;
+    title?: string | Snippet;
+    actionsLeft?: Snippet;
+    actionsCenter?: Snippet;
+    actionsRight?: Snippet;
+    /** IDs of sibling panels to render collapse toggles for (placed by the target's `collapseDirection`). */
+    collapseButtons?: string[];
+    hideHeader?: boolean;
+    /** Lay the header out as a 3-column grid so `actionsCenter` is centered against the panel width regardless of the left / right column widths. @default false */
+    balanceHeaderCenter?: boolean;
+    /** Resize / collapse config. `null` ⇒ the panel is `flex: 1` (no resizing). @default null */
+    resizing?: PanelResizingSettings | null;
+    borders?: PanelBorder[];
+    on?: {
+        collapse?: (collapsed: boolean) => void;
+    };
+};
+/**
+ * PagePanel — a panel within `PagePanels`. Renders a fixed-height header and a scrollable content
+ * area. Supports drag resizing (pointer + keyboard), external collapse via the shared `PanelState`
+ * instance, and configurable borders. Collapse uses the `slideHorizontally` transition.
+ *
+ * Pass the same `panelState` instance to every panel + collapse button that should coordinate.
+ *
+ * ### Header modes
+ * - `title` (string | Snippet) — renders in the left section; `actionsLeft` / `actionsRight` and
+ * `collapseButtons` are placed alongside.
+ * - `header` (Snippet) — replaces the entire header content.
+ * - No props — an empty header bar is rendered unless `hideHeader` is set.
+ *
+ * ### Resize keyboard
+ * Focus the resizer (Tab), then: ArrowLeft / ArrowRight resize by 8px (Shift = 32px); Home / End snap
+ * to min / max; Enter / Space toggle collapsed.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--page-panel--border-color` | Border + header divider color | `--sc-kit--color--border` |
+ * | `--sc-kit--page-panel--content--background` | Content background | `transparent` |
+ * | `--sc-kit--page-panel--footer--border-width` | Footer top border width | `0` |
+ * | `--sc-kit--page-panel--footer--justify` | Footer `justify-content` | `flex-end` |
+ * | `--sc-kit--page-panel--header--background` | Header background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--page-panel--header--padding-inline` | Header + footer inline padding | `24px` |
+ * | `--sc-kit--page-panel--title--font-size` | Title font size | `14px` |
+ * | `--sc-kit--page-panel--resizer-color` | Resizer handle hover color | `--sc-kit--color--border` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,21 @@
+<script lang="ts">const { children } = $props();
+export {};
+</script>
+
+<div class="page-panels">
+  {@render children()}
+</div>
+
+<!--
+@component
+PagePanels — flex-row container for `PagePanel` children. Place inside `PageLayout` to create a
+multi-panel layout where each panel manages its own width individually.
+-->
+<style>.page-panels {
+  --_page-panels--height: var(--_--page-layout--panels--height, 100%);
+  --_page-panels--min-height: var(--_--page-layout--panels--min-height, 0);
+  display: flex;
+  flex: 1;
+  height: var(--_page-panels--height);
+  min-height: var(--_page-panels--min-height);
+}</style>

package/dist/ui/{form-group/cmp.form-group-label.svelte.d.ts → page-layout/cmp.page-panels.svelte.d.ts}

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 type Props = {
-    /** Enable flex layout for label + tooltip icon */
-    withTooltip?: boolean;
     children: Snippet;
 };
+/**
+ * PagePanels — flex-row container for `PagePanel` children. Place inside `PageLayout` to create a
+ * multi-panel layout where each panel manages its own width individually.
+ */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -0,0 +1,64 @@
+<script lang="ts">import { Icon } from '../icon';
+import { PageLayoutLocalization } from './page-layout-localization';
+import IconPanelLeft from '@fluentui/svg-icons/icons/panel_left_20_regular.svg?raw';
+const { panelState, panelId } = $props();
+const localization = new PageLayoutLocalization();
+const entry = $derived(panelState.get(panelId));
+const flipped = $derived(entry ? (entry.collapseDirection === 'left') !== entry.collapsed : false);
+const handleClick = () => {
+    entry?.toggleCollapsed();
+};
+</script>
+
+{#if entry}
+  <button
+    type="button"
+    class="panel-collapse-button"
+    class:panel-collapse-button--invalid={!entry.isValid}
+    style:transform={flipped ? 'scaleX(-1)' : undefined}
+    onclick={handleClick}
+    aria-label={localization.togglePanel}
+    aria-pressed={entry.collapsed}>
+    <Icon src={IconPanelLeft} />
+  </button>
+{/if}
+
+<!--
+@component
+PanelCollapseButton — bare icon button that toggles the collapsed state of a `PagePanel` by its ID.
+The icon flips horizontally based on the target panel's `collapseDirection` and current collapsed
+state. Renders nothing if the target panel isn't registered. Typically rendered automatically via
+`PagePanel`'s `collapseButtons` prop rather than placed by hand.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--panel-collapse-button--color` | Idle icon color | `--sc-kit--color--text--muted` |
+| `--sc-kit--panel-collapse-button--color--hover` | Hover icon color | `--sc-kit--color--text--primary` |
+| `--sc-kit--panel-collapse-button--color--invalid` | Color when the target panel is invalid | `--sc-kit--color--danger` |
+-->
+<style>.panel-collapse-button {
+  --sc-kit--icon--size: 1rem;
+  --_panel-collapse-button--color: var(--sc-kit--panel-collapse-button--color, var(--sc-kit--color--text--muted));
+  --_panel-collapse-button--color-hover: var(--sc-kit--panel-collapse-button--color--hover, var(--sc-kit--color--text--primary));
+  --_panel-collapse-button--color-invalid: var(--sc-kit--panel-collapse-button--color--invalid, var(--sc-kit--color--danger));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--_panel-collapse-button--color);
+}
+.panel-collapse-button:hover {
+  color: var(--_panel-collapse-button--color-hover);
+}
+.panel-collapse-button:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+  border-radius: var(--sc-kit--radius--sm);
+}
+.panel-collapse-button--invalid {
+  color: var(--_panel-collapse-button--color-invalid);
+}</style>

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

@@ -0,0 +1,23 @@
+import type { PanelState } from './panel-state.svelte';
+type Props = {
+    /** The shared `PanelState` instance that owns the target panel. */
+    panelState: PanelState;
+    /** ID of the panel this button toggles. */
+    panelId: string;
+};
+/**
+ * PanelCollapseButton — bare icon button that toggles the collapsed state of a `PagePanel` by its ID.
+ * The icon flips horizontally based on the target panel's `collapseDirection` and current collapsed
+ * state. Renders nothing if the target panel isn't registered. Typically rendered automatically via
+ * `PagePanel`'s `collapseButtons` prop rather than placed by hand.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--panel-collapse-button--color` | Idle icon color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--panel-collapse-button--color--hover` | Hover icon color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--panel-collapse-button--color--invalid` | Color when the target panel is invalid | `--sc-kit--color--danger` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,21 @@
+<script lang="ts">const { children } = $props();
+export {};
+</script>
+
+<div class="panel-content">
+  {@render children()}
+</div>
+
+<!--
+@component
+PanelContent — default padded wrapper for the body of a `PagePanel`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--panel-content--padding` | Body padding | `16px` |
+-->
+<style>.panel-content {
+  --_panel-content--padding: var(--sc-kit--panel-content--padding, 1rem);
+  padding: var(--_panel-content--padding);
+}</style>

package/dist/ui/{page-toolbar/cmp.toolbar-button-item.svelte.d.ts → page-layout/cmp.panel-content.svelte.d.ts}

@@ -1,17 +1,14 @@
 import type { Snippet } from 'svelte';
 type Props = {
     children: Snippet;
-    on?: {
-        click?: () => void;
-    };
 };
 /**
- * A simple button item for toolbar panels. Renders children as clickable text.
+ * PanelContent — default padded wrapper for the body of a `PagePanel`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--toolbar-button-item--color` | Text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--panel-content--padding` | Body padding | `16px` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -0,0 +1,8 @@
+export { default as PageLayout } from './cmp.page-layout.svelte';
+export { default as PagePanel } from './cmp.page-panel.svelte';
+export { default as PagePanelSidebars } from './cmp.page-panel-sidebars.svelte';
+export { default as PagePanels } from './cmp.page-panels.svelte';
+export { default as PanelCollapseButton } from './cmp.panel-collapse-button.svelte';
+export { default as PanelContent } from './cmp.panel-content.svelte';
+export { PanelEntry, PanelState } from './panel-state.svelte';
+export type { PanelBorder, PanelResizingSettings } from './types';

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

@@ -0,0 +1,7 @@
+export { default as PageLayout } from './cmp.page-layout.svelte';
+export { default as PagePanel } from './cmp.page-panel.svelte';
+export { default as PagePanelSidebars } from './cmp.page-panel-sidebars.svelte';
+export { default as PagePanels } from './cmp.page-panels.svelte';
+export { default as PanelCollapseButton } from './cmp.panel-collapse-button.svelte';
+export { default as PanelContent } from './cmp.panel-content.svelte';
+export { PanelEntry, PanelState } from './panel-state.svelte';

package/dist/ui/page-layout/page-layout-localization.d.ts

@@ -0,0 +1,5 @@
+export declare class PageLayoutLocalization {
+    get resizePanel(): string;
+    get togglePanel(): string;
+    get toggleNavigation(): string;
+}

package/dist/ui/page-layout/page-layout-localization.js

@@ -0,0 +1,26 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    resizePanel: {
+        en: 'Resize panel',
+        no: 'Endre størrelse på panel'
+    },
+    togglePanel: {
+        en: 'Toggle panel',
+        no: 'Veksle panel'
+    },
+    toggleNavigation: {
+        en: 'Toggle navigation',
+        no: 'Veksle navigasjon'
+    }
+};
+export class PageLayoutLocalization {
+    get resizePanel() {
+        return loc.resizePanel[AppLocale.current];
+    }
+    get togglePanel() {
+        return loc.togglePanel[AppLocale.current];
+    }
+    get toggleNavigation() {
+        return loc.toggleNavigation[AppLocale.current];
+    }
+}