pane

pane

Classes

ContainerWidth

Defined in: packages/ui/build/pane/is-narrow.svelte.d.ts:27

Observes an element's inline size with a ResizeObserver and exposes reactive narrow / compact flags against the shared container-width thresholds.

This is deliberately container-relative (it measures the element you give it), never viewport-relative — do NOT reach for matchMedia / MediaQuery for pane responsiveness. A component adapts to its own pane, so a table in a half-width pane is "narrow" even on a wide screen.

Usage inside a component (the observe call must live in an $effect so it is torn down):

let el = $state<HTMLElement | null>(null);
const size = new ContainerWidth();
$effect(() => size.observe(el));
// ... size.narrow, size.compact, size.width are reactive

Constructors

Constructor

new ContainerWidth(narrowPx?, compactPx?): ContainerWidth;

Defined in: packages/ui/build/pane/is-narrow.svelte.d.ts:31

Parameters

Parameter	Type
`narrowPx?`	`number`
`compactPx?`	`number`

Returns

ContainerWidth

Properties

observe

observe: (el) => (() => void) | undefined;

Defined in: packages/ui/build/pane/is-narrow.svelte.d.ts:41

Start observing el. Returns a teardown fn — return it from an $effect so the observer disconnects when the element changes or the component unmounts. Safe to call with null/undefined (no-op) and in non-DOM environments (SSR / node tests).

Parameters

Parameter	Type
`el`	`HTMLElement` \| `null` \| `undefined`

Returns

(() => void) | undefined

width

width: number;

Defined in: packages/ui/build/pane/is-narrow.svelte.d.ts:30

Latest measured inline size in px. 0 until the first observation.

Accessors

compact

Get Signature

get compact(): boolean;

Defined in: packages/ui/build/pane/is-narrow.svelte.d.ts:35

True once measured and below the compact threshold.

Returns

boolean

narrow

Get Signature

get narrow(): boolean;

Defined in: packages/ui/build/pane/is-narrow.svelte.d.ts:33

True once measured and below the narrow threshold.

Returns

boolean

PaneCollapseController

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:15

State shared between a row Pane with collapse="switch" | "drawer" and its direct child Panes. The parent creates one and puts it in context; direct children register themselves so the parent can build a segmented control (switch) or so the last child knows it is the drawer target. Grandchildren never see this because every Pane resets the context for its own subtree (see Pane.svelte).

Constructors

Constructor

new PaneCollapseController(mode, isNarrow): PaneCollapseController;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:18

Parameters

Parameter	Type
`mode`	`PaneCollapseMode`
`isNarrow`	() => `boolean`

Returns

PaneCollapseController

Properties

mode

readonly mode: PaneCollapseMode;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:17

Accessors

activeToken

Get Signature

get activeToken(): object | null;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:24

The token of the currently selected child in switch mode (reactive).

Returns

object | null

children

Get Signature

get children(): readonly PaneCollapseChild[];

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:22

Registered direct children in DOM order (reactive).

Returns

readonly PaneCollapseChild[]

isNarrow

Get Signature

get isNarrow(): boolean;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:20

Whether the parent row is currently below the narrow threshold (reactive).

Returns

boolean

Methods

isActive()

isActive(token): boolean;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:30

Parameters

Parameter	Type
`token`	`object`

Returns

boolean

isDrawerTarget()

isDrawerTarget(token): boolean;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:32

The last registered child is the one that collapses into a drawer trigger.

Parameters

Parameter	Type
`token`	`object`

Returns

boolean

register()

register(child): object;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:25

Parameters

Parameter	Type
`child`	`PaneCollapseChild`

Returns

object

token

token: object;

unregister

unregister: () => void;

Returns

void

setActive()

setActive(token): void;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:29

Parameters

Parameter	Type
`token`	`object`

Returns

void

ToolbarController

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:23

Holds the ordered set of ToolbarItem registrations for a Toolbar. Purely a registry — width measurement and overflow resolution live in toolbar.svelte / resolveToolbarOverflow.

Constructors

