@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-split.mjs

@@ -0,0 +1,1082 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, untracked, ChangeDetectionStrategy, Component, inject, ElementRef, NgZone, DestroyRef, PLATFORM_ID, contentChildren, computed, afterNextRender, effect, isDevMode, Directive } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Directionality } from '@angular/cdk/bidi';
+import { tv } from 'tailwind-variants';
+
+/**
+ * A single resizable pane inside `<tw-split>`.
+ * Declare size constraints here; the parent container drives the actual sizing.
+ */
+class SplitPaneComponent {
+    /** Initial size of this pane in the container's unit. Omit to use even distribution. */
+    defaultSize = input(undefined, ...(ngDevMode ? [{ debugName: "defaultSize" }] : /* istanbul ignore next */ []));
+    /** Minimum size in the container's unit. The gutter will not move past this. Defaults to `0`. */
+    minSize = input(0, ...(ngDevMode ? [{ debugName: "minSize" }] : /* istanbul ignore next */ []));
+    /** Maximum size in the container's unit. The gutter will not move past this. Defaults to `Infinity`. */
+    maxSize = input(Infinity, ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    /** When true, the pane may collapse to `collapsedSize` via snap, keyboard, or API. Defaults to `false`. */
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    /** Size to use when the pane is collapsed. May be `> 0` for rail-style collapse. Defaults to `0`. */
+    collapsedSize = input(0, ...(ngDevMode ? [{ debugName: "collapsedSize" }] : /* istanbul ignore next */ []));
+    /**
+     * If `> 0`, dragging within `snapSize` units of `collapsedSize` snaps the pane closed.
+     * Dragging back out past `snapSize` re-expands it. Defaults to `0` (snap disabled).
+     */
+    snapSize = input(0, ...(ngDevMode ? [{ debugName: "snapSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Stable ordering token used by the container when content-projection order and
+     * resize math must stay consistent across change detection. Defaults to declaration order.
+     */
+    order = input(undefined, ...(ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []));
+    /** Fires when this pane's size changes, in the container's unit. */
+    sizeChange = output();
+    /** Fires when this pane's collapsed state changes. */
+    collapsedChange = output();
+    /**
+     * @internal
+     * Written by the parent SplitComponent to set this pane's current flex-basis.
+     * Not part of the public API.
+     */
+    _basis = signal('', ...(ngDevMode ? [{ debugName: "_basis" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal
+     * Current size in the container's unit. Written by the parent SplitComponent.
+     * Not part of the public API.
+     */
+    _size = signal(0, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal
+     * Written by the parent SplitComponent to reflect collapsed state on the host.
+     * Not part of the public API.
+     */
+    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal
+     * Size recorded immediately before this pane collapses, restored on expand.
+     * `null` whenever the pane is not collapsed or no pre-collapse size was captured.
+     */
+    _preCollapseSize = signal(null, ...(ngDevMode ? [{ debugName: "_preCollapseSize" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal
+     * Pane's positional index. Drives flex `order` so gutters can interleave via
+     * order = index * 2 + 1.
+     */
+    _index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal
+     * DOM id used by the parent gutter's `aria-controls` reference.
+     * Assigned by the parent SplitComponent on content reconciliation.
+     */
+    _paneId = signal(null, ...(ngDevMode ? [{ debugName: "_paneId" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal — idempotent id assignment. Re-using the existing id when the
+     * pane is re-reconciled keeps aria-controls stable across CD. The current
+     * id is read via `untracked` so callers running inside an `effect()` don't
+     * subscribe to `_paneId` and re-fire when it transitions from `null`.
+     */
+    _ensureId(componentId, index) {
+        if (untracked(() => this._paneId()) === null) {
+            this._paneId.set(`${componentId}-pane-${index}`);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SplitPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SplitPaneComponent, isStandalone: true, selector: "tw-split-pane", inputs: { defaultSize: { classPropertyName: "defaultSize", publicName: "defaultSize", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsedSize: { classPropertyName: "collapsedSize", publicName: "collapsedSize", isSignal: true, isRequired: false, transformFunction: null }, snapSize: { classPropertyName: "snapSize", publicName: "snapSize", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.id": "_paneId()", "style.flex-basis": "_basis()", "style.min-width": "\"0\"", "style.min-height": "\"0\"", "style.order": "_index() * 2", "attr.data-split-pane-collapsed": "_collapsed()" }, classAttribute: "overflow-auto" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SplitPaneComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-split-pane',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.id]': '_paneId()',
+                        '[style.flex-basis]': '_basis()',
+                        '[style.min-width]': '"0"',
+                        '[style.min-height]': '"0"',
+                        '[style.order]': '_index() * 2',
+                        '[attr.data-split-pane-collapsed]': '_collapsed()',
+                        class: 'overflow-auto',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { defaultSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSize", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsedSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedSize", required: false }] }], snapSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapSize", required: false }] }], order: [{ type: i0.Input, args: [{ isSignal: true, alias: "order", required: false }] }], sizeChange: [{ type: i0.Output, args: ["sizeChange"] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }] } });
+
+const EPSILON = 0.01;
+// ── Helpers ───────────────────────────────────────────────────────────────────
+/** Clamps `value` into `[min, max]` without wrapping. */
+function clampSize(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Available space for pane content after subtracting gutters.
+ * For percent mode this is used only when we need a px reference (e.g., pixel
+ * unit sizing or overflow detection); percent sizes are always relative to this
+ * space but expressed as 0-100 sums.
+ */
+function availableSpace(containerPx, numPanes, gutterSize) {
+    return Math.max(0, containerPx - Math.max(0, numPanes - 1) * gutterSize);
+}
+/**
+ * CSS flex-basis string for a pane.
+ *
+ * Percent mode: sizes represent percentages of the available space (container
+ * minus gutters). Since CSS `%` is relative to the flex container (which
+ * includes gutter space), we subtract each pane's proportional share of total
+ * gutter space via `calc()`. This requires no knowledge of the container's
+ * pixel size at render time.
+ *
+ * Pixel mode: a simple pixel value.
+ */
+function computeBasis(size, unit, numPanes, gutterSize) {
+    if (unit === 'pixel')
+        return `${size}px`;
+    const totalGutterPx = Math.max(0, numPanes - 1) * gutterSize;
+    const gutterShare = (size / 100) * totalGutterPx;
+    // Round to 4 decimal places so the CSS string is deterministic and readable.
+    const pct = +size.toFixed(4);
+    const gutter = +gutterShare.toFixed(4);
+    return `calc(${pct}% - ${gutter}px)`;
+}
+// ── Constraint resolver ───────────────────────────────────────────────────────
+/**
+ * Resolve initial sizes from pane configs.
+ * Priority (§4.2): defaultSize → even distribution.
+ * Results are clamped against minSize/maxSize.
+ */
+function resolveInitialSizes(panes, unit, availablePx) {
+    const n = panes.length;
+    if (n === 0)
+        return [];
+    // Pixel mode with unknown container: use declared defaults directly.
+    // ResizeObserver will scale them once the real container size is known.
+    if (unit === 'pixel' && availablePx <= 0) {
+        return panes.map(p => clampSize(p.defaultSize ?? 0, p.minSize, p.maxSize));
+    }
+    const totalUnit = unit === 'percent' ? 100 : availablePx;
+    const declaredSum = panes.reduce((acc, p) => acc + (p.defaultSize ?? 0), 0);
+    const undeclaredCount = panes.filter(p => p.defaultSize === undefined).length;
+    const remaining = Math.max(0, totalUnit - declaredSum);
+    const undeclaredShare = undeclaredCount > 0 ? remaining / undeclaredCount : 0;
+    const raw = panes.map(p => p.defaultSize ?? undeclaredShare);
+    return redistributeWithConstraints(raw, panes, totalUnit);
+}
+/**
+ * Clamp sizes against per-pane min/max, redistributing slack proportionally
+ * among unclamped panes until the target total is satisfied (§4.2).
+ *
+ * Iterates up to `n + 1` times — sufficient for any acyclic constraint graph.
+ */
+function redistributeWithConstraints(sizes, panes, totalUnit) {
+    const n = sizes.length;
+    // Start with all values clamped to their feasible range.
+    const result = sizes.map((s, i) => clampSize(s, panes[i].minSize, panes[i].maxSize));
+    for (let iter = 0; iter <= n; iter++) {
+        const currentSum = result.reduce((a, b) => a + b, 0);
+        if (Math.abs(currentSum - totalUnit) < EPSILON)
+            break;
+        // Find panes that can flex in the direction needed to reach the target.
+        const flex = [];
+        if (currentSum < totalUnit) {
+            for (let i = 0; i < n; i++) {
+                if (result[i] < panes[i].maxSize - EPSILON)
+                    flex.push(i);
+            }
+        }
+        else {
+            for (let i = 0; i < n; i++) {
+                if (result[i] > panes[i].minSize + EPSILON)
+                    flex.push(i);
+            }
+        }
+        if (flex.length === 0)
+            break; // constraints infeasible — best-effort result
+        const flexSet = new Set(flex);
+        const fixedSum = result.reduce((acc, s, i) => (flexSet.has(i) ? acc : acc + s), 0);
+        const flexTarget = totalUnit - fixedSum;
+        const flexCurrent = flex.reduce((acc, i) => acc + result[i], 0);
+        if (Math.abs(flexCurrent - flexTarget) < EPSILON)
+            break;
+        if (flexCurrent <= EPSILON) {
+            const share = flexTarget / flex.length;
+            for (const i of flex)
+                result[i] = clampSize(share, panes[i].minSize, panes[i].maxSize);
+        }
+        else {
+            const scale = flexTarget / flexCurrent;
+            for (const i of flex)
+                result[i] = clampSize(result[i] * scale, panes[i].minSize, panes[i].maxSize);
+        }
+    }
+    return result;
+}
+// ── Container resize rescaling (§4.3) ─────────────────────────────────────────
+/**
+ * Rescale sizes after a container resize event.
+ *
+ * - Percent mode: proportions (percentages) are preserved; re-clamp only.
+ * - Pixel mode: scale sizes proportionally to the new available space, then
+ *   re-clamp.
+ *
+ * Returns the new sizes and a flag indicating whether any pane was clamped
+ * beyond its proportional share (used to decide whether to fire sizesChange).
+ */
+function rescaleForContainerResize(currentSizes, panes, unit, oldAvailablePx, newAvailablePx) {
+    const n = currentSizes.length;
+    if (n === 0)
+        return { sizes: [], clamped: false };
+    const totalUnit = unit === 'percent' ? 100 : newAvailablePx;
+    let proposed;
+    if (unit === 'percent') {
+        proposed = [...currentSizes];
+    }
+    else {
+        const ratio = oldAvailablePx > EPSILON ? newAvailablePx / oldAvailablePx : 1;
+        proposed = currentSizes.map(s => s * ratio);
+    }
+    const clamped = redistributeWithConstraints(proposed, panes, totalUnit);
+    const wasClamped = clamped.some((s, i) => Math.abs(s - proposed[i]) > EPSILON);
+    return { sizes: clamped, clamped: wasClamped };
+}
+// ── Pane add / remove (§4.4) ──────────────────────────────────────────────────
+/**
+ * Compute sizes after a new pane is inserted at `newPaneIndex`.
+ * The new pane enters at its defaultSize (or an equal share if unset);
+ * existing panes shrink proportionally to accommodate it.
+ */
+function redistributeOnPaneAdded(currentSizes, newPaneIndex, newPaneConfig, allPaneConfigs, unit, availablePx) {
+    const n = allPaneConfigs.length;
+    const totalUnit = unit === 'percent' ? 100 : availablePx;
+    const newSize = clampSize(newPaneConfig.defaultSize ?? totalUnit / n, newPaneConfig.minSize, newPaneConfig.maxSize);
+    const existingTarget = Math.max(0, totalUnit - newSize);
+    const existingSum = currentSizes.reduce((a, b) => a + b, 0);
+    const scaled = existingSum > EPSILON
+        ? currentSizes.map(s => (s / existingSum) * existingTarget)
+        : currentSizes.map(() => existingTarget / Math.max(1, currentSizes.length));
+    const result = [...scaled];
+    result.splice(newPaneIndex, 0, newSize);
+    return redistributeWithConstraints(result, allPaneConfigs, totalUnit);
+}
+/**
+ * Compute sizes after the pane at `removedIndex` is removed.
+ * Its space is redistributed proportionally to remaining panes.
+ */
+function redistributeOnPaneRemoved(currentSizes, removedIndex, remainingPaneConfigs, unit, availablePx) {
+    const remaining = currentSizes.filter((_, i) => i !== removedIndex);
+    if (remaining.length === 0)
+        return [];
+    const totalUnit = unit === 'percent' ? 100 : availablePx;
+    const remainingSum = remaining.reduce((a, b) => a + b, 0);
+    const scaled = remainingSum > EPSILON
+        ? remaining.map(s => (s / remainingSum) * totalUnit)
+        : remaining.map(() => totalUnit / remaining.length);
+    return redistributeWithConstraints(scaled, remainingPaneConfigs, totalUnit);
+}
+// ── Overflow check (§4.2) ─────────────────────────────────────────────────────
+/** Returns true when the sum of all minSizes exceeds the available space. */
+function hasMinSizeOverflow(panes, unit, availablePx) {
+    const totalUnit = unit === 'percent' ? 100 : availablePx;
+    const minSum = panes.reduce((acc, p) => acc + p.minSize, 0);
+    return minSum > totalUnit + EPSILON;
+}
+
+let nextSplitId = 0;
+const splitVariants = tv({
+    slots: {
+        root: 'flex h-full w-full',
+        gutter: 'shrink-0 bg-border transition-colors duration-normal motion-reduce:transition-none hover:bg-border-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+    },
+    variants: {
+        direction: {
+            horizontal: { root: 'flex-row', gutter: 'cursor-col-resize' },
+            vertical: { root: 'flex-col', gutter: 'cursor-row-resize' },
+        },
+        disabled: {
+            true: { gutter: 'opacity-50 pointer-events-none cursor-default' },
+            false: {},
+        },
+    },
+    defaultVariants: {
+        direction: 'horizontal',
+        disabled: false,
+    },
+}, { twMerge: true });
+/**
+ * Container component that lays out two or more panes along a single axis and
+ * lets the user resize them by dragging the gutters between them.
+ *
+ * @example
+ * ```html
+ * <tw-split direction="horizontal" [gutterSize]="6">
+ *   <tw-split-pane [defaultSize]="30" [minSize]="15">…</tw-split-pane>
+ *   <tw-split-pane [defaultSize]="70">…</tw-split-pane>
+ * </tw-split>
+ * ```
+ */
+class SplitComponent {
+    /** Axis along which panes are laid out. `'horizontal'` = side-by-side; `'vertical'` = stacked. Defaults to `'horizontal'`. */
+    direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** How sizes are expressed and reported. A single unit governs the whole container. Defaults to `'percent'`. */
+    unit = input('percent', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    /** Thickness of each gutter in pixels, perpendicular to the split axis. Defaults to `6`. */
+    gutterSize = input(6, ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
+    /** When true, all resize interactions are disabled. Gutters are not focusable and do not respond to input. Defaults to `false`. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** How much to move the gutter per arrow-key press, in the container's declared unit. Defaults to `10`. */
+    keyboardStep = input(10, ...(ngDevMode ? [{ debugName: "keyboardStep" }] : /* istanbul ignore next */ []));
+    /** Step size for `PageUp` / `PageDown` key presses, in the container's declared unit. Defaults to `50`. */
+    keyboardStepLarge = input(50, ...(ngDevMode ? [{ debugName: "keyboardStepLarge" }] : /* istanbul ignore next */ []));
+    /**
+     * If non-null, pane sizes are persisted to `localStorage` under this key and restored on init.
+     * Defaults to `null` (persistence disabled).
+     */
+    storageKey = input(null, ...(ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, horizontal direction is visually reversed (RTL layout).
+     * Defaults to `null`, which means the value is inherited from the nearest ancestor `dir` attribute.
+     */
+    rtl = input(null, ...(ngDevMode ? [{ debugName: "rtl" }] : /* istanbul ignore next */ []));
+    /**
+     * Fires after any committed resize with the ordered array of current pane sizes.
+     * Does **not** fire on every pointer move during drag — only on commit (release, keyboard step, programmatic call).
+     */
+    sizesChange = output();
+    /** Fires on pointer/touch down or keyboard-initiated resize start. */
+    resizeStart = output();
+    /** Fires on pointer/touch up, blur, or keyboard resize commit. */
+    resizeEnd = output();
+    /** Fires when a pane collapses or expands via snap, keyboard, or programmatic API. */
+    collapseChange = output();
+    _elRef = inject(ElementRef);
+    _ngZone = inject(NgZone);
+    _destroyRef = inject(DestroyRef);
+    _directionality = inject(Directionality, { optional: true });
+    _isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    _panes = contentChildren(SplitPaneComponent, ...(ngDevMode ? [{ debugName: "_panes" }] : /* istanbul ignore next */ []));
+    /** Stable id used to namespace per-pane DOM ids inside this container. */
+    _componentId = `tw-split-${nextSplitId++}`;
+    /**
+     * @internal
+     * Container dimension in pixels along the split axis, updated by ResizeObserver.
+     * Starts at 0 until the first observation fires.
+     */
+    _containerSizePx = signal(0, ...(ngDevMode ? [{ debugName: "_containerSizePx" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal
+     * Current pane sizes in the container's declared unit.
+     * Percent mode: values sum to 100 (within epsilon).
+     * Pixel mode: values are absolute pixel sizes.
+     */
+    _sizes = signal([], ...(ngDevMode ? [{ debugName: "_sizes" }] : /* istanbul ignore next */ []));
+    /** Tracks the live `dir` attribute resolved through CDK Directionality. */
+    _cdkDir = signal(this._directionality?.value ?? 'ltr', ...(ngDevMode ? [{ debugName: "_cdkDir" }] : /* istanbul ignore next */ []));
+    /** Resolves the effective RTL state: explicit `rtl` input overrides CDK `dir`. */
+    _isRtl = computed(() => this.rtl() ?? this._cdkDir() === 'rtl', ...(ngDevMode ? [{ debugName: "_isRtl" }] : /* istanbul ignore next */ []));
+    // Previous pane refs — plain field, not a signal, so the pane effect does
+    // not re-run just because we wrote this value.
+    _prevPaneRefs = null;
+    /** True until the first pane-list reconciliation has run; gates persistence hydration. */
+    _initialReconciled = false;
+    /** Resolved class strings from tailwind-variants. */
+    _classes = computed(() => splitVariants({
+        direction: this.direction(),
+        disabled: this.disabled(),
+    }), ...(ngDevMode ? [{ debugName: "_classes" }] : /* istanbul ignore next */ []));
+    _rootClass = computed(() => this._classes().root(), ...(ngDevMode ? [{ debugName: "_rootClass" }] : /* istanbul ignore next */ []));
+    _gutterClass = computed(() => this._classes().gutter(), ...(ngDevMode ? [{ debugName: "_gutterClass" }] : /* istanbul ignore next */ []));
+    /** Indices `0..panes.length - 2` representing the gutter between pane[i] and pane[i+1]. */
+    _gutterIndices = computed(() => {
+        const n = this._panes().length;
+        return n > 0 ? Array.from({ length: n - 1 }, (_, i) => i) : [];
+    }, ...(ngDevMode ? [{ debugName: "_gutterIndices" }] : /* istanbul ignore next */ []));
+    /** @internal — drag state for the active pointer. */
+    _drag = null;
+    constructor() {
+        // ResizeObserver — runs outside Angular zone to avoid CD on every resize.
+        // Guard against environments (e.g. jsdom in tests) where ResizeObserver
+        // is not available; those environments call _onContainerResize() directly.
+        afterNextRender(() => {
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const el = this._elRef.nativeElement;
+            const ro = new ResizeObserver(entries => {
+                const rect = entries[0]?.contentRect;
+                if (!rect)
+                    return;
+                const sizePx = this.direction() === 'horizontal' ? rect.width : rect.height;
+                this._ngZone.run(() => this._onContainerResize(sizePx));
+            });
+            ro.observe(el);
+            this._destroyRef.onDestroy(() => ro.disconnect());
+        });
+        // Pane-list effect — re-runs whenever the ContentChildren list changes.
+        // Container size is read with untracked() so this effect does NOT re-run
+        // on container resize (the ResizeObserver handles that path independently).
+        effect(() => {
+            const panes = this._panes();
+            const containerPx = untracked(() => this._containerSizePx());
+            this._onPanesChange(panes, containerPx);
+        });
+        // Reflect CDK Directionality changes into the local signal so the computed
+        // _isRtl re-evaluates and keyboard / pointer handlers honour live `dir`
+        // attribute changes (e.g. when an ancestor flips the page direction).
+        if (this._directionality) {
+            const sub = this._directionality.change.subscribe(value => {
+                this._cdkDir.set(value);
+            });
+            this._destroyRef.onDestroy(() => sub.unsubscribe());
+        }
+    }
+    // ── Internal resize handler ─────────────────────────────────────────────────
+    /**
+     * @internal — exposed for testing; do not call from application code.
+     * Called by the ResizeObserver when the container's pixel size changes.
+     */
+    _onContainerResize(newSizePx) {
+        const oldSizePx = this._containerSizePx();
+        if (Math.abs(newSizePx - oldSizePx) < 0.5)
+            return;
+        const panes = this._panes();
+        const unit = this.unit();
+        const gutterSize = this.gutterSize();
+        const n = panes.length;
+        const oldAvailable = availableSpace(oldSizePx, n, gutterSize);
+        const newAvailable = availableSpace(newSizePx, n, gutterSize);
+        const currentSizes = this._sizes();
+        const configs = panes.map(toPaneConfig);
+        const { sizes, clamped } = rescaleForContainerResize(currentSizes, configs, unit, oldAvailable, newAvailable);
+        this._containerSizePx.set(newSizePx);
+        this._sizes.set(sizes);
+        this._applyToPanes(panes, sizes, unit, n, gutterSize);
+        // Fire sizesChange only when clamping altered a proportional share (§4.3)
+        if (clamped) {
+            this._commit(sizes);
+        }
+    }
+    // ── Pane-list reconciliation ────────────────────────────────────────────────
+    /**
+     * @internal — exposed for testing; do not call from application code.
+     * Called by the contentChildren effect when the pane list changes.
+     */
+    _onPanesChange(panes, containerPx) {
+        const unit = this.unit();
+        const gutterSize = this.gutterSize();
+        const n = panes.length;
+        const available = availableSpace(containerPx, n, gutterSize);
+        // Assign a stable DOM id to each pane so aria-controls on the gutter can
+        // reference them. Idempotent — only the first assignment for a given pane
+        // sticks; later runs are no-ops.
+        for (let i = 0; i < panes.length; i++) {
+            panes[i]._ensureId(this._componentId, i);
+        }
+        if (this._prevPaneRefs === null) {
+            const restored = this._readPersistedSizes(panes);
+            if (restored) {
+                this._sizes.set(restored);
+                this._applyToPanes(panes, restored, unit, panes.length, gutterSize);
+            }
+            else {
+                this._initializeSizes(panes, unit, available, gutterSize);
+            }
+        }
+        else {
+            this._reconcilePanes(panes, this._prevPaneRefs, unit, available, gutterSize);
+        }
+        this._prevPaneRefs = panes;
+        this._initialReconciled = true;
+    }
+    _initializeSizes(panes, unit, available, gutterSize) {
+        if (panes.length === 0) {
+            this._sizes.set([]);
+            return;
+        }
+        const configs = panes.map(toPaneConfig);
+        if (available > 0 && isDevMode() && hasMinSizeOverflow(configs, unit, available)) {
+            console.warn(`SplitComponent: sum of minSize values exceeds available space (${available}${unit === 'percent' ? '%' : 'px'}). Panes will overflow.`);
+        }
+        const sizes = resolveInitialSizes(configs, unit, available);
+        this._sizes.set(sizes);
+        this._applyToPanes(panes, sizes, unit, panes.length, gutterSize);
+    }
+    _reconcilePanes(newPanes, prevPanes, unit, available, gutterSize) {
+        // `_reconcilePanes` runs from inside the contentChildren effect; reading
+        // `_sizes` tracked + writing `_sizes.set(newArray)` below would re-fire the
+        // effect on every CD tick (new array reference fails Object.is equality).
+        const currentSizes = untracked(() => this._sizes());
+        let sizes = [...currentSizes];
+        const prevSet = new Set(prevPanes);
+        const newSet = new Set(newPanes);
+        const added = newPanes.filter(p => !prevSet.has(p));
+        const removed = prevPanes.filter(p => !newSet.has(p));
+        // Process removals first (working against the prev order)
+        let workingPanes = [...prevPanes];
+        for (const removedPane of removed) {
+            const idx = workingPanes.indexOf(removedPane);
+            if (idx === -1)
+                continue;
+            workingPanes = workingPanes.filter((_, i) => i !== idx);
+            sizes = redistributeOnPaneRemoved(sizes, idx, workingPanes.map(toPaneConfig), unit, available);
+        }
+        // Process additions — `sizes` already represents workingPanes (without the
+        // new pane). redistributeOnPaneAdded inserts the new size at newIdx internally.
+        for (const addedPane of added) {
+            const newIdx = newPanes.indexOf(addedPane);
+            workingPanes = [...workingPanes];
+            workingPanes.splice(newIdx, 0, addedPane);
+            sizes = redistributeOnPaneAdded(sizes, newIdx, toPaneConfig(addedPane), workingPanes.map(toPaneConfig), unit, available);
+        }
+        this._sizes.set(sizes);
+        this._applyToPanes(newPanes, sizes, unit, newPanes.length, gutterSize);
+    }
+    // ── Apply sizes to pane DOM ─────────────────────────────────────────────────
+    _applyToPanes(panes, sizes, unit, numPanes, gutterSize) {
+        for (let i = 0; i < panes.length; i++) {
+            const size = sizes[i] ?? 0;
+            // Read the previous size without subscribing — `_applyToPanes` runs from
+            // an effect (initial reconciliation) as well as direct calls, and a
+            // tracked read combined with the write below would loop the effect
+            // indefinitely.
+            const prev = untracked(() => panes[i]._size());
+            panes[i]._index.set(i);
+            panes[i]._basis.set(computeBasis(size, unit, numPanes, gutterSize));
+            panes[i]._size.set(size);
+            if (Math.abs(prev - size) > 1e-6) {
+                panes[i].sizeChange.emit(size);
+            }
+        }
+    }
+    // ── Public API ──────────────────────────────────────────────────────────────
+    /**
+     * Programmatically set all pane sizes.
+     * The array length must equal the current pane count and sizes must be
+     * compatible with the declared unit. Throws on mismatch.
+     */
+    setSizes(sizes) {
+        const panes = this._panes();
+        if (sizes.length !== panes.length) {
+            throw new Error(`SplitComponent.setSizes: expected ${panes.length} sizes, got ${sizes.length}`);
+        }
+        const unit = this.unit();
+        const containerPx = this._containerSizePx();
+        const gutterSize = this.gutterSize();
+        const n = panes.length;
+        const available = availableSpace(containerPx, n, gutterSize);
+        const totalUnit = unit === 'percent' ? 100 : available;
+        const configs = panes.map(toPaneConfig);
+        const clamped = redistributeWithConstraints(sizes, configs, totalUnit);
+        this._sizes.set(clamped);
+        this._applyToPanes(panes, clamped, unit, n, gutterSize);
+        this._commit(clamped);
+    }
+    /**
+     * Collapse the pane at `paneIndex` to its `collapsedSize`.
+     * The pane must have `collapsible = true`. Throws if the index is out of range.
+     */
+    collapse(paneIndex) {
+        const panes = this._panes();
+        if (paneIndex < 0 || paneIndex >= panes.length) {
+            throw new Error(`SplitComponent.collapse: paneIndex ${paneIndex} out of range`);
+        }
+        const pane = panes[paneIndex];
+        if (!pane.collapsible()) {
+            throw new Error(`SplitComponent.collapse: pane ${paneIndex} is not marked collapsible`);
+        }
+        if (pane._collapsed())
+            return;
+        this._setCollapsed(panes, paneIndex, true, 'programmatic');
+    }
+    /**
+     * Restore the pane at `paneIndex` to its pre-collapse size, or its `defaultSize` if none is recorded.
+     * Throws if the index is out of range.
+     */
+    expand(paneIndex) {
+        const panes = this._panes();
+        if (paneIndex < 0 || paneIndex >= panes.length) {
+            throw new Error(`SplitComponent.expand: paneIndex ${paneIndex} out of range`);
+        }
+        const pane = panes[paneIndex];
+        if (!pane._collapsed())
+            return;
+        this._setCollapsed(panes, paneIndex, false, 'programmatic');
+    }
+    /**
+     * Restore all panes to their declared `defaultSize` values.
+     * Clears any persisted sizes if `storageKey` is set.
+     */
+    reset() {
+        const panes = this._panes();
+        const unit = this.unit();
+        const containerPx = this._containerSizePx();
+        const gutterSize = this.gutterSize();
+        const n = panes.length;
+        const available = availableSpace(containerPx, n, gutterSize);
+        for (const pane of panes) {
+            pane._collapsed.set(false);
+            pane._preCollapseSize.set(null);
+        }
+        this._initializeSizes(panes, unit, available, gutterSize);
+        if (panes.length > 0) {
+            this.sizesChange.emit([...this._sizes()]);
+        }
+        // Clear persisted sizes after emit so the cleared state is the resting
+        // state at the end of reset(). New commits will repopulate the entry.
+        this._clearPersistedSizes();
+    }
+    // ── ARIA / pointer / keyboard ───────────────────────────────────────────────
+    /** @internal — `aria-valuenow` for the gutter between pane i and i+1. Reports the LEFT pane size as a percent. */
+    _ariaValueNow(gutterIndex) {
+        const sizes = this._sizes();
+        const size = sizes[gutterIndex];
+        if (size === undefined)
+            return null;
+        if (this.unit() === 'percent')
+            return Math.round(size);
+        const available = availableSpace(this._containerSizePx(), this._panes().length, this.gutterSize());
+        if (available <= 0)
+            return null;
+        return Math.round((size / available) * 100);
+    }
+    /** @internal — `aria-controls` references the two adjacent panes' DOM ids. */
+    _ariaControls(gutterIndex) {
+        const panes = this._panes();
+        const a = panes[gutterIndex]?._paneId();
+        const b = panes[gutterIndex + 1]?._paneId();
+        if (!a || !b)
+            return null;
+        return `${a} ${b}`;
+    }
+    /** @internal — accessible name fallback for the separator handle. */
+    _ariaLabel(gutterIndex) {
+        return this.direction() === 'horizontal'
+            ? `Resize column ${gutterIndex + 1}`
+            : `Resize row ${gutterIndex + 1}`;
+    }
+    /** @internal */
+    _onGutterPointerDown(event, gutterIndex) {
+        if (this.disabled() || event.button !== 0)
+            return;
+        const target = event.target;
+        target.setPointerCapture(event.pointerId);
+        const startClient = this.direction() === 'horizontal' ? event.clientX : event.clientY;
+        const startSizes = [...this._sizes()];
+        const moveHandler = (e) => this._onGutterPointerMove(e);
+        const upHandler = (e) => this._onGutterPointerUp(e);
+        target.addEventListener('pointermove', moveHandler);
+        target.addEventListener('pointerup', upHandler);
+        target.addEventListener('pointercancel', upHandler);
+        this._drag = {
+            pointerId: event.pointerId,
+            gutterIndex,
+            startClient,
+            startSizes,
+            target,
+            moveHandler,
+            upHandler,
+        };
+        this._setNoSelect(true);
+        this.resizeStart.emit({
+            sizes: [...startSizes],
+            unit: this.unit(),
+            originPaneIndex: gutterIndex,
+            cause: event.pointerType === 'touch' ? 'touch' : 'pointer',
+        });
+        event.preventDefault();
+    }
+    _onGutterPointerMove(event) {
+        const drag = this._drag;
+        if (!drag)
+            return;
+        const horizontal = this.direction() === 'horizontal';
+        const current = horizontal ? event.clientX : event.clientY;
+        let deltaPx = current - drag.startClient;
+        if (deltaPx === 0)
+            return;
+        // In RTL horizontal mode the visual delta is inverted from the pane order.
+        if (horizontal && this._isRtl())
+            deltaPx = -deltaPx;
+        const panes = this._panes();
+        const unit = this.unit();
+        const containerPx = this._containerSizePx();
+        const available = availableSpace(containerPx, panes.length, this.gutterSize());
+        if (available <= 0)
+            return;
+        const deltaUnit = unit === 'percent' ? (deltaPx / available) * 100 : deltaPx;
+        // Apply delta to gutterIndex (grows) and gutterIndex+1 (shrinks).
+        const next = [...drag.startSizes];
+        next[drag.gutterIndex] = drag.startSizes[drag.gutterIndex] + deltaUnit;
+        next[drag.gutterIndex + 1] = drag.startSizes[drag.gutterIndex + 1] - deltaUnit;
+        const totalUnit = unit === 'percent' ? 100 : available;
+        const configs = panes.map(toPaneConfig);
+        const clamped = redistributeWithConstraints(next, configs, totalUnit);
+        this._sizes.set(clamped);
+        this._applyToPanes(panes, clamped, unit, panes.length, this.gutterSize());
+    }
+    _onGutterPointerUp(event) {
+        const drag = this._drag;
+        if (!drag)
+            return;
+        const target = drag.target;
+        try {
+            target.releasePointerCapture(drag.pointerId);
+        }
+        catch {
+            /* pointer already released */
+        }
+        target.removeEventListener('pointermove', drag.moveHandler);
+        target.removeEventListener('pointerup', drag.upHandler);
+        target.removeEventListener('pointercancel', drag.upHandler);
+        this._drag = null;
+        this._setNoSelect(false);
+        const finalSizes = this._sizes();
+        // Snap-collapse threshold check on the two panes adjacent to the drag.
+        this._maybeSnap(drag.gutterIndex);
+        this._commit(this._sizes());
+        this.resizeEnd.emit({
+            sizes: [...finalSizes],
+            unit: this.unit(),
+            originPaneIndex: drag.gutterIndex,
+            cause: event.pointerType === 'touch' ? 'touch' : 'pointer',
+        });
+    }
+    /** @internal */
+    _onGutterKeydown(event, gutterIndex) {
+        if (this.disabled())
+            return;
+        const horizontal = this.direction() === 'horizontal';
+        const step = this.keyboardStep();
+        const stepLarge = this.keyboardStepLarge();
+        const rtl = horizontal && this._isRtl();
+        const unit = this.unit();
+        const containerPx = this._containerSizePx();
+        const available = availableSpace(containerPx, this._panes().length, this.gutterSize());
+        const totalUnit = unit === 'percent' ? 100 : available;
+        // Use the container's full extent for Home/End so the delta saturates the
+        // left pane against its bounds without resorting to Infinity (which would
+        // produce NaN once multiplied by the redistribution scaling factor).
+        const saturate = totalUnit > 0 ? totalUnit : 1e9;
+        let delta = null;
+        const cause = 'keyboard';
+        let restore = false;
+        switch (event.key) {
+            case 'ArrowLeft':
+                if (horizontal)
+                    delta = rtl ? step : -step;
+                break;
+            case 'ArrowRight':
+                if (horizontal)
+                    delta = rtl ? -step : step;
+                break;
+            case 'ArrowUp':
+                if (!horizontal)
+                    delta = -step;
+                break;
+            case 'ArrowDown':
+                if (!horizontal)
+                    delta = step;
+                break;
+            case 'PageUp':
+                delta = -stepLarge;
+                break;
+            case 'PageDown':
+                delta = stepLarge;
+                break;
+            case 'Home':
+                delta = -saturate;
+                break;
+            case 'End':
+                delta = saturate;
+                break;
+            case 'Enter':
+            case ' ':
+                restore = true;
+                break;
+            default:
+                return;
+        }
+        if (delta === null && !restore)
+            return;
+        event.preventDefault();
+        const panes = this._panes();
+        const startSizes = [...this._sizes()];
+        this.resizeStart.emit({
+            sizes: [...startSizes],
+            unit,
+            originPaneIndex: gutterIndex,
+            cause,
+        });
+        if (restore) {
+            // Enter / Space toggles collapse on the LEFT pane of the focused gutter
+            // when collapsible; otherwise falls back to reset() for keyboard-only recovery.
+            const leftPane = panes[gutterIndex];
+            if (leftPane?.collapsible()) {
+                this._setCollapsed(panes, gutterIndex, !leftPane._collapsed(), 'keyboard');
+                this.resizeEnd.emit({
+                    sizes: [...this._sizes()],
+                    unit,
+                    originPaneIndex: gutterIndex,
+                    cause,
+                });
+                return;
+            }
+            this.reset();
+            this.resizeEnd.emit({
+                sizes: [...this._sizes()],
+                unit,
+                originPaneIndex: gutterIndex,
+                cause,
+            });
+            return;
+        }
+        const next = [...startSizes];
+        next[gutterIndex] = startSizes[gutterIndex] + delta;
+        next[gutterIndex + 1] = startSizes[gutterIndex + 1] - delta;
+        const configs = panes.map(toPaneConfig);
+        const clamped = redistributeWithConstraints(next, configs, totalUnit);
+        this._sizes.set(clamped);
+        this._applyToPanes(panes, clamped, unit, panes.length, this.gutterSize());
+        this._commit(clamped);
+        this.resizeEnd.emit({
+            sizes: [...clamped],
+            unit,
+            originPaneIndex: gutterIndex,
+            cause,
+        });
+    }
+    // ── Collapse helpers ────────────────────────────────────────────────────────
+    _setCollapsed(panes, paneIndex, collapsed, cause) {
+        const pane = panes[paneIndex];
+        const unit = this.unit();
+        const containerPx = this._containerSizePx();
+        const gutterSize = this.gutterSize();
+        const available = availableSpace(containerPx, panes.length, gutterSize);
+        const totalUnit = unit === 'percent' ? 100 : available;
+        const current = [...this._sizes()];
+        // Pick the neighbour that absorbs the size delta: prefer the right pane,
+        // fall back to the left pane when collapsing the last pane in the row.
+        const partner = paneIndex < panes.length - 1 ? paneIndex + 1 : paneIndex - 1;
+        const target = [...current];
+        const configs = panes.map(toPaneConfig);
+        if (collapsed) {
+            pane._preCollapseSize.set(current[paneIndex] ?? null);
+            const collapsedSize = pane.collapsedSize();
+            const delta = current[paneIndex] - collapsedSize;
+            target[paneIndex] = collapsedSize;
+            if (partner >= 0)
+                target[partner] = current[partner] + delta;
+            // Lock the collapsed pane to exactly `collapsedSize` during redistribution
+            // so slack does not flow back into it.
+            configs[paneIndex] = {
+                defaultSize: configs[paneIndex].defaultSize,
+                minSize: collapsedSize,
+                maxSize: collapsedSize,
+            };
+        }
+        else {
+            const restored = pane._preCollapseSize() ?? pane.defaultSize() ?? totalUnit / Math.max(1, panes.length);
+            const delta = restored - current[paneIndex];
+            target[paneIndex] = restored;
+            if (partner >= 0)
+                target[partner] = current[partner] - delta;
+            pane._preCollapseSize.set(null);
+        }
+        const next = redistributeWithConstraints(target, configs, totalUnit);
+        pane._collapsed.set(collapsed);
+        pane.collapsedChange.emit(collapsed);
+        this._sizes.set(next);
+        this._applyToPanes(panes, next, unit, panes.length, gutterSize);
+        this._commit(next);
+        this.collapseChange.emit({ paneIndex, collapsed, cause });
+    }
+    _maybeSnap(gutterIndex) {
+        const panes = this._panes();
+        const sizes = this._sizes();
+        for (const i of [gutterIndex, gutterIndex + 1]) {
+            const pane = panes[i];
+            if (!pane?.collapsible())
+                continue;
+            const snap = pane.snapSize();
+            if (snap <= 0)
+                continue;
+            const size = sizes[i] ?? 0;
+            const collapsed = pane._collapsed();
+            const collapsedSize = pane.collapsedSize();
+            const distance = Math.abs(size - collapsedSize);
+            if (!collapsed && distance <= snap && size > collapsedSize) {
+                this._setCollapsed(panes, i, true, 'snap');
+            }
+            else if (collapsed && size > collapsedSize + snap) {
+                this._setCollapsed(panes, i, false, 'snap');
+            }
+        }
+    }
+    // ── Persistence ─────────────────────────────────────────────────────────────
+    _readPersistedSizes(panes) {
+        const key = this.storageKey();
+        if (!key || !this._isBrowser || typeof localStorage === 'undefined')
+            return null;
+        try {
+            const raw = localStorage.getItem(key);
+            if (!raw)
+                return null;
+            const parsed = JSON.parse(raw);
+            if (!Array.isArray(parsed) || parsed.length !== panes.length)
+                return null;
+            if (!parsed.every((v) => typeof v === 'number' && Number.isFinite(v)))
+                return null;
+            const unit = this.unit();
+            const configs = panes.map(toPaneConfig);
+            // `_containerSizePx` is read untracked: this method runs inside the
+            // contentChildren effect, which already handles container-size changes
+            // through the separate ResizeObserver path.
+            const containerPx = untracked(() => this._containerSizePx());
+            const available = availableSpace(containerPx, panes.length, this.gutterSize());
+            const totalUnit = unit === 'percent' ? 100 : available;
+            // Re-clamp persisted sizes against current constraints. If totalUnit is 0
+            // (pixel mode pre-measurement), fall back to raw values for later rescaling.
+            if (totalUnit <= 0)
+                return parsed;
+            return redistributeWithConstraints(parsed, configs, totalUnit);
+        }
+        catch {
+            return null;
+        }
+    }
+    _writePersistedSizes(sizes) {
+        const key = this.storageKey();
+        if (!key || !this._isBrowser || typeof localStorage === 'undefined')
+            return;
+        if (!this._initialReconciled)
+            return;
+        try {
+            localStorage.setItem(key, JSON.stringify(sizes));
+        }
+        catch {
+            /* quota / private-browsing — silently skip persistence */
+        }
+    }
+    _clearPersistedSizes() {
+        const key = this.storageKey();
+        if (!key || !this._isBrowser || typeof localStorage === 'undefined')
+            return;
+        try {
+            localStorage.removeItem(key);
+        }
+        catch {
+            /* swallow */
+        }
+    }
+    // ── Commit helper ──────────────────────────────────────────────────────────
+    _commit(sizes) {
+        this.sizesChange.emit([...sizes]);
+        this._writePersistedSizes(sizes);
+    }
+    // ── User-select suppression during drag ────────────────────────────────────
+    _setNoSelect(active) {
+        if (!this._isBrowser || typeof document === 'undefined')
+            return;
+        document.body.classList.toggle('tw-split-no-select', active);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SplitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SplitComponent, isStandalone: true, selector: "tw-split", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, keyboardStepLarge: { classPropertyName: "keyboardStepLarge", publicName: "keyboardStepLarge", isSignal: true, isRequired: false, transformFunction: null }, storageKey: { classPropertyName: "storageKey", publicName: "storageKey", isSignal: true, isRequired: false, transformFunction: null }, rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizesChange: "sizesChange", resizeStart: "resizeStart", resizeEnd: "resizeEnd", collapseChange: "collapseChange" }, host: { properties: { "class": "_rootClass()", "attr.data-split-direction": "direction()" } }, queries: [{ propertyName: "_panes", predicate: SplitPaneComponent, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+    @for (i of _gutterIndices(); track i) {
+      <div
+        role="separator"
+        [attr.aria-orientation]="direction()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="100"
+        [attr.aria-valuenow]="_ariaValueNow(i)"
+        [attr.aria-controls]="_ariaControls(i)"
+        [attr.aria-label]="_ariaLabel(i)"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [class]="_gutterClass()"
+        [style.order]="i * 2 + 1"
+        [style.flex-basis.px]="gutterSize()"
+        [style.min-width.px]="direction() === 'horizontal' ? gutterSize() : 0"
+        [style.min-height.px]="direction() === 'vertical' ? gutterSize() : 0"
+        (pointerdown)="_onGutterPointerDown($event, i)"
+        (keydown)="_onGutterKeydown($event, i)"
+      ></div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SplitComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-split',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '_rootClass()',
+                        '[attr.data-split-direction]': 'direction()',
+                    },
+                    template: `
+    <ng-content />
+    @for (i of _gutterIndices(); track i) {
+      <div
+        role="separator"
+        [attr.aria-orientation]="direction()"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="100"
+        [attr.aria-valuenow]="_ariaValueNow(i)"
+        [attr.aria-controls]="_ariaControls(i)"
+        [attr.aria-label]="_ariaLabel(i)"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.tabindex]="disabled() ? -1 : 0"
+        [class]="_gutterClass()"
+        [style.order]="i * 2 + 1"
+        [style.flex-basis.px]="gutterSize()"
+        [style.min-width.px]="direction() === 'horizontal' ? gutterSize() : 0"
+        [style.min-height.px]="direction() === 'vertical' ? gutterSize() : 0"
+        (pointerdown)="_onGutterPointerDown($event, i)"
+        (keydown)="_onGutterKeydown($event, i)"
+      ></div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], keyboardStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStep", required: false }] }], keyboardStepLarge: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardStepLarge", required: false }] }], storageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "storageKey", required: false }] }], rtl: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtl", required: false }] }], sizesChange: [{ type: i0.Output, args: ["sizesChange"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }], _panes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SplitPaneComponent), { isSignal: true }] }] } });
+function toPaneConfig(pane) {
+    return {
+        defaultSize: pane.defaultSize(),
+        minSize: pane.minSize(),
+        maxSize: pane.maxSize(),
+    };
+}
+
+/**
+ * Marker directive for a custom gutter projection slot.
+ * Attach to content inside `<tw-split>` to provide custom gutter visuals.
+ * The container still owns all interaction logic.
+ */
+class SplitGutterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SplitGutterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SplitGutterDirective, isStandalone: true, selector: "[twSplitGutter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SplitGutterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSplitGutter]',
+                }]
+        }] });
+
+/**
+ * Marker directive for an optional header region inside `<tw-split-pane>`.
+ * A parent Dock or Panel component may key off this region; the split pane
+ * itself does not apply any styling to it.
+ */
+class SplitPaneHeaderDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SplitPaneHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SplitPaneHeaderDirective, isStandalone: true, selector: "[twSplitPaneHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SplitPaneHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twSplitPaneHeader]',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SplitComponent, SplitGutterDirective, SplitPaneComponent, SplitPaneHeaderDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-split.mjs.map