@marianmeres/stuic 3.171.0 → 3.173.0

package/AGENTS.md

@@ -23,10 +23,10 @@
 
 ```
 src/lib/
-├── components/     # 74 component directories
-├── actions/        # 15 Svelte actions (use: directives)
+├── components/     # 78 component directories
+├── actions/        # 16 Svelte actions (use: directives)
 ├── attachments/    # Svelte attachments ({@attach} — preferred for new DOM helpers)
-├── utils/          # 45 utility modules
+├── utils/          # 55 utility modules (48 on the barrel)
 ├── icons/          # Icon re-exports from @marianmeres/icons-fns
 ├── css/            # CSS-only presets (ratio-locked frame / letterbox)
 ├── index.css       # Centralized CSS imports
@@ -39,7 +39,7 @@ src/lib/
 > attachments in `src/lib/attachments/` (export from its `index.ts`). The existing `actions/`
 > are kept as-is for back-compat; no need to migrate them.
 
-Theme CSS files are not bundled in this package — they're provided by `@marianmeres/design-tokens/css/*.css` (42 themes) and imported by `src/lib/index.css`.
+Theme CSS files are not bundled in this package — they're provided by `@marianmeres/design-tokens/css/*.css` (54 themes) and imported by `src/lib/index.css`.
 
 ---
 
@@ -126,15 +126,17 @@ Global tokens that control cross-component visual properties. Defined in `src/li
 - [Architecture](./docs/architecture.md) — System design, data flow
 - [Conventions](./docs/conventions.md) — Code standards, patterns
 - [Tasks](./docs/tasks.md) — Common procedures
+- [Testing](./docs/testing.md) — What we test, what we don't, the two-project split
+- [Component test conventions](./docs/testing-components.md) — How to write a `*.svelte.test.ts`
 
 ### Domain Docs
 
-- [Components](./docs/domains/components.md) — 74 component directories, Props pattern, snippets
+- [Components](./docs/domains/components.md) — 78 component directories, Props pattern, snippets
 - [Theming](./docs/domains/theming.md) — CSS tokens, dark mode, themes
 - [CSS presets](./docs/domains/css-presets.md) — ratio-locked frame (letterbox), safe-area, scrollbar
-- [Actions](./docs/domains/actions.md) — 15 Svelte directives
+- [Actions](./docs/domains/actions.md) — 16 Svelte directives
 - [Attachments](./docs/domains/attachments.md) — `{@attach}` DOM helpers (preferred for new ones)
-- [Utils](./docs/domains/utils.md) — 45 utility modules
+- [Utils](./docs/domains/utils.md) — 55 utility modules
 
 ### Reference
 
@@ -151,7 +153,7 @@ Global tokens that control cross-component visual properties. Defined in `src/li
 | `src/lib/index.css`                    | CSS entry point                                |
 | `src/lib/index.ts`                     | JS entry point                                 |
 | `src/lib/utils/design-tokens.ts`       | Re-exports from `@marianmeres/design-tokens`   |
-| `@marianmeres/design-tokens/css/*.css` | Theme CSS files (42 themes, `--stuic-` prefix) |
+| `@marianmeres/design-tokens/css/*.css` | Theme CSS files (54 themes, `--stuic-` prefix) |
 | `src/lib/components/Button/`           | Reference component                            |
 
 ---

package/API.md

@@ -114,6 +114,25 @@ Expandable sections with exclusive or multi-open modes.
 
 Responsive two-column layout with collapsible side panel, resizable width, and mobile-aware slide transitions.
 
+#### `SplitPane`
+
+Two panes with a draggable, keyboard-operable separator (ARIA window splitter) — `horizontal` (side by side, a width) or `vertical` (stacked, a height); nestable. Built on the `resizable` attachment.
+
+| Prop            | Type                         | Default        | Description                                                               |
+| --------------- | ---------------------------- | -------------- | ------------------------------------------------------------------------- |
+| `start` / `end` | `Snippet`                    | —              | The two panes' content                                                    |
+| `orientation`   | `"horizontal" \| "vertical"` | `"horizontal"` | Resize a width (side by side) or a height (stacked)                       |
+| `primary`       | `"start" \| "end"`           | `"start"`      | Which pane carries the size; the other one fills the rest                 |
+| `size`          | `number`                     | `50`           | Bindable size of the primary pane in `units`; a stored size wins on mount |
+| `units`         | `"%" \| "px"`                | `"%"`          | Of the container, or px                                                   |
+| `min` / `max`   | `number`                     | `0`            | Bounds in `units` (`0` = none)                                            |
+| `key`           | `string \| number`           | —              | Persist the size (`storage`: `"session"` default, or `"local"`)           |
+| `disabled`      | `boolean`                    | `false`        | Inert separator, layout kept                                              |
+| `label` / `t`   | `string` / `TranslateFn`     | `"Resize"`     | Accessible name of the separator (Slovak catalog bundled)                 |
+| `onResize`      | `(info) => void`             | —              | Every applied size                                                        |
+
+Imperative `reset()` restores the mount size. Class slots `startClass` / `endClass` / `separatorClass`.
+
 #### `Collapsible`
 
 Expandable/collapsible content sections.
@@ -329,6 +348,96 @@ Money input whose canonical bindable `value` is an **integer in minor units** (e
 
 The `formatMinorUnits`, `parseToMinorUnits`, and `money` helpers are exported for display elsewhere.
 
+#### `Calendar`
+
+Accessible month grid for picking a single date (`value`) or an inclusive range (`start` + `end`) — every value an ISO `YYYY-MM-DD` string. Roving-tabindex keyboard grid (arrows, Home/End, PageUp/PageDown ± Shift, Enter), `min` / `max` / `isDateDisabled`, several `months` side by side, `captionLayout="dropdown"` (native month + year selects), ISO week numbers, fixed 6-week height, a `renderDay` snippet, `locale` for the Intl day/month names and `t` for the UI texts (Slovak bundled). Date math from `@marianmeres/calendar-utils`. Used inside `FieldDate` / `FieldDateRange`; usable inline on its own.
+
+| Prop                     | Type                                 | Default    | Description                                                            |
+| ------------------------ | ------------------------------------ | ---------- | ---------------------------------------------------------------------- |
+| `mode`                   | `"single" \| "range"`                | `"single"` | Bind `value`, or `start` + `end`                                       |
+| `value`                  | `string \| null`                     | `null`     | Bindable selected date (single)                                        |
+| `start`, `end`           | `string \| null`                     | `null`     | Bindable range ends (range)                                            |
+| `view`                   | `{ year, month }`                    | selection  | Bindable first displayed month                                         |
+| `months`                 | `number`                             | `1`        | Consecutive months side by side                                        |
+| `min`, `max`             | `string \| null`                     | —          | Selectable window (inclusive); days and navigation beyond are disabled |
+| `isDateDisabled`         | `(iso, cell) => boolean`             | —          | Blackout individual days                                               |
+| `weekStartsOn`           | `1..7`                               | `1`        | First day of the week (ISO, 1 = Monday)                                |
+| `locale`, `zone`         | `string`                             | browser    | Intl names / which day is "today"                                      |
+| `captionLayout`          | `"label" \| "dropdown"`              | `"label"`  | Caption text, or month + year selects                                  |
+| `showWeekNumbers`        | `boolean`                            | `false`    | ISO week column                                                        |
+| `fixedWeeks`             | `boolean`                            | `false`    | Always 6 rows                                                          |
+| `showToday`, `showClear` | `boolean`                            | `false`    | Footer buttons                                                         |
+| `onSelect`               | `(value) => void`                    | —          | Single mode pick / clear                                               |
+| `onRangeChange`          | `({ start, end, complete }) => void` | —          | Range mode pick / clear                                                |
+| `onViewChange`           | `(view) => void`                     | —          | Displayed month changed                                                |
+
+```svelte
+<Calendar mode="range" bind:start bind:end months={2} min={todayIso()} />
+```
+
+Exports: `Calendar`, `CalendarProps`, `CalendarMode`, `CalendarCaptionLayout`, `CalendarDayState`, `CalendarRangeChange`, `CalendarDayCell`, `CalendarWeekday`, `createCalendarT`, `CALENDAR_MESSAGES_EN`, `CALENDAR_MESSAGES_SK`, and the ISO date helpers `isIsoDate`, `parseIsoDate`, `normalizeIsoDate`, `toIsoDate`, `todayIso`, `addDaysIso`, `addMonthsIso`, `compareIso`, `daysBetweenIso`, `rangeLengthIso`, `formatIsoDate`, `formatIsoDateRange` (types `IsoDate`, `IsoDateParts`, `YearMonth`).
+
+#### `FieldDate`
+
+Single-date field around `Calendar`: a trigger button showing the formatted date opens the calendar in a native dialog (default), or the calendar renders inline (`embedded`). The bound `value` is an ISO `YYYY-MM-DD` string; `name` goes on a hidden input carrying it, so the form submits the ISO date regardless of the display format. `required` / valid ISO / `min` / `max` / `isDateDisabled` are enforced by the field's validator (hidden inputs never validate natively).
+
+| Prop            | Type                         | Default                   | Description                                                 |
+| --------------- | ---------------------------- | ------------------------- | ----------------------------------------------------------- |
+| `value`         | `string \| null`             | `null`                    | Bindable ISO date                                           |
+| `name`          | `string`                     | —                         | Hidden input name                                           |
+| `embedded`      | `boolean`                    | `false`                   | Inline calendar instead of trigger + dialog                 |
+| `closeOnSelect` | `boolean`                    | `true`                    | Close the dialog after a pick; `false` adds a "Done" button |
+| `placeholder`   | `string`                     | `t("placeholder_date")`   | Trigger text while empty                                    |
+| `clearable`     | `boolean`                    | `true`                    | Trailing × (dialog) / footer "Clear" (embedded)             |
+| `locale`        | `string`                     | browser                   | Display text + calendar names                               |
+| `formatOptions` | `Intl.DateTimeFormatOptions` | `{ dateStyle: "medium" }` | Display text format                                         |
+| `format`        | `(iso) => string`            | —                         | Custom display text                                         |
+| `months`        | `number`                     | `1`                       | Months side by side                                         |
+| `calendarProps` | `Partial<CalendarProps>`     | —                         | Anything else for the inner calendar                        |
+| `validate`      | `boolean \| ValidateOptions` | enabled                   | `false` disables the built-in guard; object merges          |
+| `t`             | `TranslateFn`                | English                   | i18n (see `createCalendarT`)                                |
+| `onChange`      | `(value) => void`            | —                         | After a pick / clear through the UI                         |
+
+Also forwards `min`, `max`, `isDateDisabled`, `weekStartsOn`, `weekendDays`, `zone`, `captionLayout`, `yearRange`, `showWeekNumbers`, `showOutsideDays`, `fixedWeeks`, `showToday`, `renderDay` to the calendar, and takes the usual field props (`label`, `description`, `renderSize`, `required`, `disabled`, `labelLeft`, class props, …). Methods: the imperative validate API plus `open()` / `close()`.
+
+```svelte
+<FieldDate
+	bind:value={delivery}
+	label="Delivery date"
+	name="delivery"
+	min={todayIso()}
+	required
+/>
+```
+
+Exports: `FieldDate`, `FieldDateProps`, `FieldDateCalendarProps`.
+
+#### `FieldDateRange`
+
+Date-range field around a range-mode `Calendar`: same trigger + dialog / `embedded` presentations as `FieldDate`, binding `start` + `end` and submitting two hidden inputs (`nameStart`, `nameEnd`). First pick anchors, second completes (either order), a complete range closes the dialog (`closeOnSelect`). A half range fails validation whether or not the field is `required`. The default `months={2}` collapses to one below the `md` breakpoint.
+
+| Prop                   | Type                       | Default | Description                              |
+| ---------------------- | -------------------------- | ------- | ---------------------------------------- |
+| `start`, `end`         | `string \| null`           | `null`  | Bindable ISO range ends                  |
+| `nameStart`, `nameEnd` | `string`                   | —       | Hidden input names                       |
+| `format`               | `(start, end) => string`   | —       | Custom display text for a complete range |
+| `months`               | `number`                   | `2`     | Months side by side (1 below `md`)       |
+| `onChange`             | `({ start, end }) => void` | —       | After a pick / clear through the UI      |
+
+Everything else as `FieldDate`.
+
+```svelte
+<FieldDateRange
+	bind:start={from}
+	bind:end={to}
+	label="Stay"
+	nameStart="from"
+	nameEnd="to"
+/>
+```
+
+Exports: `FieldDateRange`, `FieldDateRangeProps`, `FieldDateRangeValue`.
+
 #### `FieldTextarea`
 
 Multi-line text input.
@@ -1516,10 +1625,12 @@ Visual feedback (class toggle) on drag-over.
 
 ### `resizableWidth`
 
-Make an element's width draggable.
+Make an element's width draggable. A thin wrapper over the `resizable` attachment (`axis: "x"`, see [Attachments](#attachments)) — the handle is a keyboard-operable `role="separator"`, `min` / `max` clamp, `key` persists.
 
 ```svelte
-<div use:resizableWidth={() => ({ minWidth: 200, maxWidth: 600 })}>Resizable</div>
+<div use:resizableWidth={() => ({ initial: 300, min: 200, max: 600, key: "sidebar" })}>
+	Resizable
+</div>
 ```
 
 ### `trim`
@@ -1712,6 +1823,37 @@ When a step has `selector`, the tour uses `document.querySelector(selector)` to
 
 ---
 
+## Attachments
+
+Svelte `{@attach}` helpers — the preferred form for new DOM behavior (reactive, composable, forwardable through components). Imported from the package root like everything else.
+
+### `autoHeight`
+
+Animates the host's height to its single child's natural height (pair it with a CSS `height` transition).
+
+```svelte
+<div class="viewport" {@attach autoHeight}>
+	<div>…variable-height content…</div>
+</div>
+```
+
+### `longPress`
+
+Factory: calls `onLongPress` when a touch / pen pointer stays down for `duration` ms (default 500) without moving beyond `moveTolerance` px.
+
+```svelte
+<div {@attach longPress({ onLongPress: (e) => openAt(e.clientX, e.clientY) })}>…</div>
+```
+
+### `resizable`
+
+Factory: drag-resizable width (`axis: "x"`) or height (`axis: "y"`) with an ARIA window-splitter handle (arrows / Home / End / Enter), `min` / `max`, `px` or `%` of the parent, persisted under `key`; `handle` drives an element of your own, `onInit` hands out `set()` / `reset()`.
+
+```svelte
+<aside {@attach resizable({ initial: 300, min: 200, max: 600, key: "sidebar" })}>…</aside>
+<div {@attach resizable({ axis: "y", units: "%", initial: 40 })}>…</div>
+```
+
 ## Utilities
 
 Import from `@marianmeres/stuic`.
@@ -2237,6 +2379,8 @@ Each component defines customization tokens. Override globally in `:root {}` or
 | Button             | `--stuic-button-*`              | `bg`, `text`, `border`, `ring-color`, `radius`, `padding-x-{size}`                                                                                                                                                            |
 | Switch             | `--stuic-switch-*`              | `accent`                                                                                                                                                                                                                      |
 | Slider             | `--stuic-slider-*`              | `track`, `fill`, `thumb`, `tick`, `tick-on-fill`, `thickness`, `length`, `radius`, `fill-radius`                                                                                                                              |
+| RangeSlider        | `--stuic-range-slider-*`        | `track`, `fill`, `thumb`, `tick`, `tick-on-fill`, `thickness`, `length`, `radius`, `fill-radius`, `ring-width`, `ring-color`                                                                                                  |
+| SplitPane          | `--stuic-split-pane-*`          | `separator-color`, `separator-color-hover`, `separator-thickness`, `separator-hit-area`, `grip-color`, `grip-color-hover`, `grip-border-color`, `grip-length`, `grip-thickness`, `grip-radius`, `ring-color`, `transition`    |
 | Input              | `--stuic-input-*`               | `accent`, `accent-error`                                                                                                                                                                                                      |
 | Progress           | `--stuic-progress-*`            | `bg`, `accent`                                                                                                                                                                                                                |
 | ListItemButton     | `--stuic-list-item-button-*`    | `bg`, `text`, `border`, `bg-hover`, `text-hover`                                                                                                                                                                              |

package/README.md

@@ -167,15 +167,15 @@ See [API.md](API.md) for the full list of exported theme types (`ThemeSchema`, `
 
 ### Layout & Overlays
 
-AppShell, Accordion, Backdrop, Modal, ModalDialog, Drawer, Collapsible, Header, SlidingPanels, Nav, WithSidePanel
+AppShell, Accordion, Backdrop, Modal, ModalDialog, Drawer, Collapsible, Header, SlidingPanels, Nav, WithSidePanel, SplitPane
 
 ### Forms & Inputs
 
-FieldInput, FieldMoney, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldOptions, FieldKeyValues, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, FieldCountry, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, RegisterFormModal, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
+FieldInput, FieldMoney, FieldDate, FieldDateRange, Calendar, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldOptions, FieldKeyValues, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, FieldCountry, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, RegisterFormModal, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
 
 ### Buttons & Controls
 
-Button, ButtonGroupRadio, Switch, Slider, TwCheck, ListItemButton, X
+Button, ButtonGroupRadio, Switch, Slider, RangeSlider, TwCheck, ListItemButton, X
 
 ### Feedback & Notifications
 
@@ -206,6 +206,18 @@ Cart, Checkout (CheckoutProgress, CheckoutOrderSummary, CheckoutCartReview, Chec
 
 `autogrow` · `validate` · `focusTrap` · `autoscroll` · `dimBehind` · `fileDropzone` · `highlightDragover` · `resizableWidth` · `spotlight` · `trim` · `typeahead` · `onSubmitValidityCheck` · `popover` · `tooltip` · `createTour` / `tourStep` (onboarding)
 
+## Attachments
+
+Svelte `{@attach}` helpers — preferred over new actions (reactive, composable, forwardable).
+
+```svelte
+<div {@attach autoHeight}>…</div>
+<aside {@attach resizable({ initial: 300, min: 200, max: 600, key: "sidebar" })}>…</aside>
+<div {@attach longPress({ onLongPress: (e) => openAt(e.clientX, e.clientY) })}>…</div>
+```
+
+`autoHeight` · `longPress` · `resizable`
+
 ## PWA safe-area insets
 
 When a stuic app is installed and launched standalone (iOS Home Screen, Android/desktop PWA), the web view fills the entire screen, so edge-anchored chrome can render under the status bar / notch / home indicator. stuic ships an **opt-in** safe-area layer that is **inert in a normal browser tab** (`env()` → `0`) and only engages under `@media (display-mode: standalone), (display-mode: fullscreen)`.

package/dist/actions/resizable-width.svelte.d.ts

@@ -1,42 +1,28 @@
+import { type ResizableOptions } from "../attachments/resizable.js";
 /**
- * Options for the resizable width action.
+ * Options for the {@link resizableWidth} action — the `x`-axis
+ * {@link ResizableOptions} of the `resizable` attachment with the legacy
+ * `onResize` payload shape (`width` instead of `size`).
  */