Constructor

new ToolbarController(): ToolbarController;

Returns

ToolbarController

Accessors

items

Get Signature

get items(): readonly ToolbarItemRegistration[];

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:26

Registered items in registration (DOM) order (reactive).

Returns

readonly ToolbarItemRegistration[]

Methods

register()

register(item): object;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:27

Parameters

Parameter	Type
`item`	`Omit`<`ToolbarItemRegistration`, `"index"`>

Returns

object

unregister

unregister: () => void;

Returns

void

Interfaces

PaneCollapseChild

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:2

Properties

getIcon

getIcon: () => string | undefined;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:6

Returns

string | undefined

getLabel

getLabel: () => string | undefined;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:5

Returns

string | undefined

token

token: object;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:4

Identity token for this child (a fresh {} per child Pane).

PaneProps

Defined in: packages/ui/build/pane/pane.svelte.d.ts:4

Extends

Omit<HTMLAttributes<HTMLDivElement>, "children">

Indexable

[key: symbol]: false | Attachment<HTMLDivElement> | null | undefined

[key: `data-${string}`]: any

Properties

children

children: Snippet;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:25

collapse?

optional collapse?: "none" | "switch" | "drawer" | "stack";

Defined in: packages/ui/build/pane/pane.svelte.d.ts:20

Narrow-container strategy for a row pane (RFC III.3). Ignored unless row.

gap?

optional gap?: PaneSpacing;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:14

Tokenized spacing between children — the only sibling-spacing mechanism (RFC VI).

grow?

optional grow?: boolean;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:10

Grow to fill remaining space along the parent's main axis.

icon?

optional icon?: string;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:24

Iconify id shown beside label in the collapse control.

label?

optional label?: string;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:22

Segmented-control / drawer-trigger label when this pane is a collapse child.

pad?

optional pad?: PaneSpacing;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:16

Tokenized inner padding, same scale as gap.

row?

optional row?: boolean;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:6

Lay children out horizontally. Default is a vertical column stack.

scroll?

optional scroll?: boolean;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:8

This pane owns scroll in its bounded chain (RFC III.1). Implies grow.

sticky?

optional sticky?: "top" | "bottom";

Defined in: packages/ui/build/pane/pane.svelte.d.ts:18

Pin this pane within the nearest scroll owner.

width?

optional width?: string;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:12

Fixed cross-size for a row child (e.g. "24rem"); the pane stops flexing.

ToolbarItemProps

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:2

Properties

disabled?

optional disabled?: boolean;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:12

href?

optional href?: string;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:11

icon?

optional icon?: string;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:8

Iconify id shown before the label.

id?

optional id?: string;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:4

Stable id (overflow key). Auto-generated when omitted.

label

label: string;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:6

Visible action label; also the overflow menu-item text.

onclick?

optional onclick?: () => void;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:14

Returns

void

priority?

optional priority?: number;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:10

Higher stays visible longer; lowest priority collapses into the menu first (RFC IV.3).

variant?

optional variant?: any;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:13

ToolbarItemRegistration

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:6

A registered toolbar action. Fields are read through getters so the Toolbar sees live prop values without re-registering (mirrors the PaneCollapseChild convention).

Properties

getDisabled

getDisabled: () => boolean;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:15

Returns

boolean

getHref

getHref: () => string | undefined;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:14

Returns

string | undefined

getIcon

getIcon: () => string | undefined;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:13

Returns

string | undefined

getLabel

getLabel: () => string;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:12

Returns

string

getPriority

getPriority: () => number;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:11

Returns

number

getVariant

getVariant: () => any;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:16

Returns

any

id

id: string;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:8

Stable id — used as the overflow key and for width measurement.

index

index: number;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:10

DOM/registration order.

onSelect

onSelect: () => void;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:17

Returns

void

ToolbarLayout

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:11

Properties

overflow

overflow: string[];

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:15

Item ids to render in the ⋯ menu, in original order.

visible

visible: string[];

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:13

Item ids to render inline, in original order.

ToolbarMeasuredItem

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:1

