@marianmeres/stuic 3.172.0 → 3.174.0

package/dist/components/Rating/i18n.d.ts

@@ -0,0 +1,34 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `Rating`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are single-brace (`{value}`, `{max}`).
+ */
+export declare const RATING_MESSAGES_EN: {
+    rating: string;
+    value_of_max: string;
+    required: string;
+};
+/** Every message key `Rating` may look up. */
+export type RatingMessageKey = keyof typeof RATING_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type RatingMessages = Record<RatingMessageKey, string>;
+/**
+ * Builds the `t` prop of `Rating` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Rating, createRatingT, RATING_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createRatingT(RATING_MESSAGES_SK);
+ * </script>
+ *
+ * <Rating bind:value {t} />
+ * ```
+ */
+export declare function createRatingT(messages: Partial<RatingMessages> | Record<string, string>, fallbackMessages?: Partial<RatingMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/Rating/i18n.js

@@ -0,0 +1,42 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `Rating`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are single-brace (`{value}`, `{max}`).
+ */
+export const RATING_MESSAGES_EN = {
+    rating: "Rating",
+    value_of_max: "{value} of {max} stars",
+    required: "Please select a rating",
+};
+/**
+ * Builds the `t` prop of `Rating` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { Rating, createRatingT, RATING_MESSAGES_SK } from "@marianmeres/stuic";
+ *   const t = createRatingT(RATING_MESSAGES_SK);
+ * </script>
+ *
+ * <Rating bind:value {t} />
+ * ```
+ */
+export function createRatingT(messages, fallbackMessages = RATING_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values, {
+                preSearchKeyTransform: (k) => `{${k}}`,
+            })
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createRatingT(RATING_MESSAGES_EN);

package/dist/components/Rating/index.css

@@ -0,0 +1,170 @@
+/* ============================================================================
+   RATING COMPONENT TOKENS
+   Override globally: :root { --stuic-rating-icon-color: gold; }
+   Override locally:  <Rating style="--stuic-rating-size: 2.5rem;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	/* Layout — `--stuic-rating-size` is intentionally unset: the `size` presets
+	   below provide the defaults, and setting it overrides whichever preset is on. */
+	--stuic-rating-gap: 0.125rem;
+
+	/* Symbol colors — the filled color is a fixed "star amber" on purpose (like
+	   every comparable library): it must read as a rating on any theme, including
+	   the monochrome ones where the warning intent is grey. Use `intent` (or
+	   override this token) to color by theme instead. The empty layer is a faint
+	   tint of the surrounding text color, so it adapts to light/dark. */
+	--stuic-rating-icon-color: #f59e0b;
+	--stuic-rating-icon-color-empty: color-mix(in srgb, currentColor 20%, transparent);
+
+	/* Hover preview */
+	--stuic-rating-icon-scale-hover: 1.15;
+
+	/* Focus ring */
+	--stuic-rating-ring-width: 3px;
+	--stuic-rating-ring-color: var(--stuic-color-ring);
+
+	/* Disabled */
+	--stuic-rating-opacity-disabled: 0.5;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE
+	   ============================================================================ */
+
+	.stuic-rating {
+		--_size: var(--stuic-rating-size, 1.5rem);
+		--_color: var(--stuic-rating-icon-color);
+		display: inline-flex;
+		align-items: center;
+		gap: var(--stuic-rating-gap);
+		vertical-align: middle;
+		/* keep the scaled hover symbol from being clipped by an ancestor */
+		line-height: 1;
+	}
+
+	.stuic-rating[data-size="sm"] {
+		--_size: var(--stuic-rating-size, 1.125rem);
+	}
+	/* md is the base default (1.5rem) */
+	.stuic-rating[data-size="lg"] {
+		--_size: var(--stuic-rating-size, 2rem);
+	}
+
+	.stuic-rating[data-disabled] {
+		opacity: var(--stuic-rating-opacity-disabled);
+	}
+
+	/* ============================================================================
+	   INTENT (colors the filled layer)
+	   ============================================================================ */
+
+	.stuic-rating[data-intent="primary"] {
+		--_color: var(--stuic-color-primary);
+	}
+	.stuic-rating[data-intent="accent"] {
+		--_color: var(--stuic-color-accent);
+	}
+	.stuic-rating[data-intent="success"] {
+		--_color: var(--stuic-color-success);
+	}
+	.stuic-rating[data-intent="warning"] {
+		--_color: var(--stuic-color-warning);
+	}
+	.stuic-rating[data-intent="destructive"] {
+		--_color: var(--stuic-color-destructive);
+	}
+
+	/* ============================================================================
+	   ITEM (one symbol: icon stack + hit zones)
+	   ============================================================================ */
+
+	.stuic-rating-item {
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+		width: var(--_size);
+		height: var(--_size);
+		transition: transform var(--stuic-rating-transition, var(--stuic-transition));
+	}
+
+	.stuic-rating-item[data-hover] {
+		transform: scale(var(--stuic-rating-icon-scale-hover));
+	}
+
+	/* ============================================================================
+	   ICON STACK — the empty symbol underneath, the filled one clipped on top.
+	   `--stuic-rating-fill` (0–100%) is set inline per item by the component.
+	   ============================================================================ */
+
+	.stuic-rating-icon {
+		position: absolute;
+		inset: 0;
+		display: block;
+		color: var(--stuic-rating-icon-color-empty);
+	}
+
+	.stuic-rating-icon svg {
+		display: block;
+		width: var(--_size);
+		height: var(--_size);
+	}
+
+	.stuic-rating-icon-empty,
+	.stuic-rating-icon-fill {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		width: 100%;
+	}
+
+	/* The clip: a block child sits at the inline-start edge and overflows toward
+	   inline-end, so the visible part is the start side in LTR and RTL alike. */
+	.stuic-rating-icon-fill {
+		width: var(--stuic-rating-fill, 0%);
+		overflow: hidden;
+		color: var(--_color);
+		transition: width var(--stuic-rating-transition, var(--stuic-transition));
+	}
+
+	/* ============================================================================
+	   ZONE (the transparent radio button over a symbol, or over half of it)
+	   ============================================================================ */
+
+	.stuic-rating-zone {
+		position: absolute;
+		inset: 0;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		appearance: none;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.stuic-rating-zone[data-half="start"] {
+		inset-inline-end: 50%;
+	}
+
+	.stuic-rating-zone[data-half="end"] {
+		inset-inline-start: 50%;
+	}
+
+	.stuic-rating-zone:disabled {
+		cursor: default;
+	}
+
+	.stuic-rating-zone:focus-visible {
+		outline: none;
+	}
+
+	/* the ring goes around the whole symbol, not the (half) zone */
+	.stuic-rating-item:has(.stuic-rating-zone:focus-visible) {
+		outline: var(--stuic-rating-ring-width) solid var(--stuic-rating-ring-color);
+		outline-offset: 2px;
+		border-radius: var(--stuic-rating-radius, var(--stuic-radius));
+	}
+}

package/dist/components/Rating/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Rating, type Props as RatingProps, type RatingSize, type RatingItemState, } from "./Rating.svelte";
+export { createRatingT, RATING_MESSAGES_EN, type RatingMessageKey, type RatingMessages, } from "./i18n.js";
+export { RATING_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/Rating/index.js

@@ -0,0 +1,3 @@
+export { default as Rating, } from "./Rating.svelte";
+export { createRatingT, RATING_MESSAGES_EN, } from "./i18n.js";
+export { RATING_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/SplitPane/README.md

@@ -0,0 +1,169 @@
+# SplitPane
+
+Two panes with one draggable separator between them. `horizontal` (default) puts the panes
+side by side and resizes the primary pane's **width**, `vertical` stacks them and resizes its
+**height**; the other pane flexes into whatever is left. The classic sidebar / editor /
+inspector layout, nestable.
+
+Built on the [`resizable` attachment](../../attachments/resizable.ts) with the separator as
+its `handle`, so the separator is a proper ARIA window splitter: focusable `role="separator"`
+with `aria-orientation`, `aria-valuenow` / `min` / `max` (in `units`) and `aria-controls`
+pointing at the primary pane. Arrow keys along the axis move it by `step` (Shift ×10),
+Home / End go to the bounds, Enter (or double-click) resets. Pointer Events with capture
+cover mouse, touch and pen in one code path.
+
+## Usage
+
+```svelte
+<script>
+	import { SplitPane } from "@marianmeres/stuic";
+	let size = $state(30);
+</script>
+
+<div class="h-screen">
+	<SplitPane bind:size min={15} max={60} key="sidebar" storage="local">
+		{#snippet start()}
+			<nav>…</nav>
+		{/snippet}
+		{#snippet end()}
+			<main>…</main>
+		{/snippet}
+	</SplitPane>
+</div>
+```
+
+Vertical, px, nested:
+
+```svelte
+<SplitPane size={25} min={10}>
+	{#snippet start()}<Sidebar />{/snippet}
+	{#snippet end()}
+		<SplitPane orientation="vertical" units="px" size={400} min={120}>
+			{#snippet start()}<Editor />{/snippet}
+			{#snippet end()}<Terminal />{/snippet}
+		</SplitPane>
+	{/snippet}
+</SplitPane>
+```
+
+The root is `width: 100%; height: 100%`, so give the container a definite height: that is
+what makes long pane content scroll instead of growing the layout, and what a `vertical`
+split's `%` sizes resolve against. Without one, a `horizontal` split is as tall as its
+content.
+
+## Props
+
+| Prop             | Type                            | Default           | Description                                                                                                                                                                                                          |
+| ---------------- | ------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `start`          | `Snippet`                       | —                 | Content of the first pane (left; top when vertical)                                                                                                                                                                  |
+| `end`            | `Snippet`                       | —                 | Content of the second pane (right; bottom when vertical)                                                                                                                                                             |
+| `orientation`    | `"horizontal" \| "vertical"`    | `"horizontal"`    | Side by side (resizes a width) or stacked (resizes a height)                                                                                                                                                         |
+| `primary`        | `"start" \| "end"`              | `"start"`         | Which pane carries the size; the other one fills the rest. With `end` the separator sits on the second pane's start edge and the drag / keys are inverted accordingly                                                |
+| `size`           | `number`                        | `50`              | **Bindable.** Size of the primary pane in `units`. Written on every resize; writing it resizes (clamped to `min` / `max`, persisted, announced). A size stored under `key` wins over it on mount and is written back |
+| `units`          | `"%" \| "px"`                   | `"%"`             | Percent of the container, or px. Not meant to change after mount                                                                                                                                                     |
+| `min` / `max`    | `number`                        | `0` / `0`         | Bounds in `units`; `0` = none (`%` is still capped at 100)                                                                                                                                                           |
+| `step`           | `number`                        | `1` (%) `10` (px) | Keyboard step in `units`; Shift multiplies by 10                                                                                                                                                                     |
+| `key`            | `string \| number \| null`      | —                 | Persist the size under this key (`resizable-width-<key>` / `resizable-height-<key>`)                                                                                                                                 |
+| `storage`        | `"local" \| "session"`          | `"session"`       | Where `key` persists to                                                                                                                                                                                              |
+| `disabled`       | `boolean`                       | `false`           | Renders the separator inert: no drag, no keyboard, not focusable, no grip. The layout stays; writing `size` still works                                                                                              |
+| `label`          | `string`                        | `t("resize")`     | Accessible name of the separator ("Resize")                                                                                                                                                                          |
+| `t`              | `TranslateFn`                   | English           | Translation function for the default name — see i18n below                                                                                                                                                           |
+| `onResize`       | `(info: ResizableInfo) => void` | —                 | Fires whenever a size is applied: on mount, while dragging, per key press, on reset, on `size` writes. `info` = `{ size, units, axis, container }`                                                                   |
+| `unstyled`       | `boolean`                       | `false`           | Skip all default styling (the size still lands as an inline width / height)                                                                                                                                          |
+| `class`          | `string`                        | —                 | Root classes                                                                                                                                                                                                         |
+| `startClass`     | `string`                        | —                 | First pane classes                                                                                                                                                                                                   |
+| `endClass`       | `string`                        | —                 | Second pane classes                                                                                                                                                                                                  |
+| `separatorClass` | `string`                        | —                 | Separator classes                                                                                                                                                                                                    |
+| `el`             | `HTMLDivElement`                | —                 | Bindable root element                                                                                                                                                                                                |
+| `separatorEl`    | `HTMLDivElement`                | —                 | Bindable separator element                                                                                                                                                                                           |
+
+Other attributes (`style`, `data-*`, …) are spread onto the root.
+
+### Methods (via `bind:this`)
+
+| Method    | Description                                                                                  |
+| --------- | -------------------------------------------------------------------------------------------- |
+| `reset()` | Restores the size the component mounted with (what Enter / double-click on the separator do) |
+
+### `size`, `key` and reset — who wins
+
+- **Mount:** a size stored under `key` (from an earlier drag) beats the `size` prop and is
+  written back into `bind:size`. Without `key`, `size` is it.
+- **Later writes** to `size` go through the splitter: clamped, persisted, announced — an
+  out-of-range write is corrected in the binding.
+- **Reset** (Enter, double-click, `reset()`) restores the size the component **mounted
+  with** — the `size` prop's value at that time, not the stored one.
+
+## Panes
+
+Both panes are `min-width: 0; min-height: 0; overflow: auto`, so long content scrolls inside a
+pane instead of blowing the layout, and a pane can shrink below its content's natural size.
+The primary pane is `flex: 0 0 auto` with the size as an inline `width` / `height`; the other
+one is `flex: 1 1 0`. Override per pane via `startClass` / `endClass`.
+
+## Data attributes
+
+| Where     | Attribute          | Meaning                                     |
+| --------- | ------------------ | ------------------------------------------- |
+| root      | `data-orientation` | `horizontal` / `vertical`                   |
+| root      | `data-disabled`    | Present when `disabled`                     |
+| panes     | `data-pane`        | `start` / `end`                             |
+| panes     | `data-primary`     | Present on the sized pane                   |
+| separator | `data-separator`   | Always                                      |
+| separator | `data-resizing`    | Present while a pointer drag is in progress |
+
+## CSS Tokens
+
+Prefix: `--stuic-split-pane-*`. The defaults reproduce the `resizable` attachment's built-in
+handle (what `resizableWidth` / `WithSidePanel` show): a faint 1px line with a small rounded
+grip, palette-based rather than theme-based, with `:root.dark` variants.
+
+| Token                   | Default (light / dark)                        | Description                                        |
+| ----------------------- | --------------------------------------------- | -------------------------------------------------- |
+| `separator-color`       | `rgb(0 0 0 / 0.2)` / `rgb(255 255 255 / 0.1)` | The separator line                                 |
+| `separator-color-hover` | `rgb(0 0 0 / 0.3)` / `rgb(255 255 255 / 0.2)` | … while hovered, focused or dragged                |
+| `separator-thickness`   | `1px`                                         | Line thickness (the flex basis of the separator)   |
+| `separator-hit-area`    | `4px`                                         | Invisible grab zone added on each side of the line |
+| `grip-color`            | `--color-gray-300` / `--color-gray-600`       | The centered grip (hidden when `disabled`)         |
+| `grip-color-hover`      | `--color-gray-400` / `--color-gray-500`       | … while hovered, focused or dragged                |
+| `grip-border-color`     | `rgb(0 0 0 / 0.2)` / `rgb(255 255 255 / 0.2)` | Grip border                                        |
+| `grip-length`           | `20px`                                        | Grip size along the separator                      |
+| `grip-thickness`        | `9px`                                         | Grip size across the separator                     |
+| `grip-radius`           | `0.25rem`                                     | Grip corner radius                                 |
+| `ring-color`            | `--stuic-color-ring`                          | `:focus-visible` outline of the separator          |
+| `transition`            | `--stuic-transition`                          | Color transition duration                          |
+
+```svelte
+<SplitPane
+	style="--stuic-split-pane-separator-thickness: 6px; --stuic-split-pane-grip-length: 3rem;"
+	>…</SplitPane
+>
+```
+
+## i18n
+
+The only text is the separator's default accessible name. English is built in; Slovak is
+bundled, opt-in:
+
+```svelte
+<script>
+	import {
+		SplitPane,
+		createSplitPaneT,
+		SPLIT_PANE_MESSAGES_SK,
+	} from "@marianmeres/stuic";
+	const t = createSplitPaneT(SPLIT_PANE_MESSAGES_SK);
+</script>
+
+<SplitPane {t}>…</SplitPane>
+```
+
+`createSplitPaneT(messages, fallback = SPLIT_PANE_MESSAGES_EN)` accepts a partial catalog
+(missing keys fall back to English). Keys: `resize`. Or just pass `label`.
+
+## Related
+
+- [`resizable`](../../attachments/resizable.ts) attachment — the same behavior on any element
+  (own handle or a created one, width or height), for layouts that aren't a two-pane split.
+- [`WithSidePanel`](../WithSidePanel/) — a sidebar layout with responsive collapse and an
+  optional resizable side (built on the same attachment via `resizableWidth`).

package/dist/components/SplitPane/SplitPane.svelte

@@ -0,0 +1,202 @@
+<!--
+	SplitPane — two panes with one draggable separator between them. `horizontal` lays
+	them side by side and resizes the primary pane's width, `vertical` stacks them and
+	resizes its height; the other pane fills what is left.
+
+	Built on the `resizable` attachment, which owns the pointer drag, the keyboard
+	(arrows along the axis, Home / End, Enter to reset) and the ARIA window-splitter
+	semantics of the separator. This component adds the layout, the theming,
+	`bind:size` (a stored size wins over it on mount and is written back), `reset()`
+	and the `t`-able accessible name.
+-->
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { ResizableInfo, ResizableUnits } from "../../attachments/resizable.js";
+	import type { TranslateFn } from "../../types.js";
+
+	export type SplitPaneOrientation = "horizontal" | "vertical";
+
+	/** Which pane carries the size; the other one flexes into the rest. */
+	export type SplitPanePrimary = "start" | "end";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+		/** Content of the first pane (left; top when vertical) */
+		start?: Snippet;
+		/** Content of the second pane (right; bottom when vertical) */
+		end?: Snippet;
+		/**
+		 * `horizontal` (default) puts the panes side by side and resizes a width,
+		 * `vertical` stacks them and resizes a height — the container then needs a
+		 * definite height (`%` units resolve against it).
+		 */
+		orientation?: SplitPaneOrientation;
+		/** Which pane the size applies to (the other one fills the rest). Default `start`. */
+		primary?: SplitPanePrimary;
+		/**
+		 * Size of the primary pane in `units` (bindable). Default `50`. Written on every
+		 * resize; writing it resizes the pane (clamped to `min` / `max`). A size stored
+		 * under `key` wins over it on mount and is written back into the binding. The
+		 * size the component mounted with is what double-click / Enter on the separator
+		 * and `reset()` restore.
+		 */
+		size?: number;
+		/** `%` (default) of the container, or `px`. Not meant to change after mount. */
+		units?: ResizableUnits;
+		/** Lower bound in `units`. `0` = none. */
+		min?: number;
+		/** Upper bound in `units`. `0` = none (`%` is still capped at 100). */
+		max?: number;
+		/** Keyboard step in `units` (Shift multiplies by 10). Default `1` for %, `10` for px. */
+		step?: number;
+		/** Persist the size under this key (`resizable-width-<key>` / `resizable-height-<key>`) */
+		key?: string | number | null;
+		/** Where `key` persists to. Default `session`. */
+		storage?: "local" | "session";
+		/** Renders the separator inert: no drag, no keyboard, not focusable */
+		disabled?: boolean;
+		/** Accessible name of the separator. Defaults to `t("resize")` — "Resize". */
+		label?: string;
+		/** Skip all default styling, use only custom classes */
+		unstyled?: boolean;
+		class?: string;
+		/** Classes for the first pane */
+		startClass?: string;
+		/** Classes for the second pane */
+		endClass?: string;
+		/** Classes for the separator */
+		separatorClass?: string;
+		/** Bindable root element reference */
+		el?: HTMLDivElement;
+		/** Bindable separator element reference */
+		separatorEl?: HTMLDivElement;
+		/** Fires whenever a size is applied: on mount, while dragging, per key press, on reset, on `size` writes */
+		onResize?: (info: ResizableInfo) => void;
+		/** Translation function for the separator's default name (`resize`). English built in. */
+		t?: TranslateFn;
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { resizable, type ResizableApi } from "../../attachments/resizable.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { t_default } from "./i18n.js";
+
+	let {
+		start,
+		end,
+		orientation = "horizontal",
+		primary = "start",
+		size = $bindable(50),
+		units = "%",
+		min = 0,
+		max = 0,
+		step,
+		key,
+		storage = "session",
+		disabled = false,
+		label,
+		unstyled = false,
+		class: classProp,
+		startClass,
+		endClass,
+		separatorClass,
+		el = $bindable(),
+		separatorEl = $bindable(),
+		onResize,
+		t = t_default,
+		...rest
+	}: Props = $props();
+
+	// The size the component mounted with (before a stored one applies): the reset target.
+	const _initial = untrack(() => size);
+
+	let _api = $state.raw<ResizableApi | undefined>();
+
+	let _isX = $derived(orientation === "horizontal");
+
+	// What the primary pane renders while the attachment is not active (`disabled`, or
+	// before its first run). While it is active both write the very same string.
+	let _sizeCss = $derived(`${size}${units}`);
+
+	function _attachment(pane: SplitPanePrimary) {
+		if (disabled || pane !== primary || !separatorEl) return undefined;
+		return resizable({
+			axis: _isX ? "x" : "y",
+			// the current size, not the mount one: a re-setup (an option changed,
+			// `disabled` toggled off) must not jump the pane
+			initial: untrack(() => size),
+			resetTo: _initial,
+			min,
+			max,
+			units,
+			step,
+			key,
+			storage,
+			reverse: primary === "end",
+			handle: separatorEl,
+			label: label ?? t("resize"),
+			onResize(info) {
+				size = info.size;
+				onResize?.(info);
+			},
+			onInit(api) {
+				_api = api;
+			},
+		});
+	}
+
+	// Writes into `size` (a consumer's) go through the attachment, so they get clamped,
+	// persisted and announced like a drag. Its own writes are already `current`.
+	$effect(() => {
+		const api = _api;
+		const s = size;
+		if (!api || s === api.current) return;
+		untrack(() => api.set(s));
+	});
+
+	/** Restores the size the component mounted with. */
+	export function reset() {
+		if (_api) _api.reset();
+		else size = _initial;
+	}
+</script>
+
+<div
+	bind:this={el}
+	class={unstyled ? classProp : twMerge("stuic-split-pane", classProp)}
+	data-orientation={orientation}
+	data-disabled={disabled ? "" : undefined}
+	{...rest}
+>
+	<div
+		class={unstyled ? startClass : twMerge("stuic-split-pane-pane", startClass)}
+		data-pane="start"
+		data-primary={primary === "start" ? "" : undefined}
+		style:width={_isX && primary === "start" ? _sizeCss : undefined}
+		style:height={!_isX && primary === "start" ? _sizeCss : undefined}
+		{@attach _attachment("start")}
+	>
+		{@render start?.()}
+	</div>
+	<div
+		bind:this={separatorEl}
+		class={unstyled
+			? separatorClass
+			: twMerge("stuic-split-pane-separator", separatorClass)}
+		data-separator
+		role="separator"
+		aria-orientation={_isX ? "vertical" : "horizontal"}
+	></div>
+	<div
+		class={unstyled ? endClass : twMerge("stuic-split-pane-pane", endClass)}
+		data-pane="end"
+		data-primary={primary === "end" ? "" : undefined}
+		style:width={_isX && primary === "end" ? _sizeCss : undefined}
+		style:height={!_isX && primary === "end" ? _sizeCss : undefined}
+		{@attach _attachment("end")}
+	>
+		{@render end?.()}
+	</div>
+</div>