-export interface ResizableWidthOptions {
-    enabled?: boolean;
-    initial?: number;
-    min?: number;
-    max?: number;
-    units?: "px" | "%";
-    /** Reverses handle position (left instead of right) and drag direction */
-    reverse?: boolean;
-    key?: string | number | null | undefined;
-    storage?: "local" | "session";
-    handleClass?: string;
-    handleDragClass?: string;
+export interface ResizableWidthOptions extends Omit<ResizableOptions, "axis" | "onResize"> {
     onResize?: (info: {
         width: number;
         units: "px" | "%";
         container: number;
     }) => void;
-    debug?: (...args: unknown[]) => void;
 }
 /**
- * A Svelte action that makes an element's width resizable via drag handle.
+ * A Svelte action that makes an element's width resizable via a drag handle on its
+ * right (or, with `reverse`, left) edge.
  *
- * Adds a draggable handle to the right (or left with `reverse`) edge of the element.
- * Supports mouse and touch input.
- * Optionally persists the width to localStorage/sessionStorage.
- *
- * Features:
- * - Drag handle with visual feedback
- * - Min/max width constraints
- * - Support for px or % units
- * - Optional storage persistence with custom key
- * - Double-click handle to reset to initial width
- * - Touch device support
+ * Kept for back-compat: it is a thin wrapper over the `resizable` attachment
+ * (`axis: "x"`), so it has everything the attachment has — the handle is a focusable
+ * `role="separator"` with arrow / Home / End / Enter keyboard resizing, Pointer Events
+ * cover mouse, touch and pen, `min` / `max` clamp, `key` persists, double-click resets.
+ * For new code (and for heights) use `{@attach resizable(...)}` directly.
  *
  * @param el - The element to make resizable
- * @param fn - Function returning configuration options
+ * @param fn - Function returning configuration options (re-runs the action on reactive change)
  *
  * @remarks
  * The `units` option should not be changed dynamically after initialization.
@@ -63,4 +49,4 @@ export interface ResizableWidthOptions {
  * </div>
  * ```
  */
-export declare function resizableWidth(el: HTMLDivElement, fn?: () => ResizableWidthOptions): void;
+export declare function resizableWidth(el: HTMLElement, fn?: () => ResizableWidthOptions): void;

package/dist/actions/resizable-width.svelte.js

@@ -1,22 +1,16 @@
-import { localStorageState, sessionStorageState, } from "../utils/persistent-state.svelte.js";
-import { twMerge } from "../utils/tw-merge.js";
+import { resizable } from "../attachments/resizable.js";
 /**
- * A Svelte action that makes an element's width resizable via drag handle.
+ * A Svelte action that makes an element's width resizable via a drag handle on its
+ * right (or, with `reverse`, left) edge.
  *
- * Adds a draggable handle to the right (or left with `reverse`) edge of the element.
- * Supports mouse and touch input.
- * Optionally persists the width to localStorage/sessionStorage.
- *
- * Features:
- * - Drag handle with visual feedback
- * - Min/max width constraints
- * - Support for px or % units
- * - Optional storage persistence with custom key
- * - Double-click handle to reset to initial width
- * - Touch device support
+ * Kept for back-compat: it is a thin wrapper over the `resizable` attachment
+ * (`axis: "x"`), so it has everything the attachment has — the handle is a focusable
+ * `role="separator"` with arrow / Home / End / Enter keyboard resizing, Pointer Events
+ * cover mouse, touch and pen, `min` / `max` clamp, `key` persists, double-click resets.
+ * For new code (and for heights) use `{@attach resizable(...)}` directly.
  *
  * @param el - The element to make resizable
- * @param fn - Function returning configuration options
+ * @param fn - Function returning configuration options (re-runs the action on reactive change)
  *
  * @remarks
  * The `units` option should not be changed dynamically after initialization.
@@ -44,162 +38,13 @@ import { twMerge } from "../utils/tw-merge.js";
  * ```
  */
 export function resizableWidth(el, fn) {
-    const HANDLE_CLS_BASE = [
-        "group",
-        "absolute top-0 bottom-0",
-        "w-[1px]",
-        "bg-black/20 hover:bg-black/30",
-        "dark:bg-white/10 dark:hover:bg-white/20",
-        "transition-colors duration-200",
-        "touch-none cursor-ew-resize",
-    ].join(" ");
-    const DEFAULT_DRAG_HANDLE_CLS = [
-        "absolute h-[20px] w-[9px]",
-        "-translate-x-[4px] top-1/2 -translate-y-1/2",
-        "rounded border border-black/20 dark:border-white/20",
-        "bg-gray-300 group-hover:bg-gray-400",
-        "dark:bg-gray-600 dark:group-hover:bg-gray-500",
-        "transition-colors duration-200",
-        "touch-none cursor-ew-resize",
-    ].join(" ");
-    function create_handle(el, handleClass, handleDragClass, reverse) {
-        const handle = document.createElement("div");
-        handle.setAttribute("data-handle", "true");
-        const dragHandle = document.createElement("div");
-        dragHandle.classList.add(...twMerge(DEFAULT_DRAG_HANDLE_CLS, handleDragClass).split(" "));
-        handle.appendChild(dragHandle);
-        el.appendChild(handle);
-        //
-        const positionCls = reverse ? "left-0" : "right-0";
-        handle.classList.add(...twMerge(HANDLE_CLS_BASE, positionCls, handleClass).split(" "));
-        return handle;
-    }
     $effect(() => {
-        const { enabled = true, initial: initialValue = 0, min = 0, max = 0, units = "px", reverse = false, key, storage = "session", handleClass = "", handleDragClass = "", onResize, debug, } = fn?.() || {};
-        let initial = initialValue;
-        const _debug = (...args) => debug?.("[resizable-width]", ...args);
-        _debug("$effect");
-        if (!enabled)
-            return;
-        // initialize ////////////////////////////////////////////////////////////////////
-        //
-        let isResizing = false;
-        let startX = 0;
-        let startWidth = 0;
-        let containerW = undefined;
-        //
-        const handle = create_handle(el, handleClass, handleDragClass, reverse);
-        const container = el.parentElement;
-        // do we have a storage? if so, adjust the initial value...
-        const initialBackup = initial;
-        const _storage = get_storage(storage, key, initial);
-        if (_storage)
-            initial = _storage.current ?? initial;
-        // handlers/workers/helpers //////////////////////////////////////////////////////
-        function set_width(pxOrPercent) {
-            if (pxOrPercent) {
-                _debug(`set_width(${pxOrPercent})`);
-                set_width_px(units === "%" ? container.offsetWidth * (pxOrPercent / 100) : pxOrPercent);
-            }
-        }
-        function set_width_px(widthPx) {
-            _debug(`set_width_px(${widthPx})`);
-            containerW ??= container.offsetWidth;
-            const clamp = (value) => {
-                const _initial = value;
-                if (min)
-                    value = Math.max(min, value);
-                if (max)
-                    value = Math.min(max, value);
-                if (_initial !== value)
-                    _debug("clamped", value, units);
-                return value;
-            };
-            let width;
-            if (units === "%") {
-                const widthPercent = Math.min(100, (widthPx / containerW) * 100); // convert to % (with 100 max)
-                width = clamp(widthPercent);
-            }
-            else {
-                width = clamp(widthPx);
-            }
-            el.style.width = `${width}${units}`;
-            _debug("new width", width, units);
-            const info = { width, units, container: containerW };
-            onResize?.(info);
-            // maybe save to storage
-            if (_storage)
-                _storage.current = width;
-            return info;
-        }
-        function resize_start(e) {
-            e.preventDefault(); // prevent scrolling on touch devices
-            isResizing = true;
-            //
-            const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
-            startX = clientX;
-            startWidth = parseInt(getComputedStyle(el).width, 10);
-            containerW = container.offsetWidth;
-            //
-            document.body.style.cursor = "ew-resize";
-            document.body.style.userSelect = "none";
-        }
-        function resize(e) {
-            if (!isResizing)
-                return;
-            e.preventDefault(); // prevent scrolling on touch devices
-            //
-            const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
-            const deltaX = clientX - startX;
-            const width = reverse ? startWidth - deltaX : startWidth + deltaX;
-            set_width_px(width);
-        }
-        function resize_stop() {
-            if (isResizing) {
-                isResizing = false;
-                containerW = undefined;
-                //
-                document.body.style.cursor = "";
-                document.body.style.userSelect = "";
-            }
-        }
-        function on_dblclick() {
-            set_width(initialBackup);
-        }
-        // initial styles ////////////////////////////////////////////////////////////////
-        el.style.position = "relative"; // so the handle will work
-        set_width(initial);
-        // listeners /////////////////////////////////////////////////////////////////////
-        // handle
-        handle.addEventListener("dblclick", on_dblclick);
-        handle.addEventListener("selectstart", (e) => e.preventDefault()); // prevent text selection during resize
-        // mouse
-        handle.addEventListener("mousedown", resize_start);
-        document.addEventListener("mousemove", resize);
-        document.addEventListener("mouseup", resize_stop);
-        // touch
-        handle.addEventListener("touchstart", resize_start, { passive: false });
-        document.addEventListener("touchmove", resize, { passive: false });
-        document.addEventListener("touchend", resize_stop);
-        document.addEventListener("touchcancel", resize_stop);
-        // cleanup ///////////////////////////////////////////////////////////////////////
-        return () => {
-            // mouse
-            document.removeEventListener("mousemove", resize);
-            document.removeEventListener("mouseup", resize_stop);
-            // touch
-            document.removeEventListener("touchmove", resize);
-            document.removeEventListener("touchend", resize_stop);
-            document.removeEventListener("touchcancel", resize_stop);
-            // will also remove it's own event listeners
-            handle.remove();
-        };
+        const { onResize, ...rest } = fn?.() || {};
+        return resizable({
+            ...rest,
+            axis: "x",
+            onResize: onResize &&
+                (({ size, units, container }) => onResize({ width: size, units, container })),
+        })(el);
     });
 }
-// helpers ///////////////////////////////////////////////////////////////////////////////
-function get_storage(type, key, initialValue) {
-    if (key) {
-        return (type === "session" ? sessionStorageState : localStorageState)(`resizable-width-${key}`, initialValue);
-    }
-    return null;
-}

package/dist/attachments/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./auto-height.js";
 export * from "./long-press.js";
+export * from "./resizable.js";

package/dist/attachments/index.js

@@ -1,2 +1,3 @@
 export * from "./auto-height.js";
 export * from "./long-press.js";
+export * from "./resizable.js";