Properties

id

id: string;

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:3

Stable identity for the item.

index

index: number;

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:7

Registration / DOM order index.

priority

priority: number;

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:5

Higher priority stays visible longer; lowest priority collapses first.

width

width: number;

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:9

Measured inline width in px (from a hidden measuring row).

ToolbarProps

Defined in: packages/ui/build/pane/toolbar.svelte.d.ts:4

Extends

Omit<HTMLAttributes<HTMLDivElement>, "children">

Indexable

[key: symbol]: false | Attachment<HTMLDivElement> | null | undefined

[key: `data-${string}`]: any

Properties

align?

optional align?: "start" | "end";

Defined in: packages/ui/build/pane/toolbar.svelte.d.ts:8

Horizontal alignment of the action row. Defaults to end (right-aligned).

children

children: Snippet;

Defined in: packages/ui/build/pane/toolbar.svelte.d.ts:9

gap?

optional gap?: PaneSpacing;

Defined in: packages/ui/build/pane/toolbar.svelte.d.ts:6

Spacing between actions. Defaults to sm.

Type Aliases

CardBadge

type CardBadge = ReturnType<typeof CardBadge>;

Defined in: packages/ui/build/pane/card-badge.svelte.d.ts:7

CardSubtitle

type CardSubtitle = ReturnType<typeof CardSubtitle>;

Defined in: packages/ui/build/pane/card-subtitle.svelte.d.ts:6

CardTitle

type CardTitle = ReturnType<typeof CardTitle>;

Defined in: packages/ui/build/pane/card-title.svelte.d.ts:6

Grid

type Grid = ReturnType<typeof Grid>;

Defined in: packages/ui/build/pane/grid.svelte.d.ts:10

Pane

type Pane = ReturnType<typeof Pane>;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:27

PaneCollapseMode

type PaneCollapseMode = "switch" | "drawer";

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:1

PaneSpacing

type PaneSpacing = "none" | "sm" | "md" | "lg";

Defined in: packages/ui/build/pane/pane.utils.d.ts:1

Spread

type Spread = ReturnType<typeof Spread>;

Defined in: packages/ui/build/pane/spread.svelte.d.ts:6

type Toolbar = ReturnType<typeof Toolbar>;

Defined in: packages/ui/build/pane/toolbar.svelte.d.ts:11

ToolbarItem

type ToolbarItem = ReturnType<typeof ToolbarItem>;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:16

Variables

BADGE_COLOR_CLASSES

const BADGE_COLOR_CLASSES: Record<string, string>;

Defined in: packages/ui/build/pane/badge-colors.d.ts:10

Chip colour palette for CardBadge. The class shape mirrors feature-colors' accentClass (bg-<c>-50 text-<c>-700 ring-<c>-200 + a dark variant), so enum badges with explicit colour hints render with the same tone everywhere.

Keys are the bare colour names the model's display() / enum value objects use (see RFC V.1, which shows amber / blue / green). Unknown / absent colours fall back to a neutral chip. Class strings are spelled out in full so Tailwind's JIT scanner picks them up.

BADGE_COLOR_FALLBACK

const BADGE_COLOR_FALLBACK: "border-border bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground" = "border-border bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground";

Defined in: packages/ui/build/pane/badge-colors.d.ts:12

Neutral chip used when no colour (or an unknown colour) is supplied.

Card

const Card: object;

Defined in: packages/ui/build/pane/index.d.ts:16

RFC content-vocabulary namespace: <Card.Title> / <Card.Subtitle> / <Card.Badge>.

Type Declaration

Badge

Badge: Component;

Subtitle

Subtitle: Component;

Title

Title: Component;

CardBadge

const CardBadge: Component;

Defined in: packages/ui/build/pane/card-badge.svelte.d.ts:7

CardSubtitle

const CardSubtitle: Component;

Defined in: packages/ui/build/pane/card-subtitle.svelte.d.ts:6

CardTitle

const CardTitle: Component;

Defined in: packages/ui/build/pane/card-title.svelte.d.ts:6

COMPACT_PX

const COMPACT_PX: 416 = 416;

Defined in: packages/ui/build/pane/is-narrow.svelte.d.ts:7

Container-width thresholds in pixels, mirroring the --size-compact / --size-narrow tokens in base.css (26rem / 40rem at the 16px root). Container queries cannot read custom properties in their condition, so the CSS side restates the rem literals and this JS side restates the px values — keep all three in sync.

GAP_CLASSES

const GAP_CLASSES: Record<PaneSpacing, string>;

Defined in: packages/ui/build/pane/pane.utils.d.ts:3

Sibling spacing tokens — the only sibling-spacing mechanism (RFC VI: gap, never margins).

GAP_PX

const GAP_PX: Record<PaneSpacing, number>;

Defined in: packages/ui/build/pane/pane.utils.d.ts:7

Approximate px used when the Toolbar accounts for gap while measuring overflow.

Grid

const Grid: Component;

Defined in: packages/ui/build/pane/grid.svelte.d.ts:10

NARROW_PX

const NARROW_PX: 640 = 640;

Defined in: packages/ui/build/pane/is-narrow.svelte.d.ts:8

PAD_CLASSES

const PAD_CLASSES: Record<PaneSpacing, string>;

Defined in: packages/ui/build/pane/pane.utils.d.ts:5

Padding tokens, sharing the same scale as GAP_CLASSES.

Pane

const Pane: Component;

Defined in: packages/ui/build/pane/pane.svelte.d.ts:27

Spread

const Spread: Component;

Defined in: packages/ui/build/pane/spread.svelte.d.ts:6

const Toolbar: Component;

Defined in: packages/ui/build/pane/toolbar.svelte.d.ts:11

ToolbarItem

const ToolbarItem: Component;

Defined in: packages/ui/build/pane/toolbar-item.svelte.d.ts:16

Functions

badgeColorClass()

function badgeColorClass(color?): string;

Defined in: packages/ui/build/pane/badge-colors.d.ts:13

Parameters

Parameter	Type
`color?`	`string`

Returns

string

getPaneCollapse()

function getPaneCollapse(): 
  | PaneCollapseController
  | null;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:39

Read the collapse controller provided by the nearest ancestor Pane, or null when this Pane is not a direct child of a collapse="switch" | "drawer" row. Uses raw getContext (not createContext) so absence is a plain null rather than a throw.

Returns

| PaneCollapseController | null

getToolbarController()

function getToolbarController(): 
  | ToolbarController
  | null;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:31

Returns

| ToolbarController | null

resolveToolbarOverflow()

function resolveToolbarOverflow(
   items, 
   available, 
   triggerWidth, 
   gap?): ToolbarLayout;

Defined in: packages/ui/build/pane/toolbar.utils.d.ts:27

Decide which toolbar items fit and which collapse into the overflow menu.

Everything fits → no overflow, no menu.
Otherwise items are hidden in collapse order (lowest priority first; ties broken by later index first, i.e. right-to-left) until the remaining inline items plus the ⋯ trigger fit in available. Widths account for gap between adjacent inline slots.

Pure and DOM-free so it is unit-testable; the Svelte Toolbar feeds it measured widths.

Parameters

Parameter	Type
`items`	`ToolbarMeasuredItem`[]
`available`	`number`
`triggerWidth`	`number`
`gap?`	`number`

Returns

ToolbarLayout

setPaneCollapse()

function setPaneCollapse(controller): void;

Defined in: packages/ui/build/pane/pane-collapse.svelte.d.ts:44

Provide the collapse controller (or null) to this Pane's subtree. Every Pane calls this so a collapse row's grandchildren do not mistake themselves for its direct children.

Parameters

Parameter	Type
`controller`	\| `PaneCollapseController` \| `null`

Returns

void

setToolbarController()

function setToolbarController(controller): void;

Defined in: packages/ui/build/pane/toolbar-context.svelte.d.ts:32

Parameters

Parameter	Type
`controller`	`ToolbarController`

Returns

void