plass-ui 0.0.1 → 1.0.0

package/dist/components/pagination/PlPagination.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { PlButton } from '../button/PlButton.js';
+import { ChevronIcon } from '../../internal/icons.js';
+import { controlTextClasses, gapClasses, srOnlyClasses } from '../../internal/styles.js';
+function range(start, end) {
+    return Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);
+}
+/**
+ * Which pages the row actually shows.
+ *
+ * The shape every pagination converges on — a fixed run at each end, a window
+ * around the current page, and an ellipsis wherever those leave a gap — with one
+ * detail that is easy to get wrong and matters: a gap of exactly one page is
+ * filled with that page rather than with an ellipsis. `1 … 3 … 9` hides a single
+ * number behind a symbol wider than the number it replaced.
+ *
+ * The row is also pinned to a constant number of slots, whatever page it is on:
+ * the window slides toward whichever end it is near instead of being clipped by
+ * it, so page 1 shows `1 2 3 4 5 … 20` and page 10 shows `1 … 9 10 11 … 20`.
+ * Which slots are pages and which are ellipses changes; how many there are does
+ * not. Without that, stepping from page 1 to page 2 would relayout the row and
+ * every button would move out from under the pointer that just pressed one.
+ */
+function paginationRange(count, page, siblingCount, boundaryCount) {
+    const startPages = range(1, Math.min(boundaryCount, count));
+    const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+    const siblingsStart = Math.max(Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : count - 1);
+    return [
+        ...startPages,
+        // An ellipsis when more than one page is hidden, the page itself when
+        // exactly one is, and nothing when none is.
+        ...(siblingsStart > boundaryCount + 2
+            ? ['start-ellipsis']
+            : boundaryCount + 1 < count - boundaryCount
+                ? [boundaryCount + 1]
+                : []),
+        ...range(siblingsStart, siblingsEnd),
+        ...(siblingsEnd < count - boundaryCount - 1
+            ? ['end-ellipsis']
+            : count - boundaryCount > boundaryCount
+                ? [count - boundaryCount]
+                : []),
+        ...endPages
+    ];
+}
+/** Two chevrons, for the steppers that jump to an end rather than by one page. */
+function DoubleChevronIcon() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * The ellipsis. A `<span>`, not a button and not a disabled button: it is not a
+ * control that happens to be unavailable, it is punctuation.
+ */
+const ellipsisClasses = {
+    xs: 'h-6 min-w-6',
+    sm: 'h-8 min-w-8',
+    md: 'h-10 min-w-10',
+    lg: 'h-12 min-w-12',
+    xl: 'h-14 min-w-14'
+};
+/**
+ * A row of page numbers.
+ *
+ * Every button in it is a real `PlButton`, which is the point: a pagination is
+ * not a new kind of control, it is buttons in a row that happen to know about
+ * each other. Reusing the component means the row inherits the glass, the
+ * pointer bloom, the press signature, the focus ring and every future change to
+ * any of them for free — and it means an `lg` pagination lines up with an `lg`
+ * button beside it, because it *is* one.
+ *
+ * `variant` sets how the pages at rest look; the current page is always `solid`,
+ * which is the one thing the row has to say without being read. That is why the
+ * default here is `ghost` rather than the `solid` a lone PlButton takes — nine
+ * panes of tinted glass in a row say that all nine are the primary action.
+ *
+ * The markup is a `<nav>` around a `<ul>` because that is what a screen reader
+ * needs to hear: a named landmark it can skip, holding a list whose length says
+ * how far the pages go, with `aria-current="page"` marking where it is.
+ */
+export const PlPagination = /* @__PURE__ */ React.forwardRef(function PlPagination({ variant = 'ghost', size = 'md', color = 'primary', density = 'compact', elevation = 0, count, page: pageProp, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showEdges = false, showArrows = true, disabled = false, getPageHref, label = 'Pagination', pageLabel = (value) => `Page ${value}`, previousLabel = 'Previous page', nextLabel = 'Next page', firstLabel = 'First page', lastLabel = 'Last page', statusLabel = (value, total) => `Page ${value} of ${total}`, className, children, ...props }, ref) {
+    const [uncontrolled, setUncontrolled] = React.useState(defaultPage);
+    const current = Math.min(Math.max(pageProp ?? uncontrolled, 1), Math.max(count, 1));
+    const go = (next) => {
+        const clamped = Math.min(Math.max(next, 1), count);
+        if (clamped === current) {
+            return;
+        }
+        if (pageProp === undefined) {
+            setUncontrolled(clamped);
+        }
+        onPageChange?.(clamped);
+    };
+    // One page is not a set of pages, and no pages is not a thing to say out
+    // loud. A row that renders a lone disabled "1" is a control advertising
+    // that it has nothing to do.
+    if (count < 2) {
+        return null;
+    }
+    const slots = paginationRange(count, current, siblingCount, boundaryCount);
+    const atStart = current <= 1;
+    const atEnd = current >= count;
+    /*
+     * A link only where there is somewhere to go. The page being read and a
+     * stepper at the end of the row are both `disabled`, and `disabled` is not
+     * something an `<a>` can be — a link that only looks unavailable is one a
+     * keyboard still lands on and a crawler still follows.
+     */
+    const linkProps = (to, inert, rel) => getPageHref && !inert ? { render: _jsx("a", { href: getPageHref(to), rel: rel }) } : null;
+    /*
+     * Who answers the press.
+     *
+     * With an `href` and a handler both, the handler wins and the navigation is
+     * cancelled: that is a client-side router keeping the page it already has.
+     * With an `href` and no handler, the link is left to do what a link does —
+     * which is also what makes the row work with JavaScript still loading.
+     */
+    const press = (event, to) => {
+        // A press carrying a modifier is the reader asking the browser for it: a
+        // new tab, a new window, a saved copy. Never ours to cancel.
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+            return;
+        }
+        if (getPageHref && !onPageChange) {
+            return;
+        }
+        event.preventDefault();
+        go(to);
+    };
+    /**
+     * The steppers. Icon-only PlButtons, so they go square and land on exactly
+     * the same footprint as a single-digit page — a row whose ends are a
+     * different width from its middle reads as two controls pushed together.
+     */
+    const stepper = (key, accessibleName, to, inert, rotation, glyph, rel) => (_jsx("li", { className: "flex", children: _jsx(PlButton, { variant: variant, size: size, color: color, density: density, elevation: elevation, disabled: disabled || inert, "aria-label": accessibleName, startIcon: _jsx("span", { className: `flex items-center ${rotation}`, children: glyph }), onClick: (event) => press(event, to), ...linkProps(to, disabled || inert, rel) }) }, key));
+    return (_jsxs("nav", { ref: ref, "aria-label": label, className: ['flex items-center', className ?? ''].filter(Boolean).join(' '), ...props, children: [_jsxs("ul", { role: "list", className: `m-0 flex list-none items-center p-0 ${gapClasses[size]}`, children: [showEdges
+                        ? stepper('first', firstLabel, 1, atStart, 'rotate-180 rtl:rotate-0', _jsx(DoubleChevronIcon, {}))
+                        : null, showArrows
+                        ? stepper('previous', previousLabel, current - 1, atStart, 'rotate-90 rtl:-rotate-90', _jsx(ChevronIcon, {}), 'prev')
+                        : null, slots.map((slot, index) => typeof slot === 'number' ? (_jsx("li", { className: "flex", children: _jsx(PlButton
+                        // The current page is always filled, whatever the row's
+                        // resting variant is: it is the one thing here that has to be
+                        // legible without being read.
+                        , { 
+                            // The current page is always filled, whatever the row's
+                            // resting variant is: it is the one thing here that has to be
+                            // legible without being read.
+                            variant: slot === current ? 'solid' : variant, size: size, color: color, density: density, elevation: elevation, disabled: disabled, "aria-label": pageLabel(slot), "aria-current": slot === current ? 'page' : undefined, className: "tabular-nums", onClick: (event) => press(event, slot), ...linkProps(slot, disabled || slot === current), children: slot }) }, `slot-${index}`)) : (_jsx("li", { "aria-hidden": "true", className: [
+                            'flex select-none items-center justify-center',
+                            'text-(--plass-muted-fg)',
+                            controlTextClasses[size],
+                            ellipsisClasses[size]
+                        ].join(' '), children: "\u2026" }, `slot-${index}`))), showArrows
+                        ? stepper('next', nextLabel, current + 1, atEnd, '-rotate-90 rtl:rotate-90', _jsx(ChevronIcon, {}), 'next')
+                        : null, showEdges
+                        ? stepper('last', lastLabel, count, atEnd, 'rtl:rotate-180', _jsx(DoubleChevronIcon, {}))
+                        : null] }), _jsx("span", { className: srOnlyClasses, "aria-live": "polite", children: statusLabel(current, count) }), children] }));
+});

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

@@ -0,0 +1,2 @@
+export { PlPagination } from './PlPagination.js';
+export type { PlPaginationProps } from './PlPagination.js';

package/dist/components/pagination/index.js

@@ -0,0 +1 @@
+export { PlPagination } from './PlPagination.js';

package/dist/components/panes/PlPanes.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { PlassColor, PlassOrientation, PlassSize } from '../../types.js';
+/**
+ * A pane's share of the split, as a percentage of the container or as a CSS
+ * length.
+ *
+ * A bare number is a percentage — that is what a split is usually described in,
+ * and a percentage keeps its meaning when the window changes size. A string is
+ * an absolute length (`'240px'`, `'15rem'`, `'20%'`), which is what a sidebar
+ * with a minimum actually needs: "at least 200 pixels" does not survive being
+ * written down as a percentage of a width nobody knows yet.
+ */
+export type PlPaneSize = number | string;
+export interface PlPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the panes run. `horizontal` puts them side by side with upright
+     * handles between them; `vertical` stacks them.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /**
+     * Whether the handles between the panes can be dragged. Turn it off for a
+     * split that is a layout rather than a control.
+     * @default true
+     */
+    resizable?: boolean;
+    /** The colour family the handles light up in. @default 'primary' */
+    color?: PlassColor;
+    /** How thick a handle is, and how far it reaches. @default 'md' */
+    size?: PlassSize;
+    /** Fires with every pane's share, in percent, while a handle is dragged. */
+    onResize?: (sizes: number[]) => void;
+    /** Fires once, with the same shape, when the handle is let go. */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** The panes. Anything that is not a `PlPane` is still laid out, but has no size. */
+    children?: React.ReactNode;
+}
+export interface PlPaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * The share this pane starts with. Panes with no `defaultSize` split whatever
+     * is left over equally.
+     */
+    defaultSize?: PlPaneSize;
+    /** How small it may be dragged. @default 0 */
+    minSize?: PlPaneSize;
+    /** How large it may be dragged. Unbounded when left out. */
+    maxSize?: PlPaneSize;
+    /** What is inside the pane. */
+    children?: React.ReactNode;
+}
+/**
+ * A set of panes with draggable handles between them.
+ *
+ * The panes are sized in **fractions**, written out as
+ * `flex-basis: calc((100% - gutters) * fraction)`. That is the one decision the
+ * rest of this file follows from: a split described in percentages survives the
+ * window being resized without a single line of JavaScript running, so the
+ * component measures itself only twice — once on mount, to turn a `'240px'`
+ * default into a fraction, and once at the start of each drag, to know what a
+ * pixel of pointer movement is worth.
+ *
+ * The handles are interleaved here rather than written by the caller, so the
+ * children of a `PlPanes` are just panes. That does mean the direct children have
+ * to *be* `PlPane`s: the constraints are read off their props, and a pane wrapped
+ * in something else is a pane with no minimum.
+ */
+export declare const PlPanes: React.ForwardRefExoticComponent<PlPanesProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One region of a split.
+ *
+ * It carries no surface of its own on purpose: a split is layout, and the moment
+ * a pane drew a sheet it would stop being usable as the thing a `PlCard`, a
+ * `PlTable` or an editor is put inside. Put a `PlCard` in it when a surface is
+ * wanted.
+ *
+ * `defaultSize`, `minSize` and `maxSize` are read by the `PlPanes` around it
+ * rather than used here — a pane cannot know what "half" is, only the split can.
+ */
+export declare const PlPane: React.ForwardRefExoticComponent<PlPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/panes/PlPanes.js

@@ -0,0 +1,324 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx, transitionClasses } from '../../internal/styles.js';
+const PaneContext = /* @__PURE__ */ React.createContext({ basis: null });
+/**
+ * The width of a handle, and the width of the target the pointer has to hit.
+ *
+ * A visible line one pixel wide is a target one pixel wide, which is not a
+ * target. So the handle is a track several pixels across with the hairline drawn
+ * down the middle of it — the same split a scrollbar makes between what is drawn
+ * and what can be grabbed.
+ */
+const handleTrackClasses = {
+    xs: 'basis-1',
+    sm: 'basis-1.5',
+    md: 'basis-2',
+    lg: 'basis-2.5',
+    xl: 'basis-3'
+};
+/** The same numbers, as the total the panes have to give up to the handles. */
+const handleTrackValues = {
+    xs: 4,
+    sm: 6,
+    md: 8,
+    lg: 10,
+    xl: 12
+};
+/** How far one arrow key press moves a handle. */
+const KEYBOARD_STEP = 16;
+/**
+ * A CSS length, in pixels.
+ *
+ * Only the four units a split is ever written in are accepted; anything else
+ * resolves to `undefined`, which every caller here reads as "no constraint"
+ * rather than as zero. A bad string should leave a pane unbounded, not pin it
+ * shut.
+ */
+function toPixels(value, extent, root) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (typeof value === 'number')
+        return (extent * value) / 100;
+    const match = /^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(value);
+    if (!match)
+        return undefined;
+    const amount = Number(match[1]);
+    if (Number.isNaN(amount))
+        return undefined;
+    switch (match[2]) {
+        case 'px':
+            return amount;
+        case '%':
+            return (extent * amount) / 100;
+        case 'rem':
+            return amount * parseFloat(getComputedStyle(document.documentElement).fontSize || '16');
+        case 'em':
+            return amount * parseFloat((root && getComputedStyle(root).fontSize) || '16');
+        default:
+            return undefined;
+    }
+}
+/** Every pane's share of the space, summing to 1. */
+function initialFractions(constraints, extent, root) {
+    const sizes = constraints.map((pane) => toPixels(pane.defaultSize, extent, root));
+    const named = sizes.reduce((total, size) => total + (size ?? 0), 0);
+    const unnamed = sizes.filter((size) => size === undefined).length;
+    // Whatever is left after the named panes, split evenly. Negative when the
+    // caller asked for more than there is, which the clamp below turns into zero.
+    const share = unnamed > 0 ? Math.max(0, extent - named) / unnamed : 0;
+    const resolved = sizes.map((size) => Math.max(0, size ?? share));
+    const total = resolved.reduce((sum, size) => sum + size, 0);
+    if (total <= 0)
+        return resolved.map(() => 1 / Math.max(1, resolved.length));
+    return resolved.map((size) => size / total);
+}
+/**
+ * A set of panes with draggable handles between them.
+ *
+ * The panes are sized in **fractions**, written out as
+ * `flex-basis: calc((100% - gutters) * fraction)`. That is the one decision the
+ * rest of this file follows from: a split described in percentages survives the
+ * window being resized without a single line of JavaScript running, so the
+ * component measures itself only twice — once on mount, to turn a `'240px'`
+ * default into a fraction, and once at the start of each drag, to know what a
+ * pixel of pointer movement is worth.
+ *
+ * The handles are interleaved here rather than written by the caller, so the
+ * children of a `PlPanes` are just panes. That does mean the direct children have
+ * to *be* `PlPane`s: the constraints are read off their props, and a pane wrapped
+ * in something else is a pane with no minimum.
+ */
+export const PlPanes = /* @__PURE__ */ React.forwardRef(function PlPanes({ orientation = 'horizontal', resizable = true, color = 'primary', size = 'md', onResize, onResizeEnd, className, style, children, ...props }, ref) {
+    const items = React.Children.toArray(children).filter(React.isValidElement);
+    const count = items.length;
+    const rootRef = React.useRef(null);
+    const setRootRef = React.useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    // The constraints are read during render and used inside pointer handlers that
+    // outlive it, so they go through a ref rather than through the closure.
+    const constraintsRef = React.useRef([]);
+    constraintsRef.current = items.map((item) => item.props);
+    const [stored, setFractions] = React.useState(null);
+    // A pane added or removed leaves the stored split a render behind the children
+    // — the effect below re-splits, but the render in between would be reading a
+    // share off the end of the list. Until the two agree, nobody has a size and
+    // every pane falls back to an even share.
+    const fractions = stored && stored.length === count ? stored : null;
+    const fractionsRef = React.useRef(null);
+    fractionsRef.current = fractions;
+    const horizontal = orientation === 'horizontal';
+    const gutter = handleTrackValues[size] * Math.max(0, count - 1);
+    /*
+     * One measurement, for one purpose: turning a `defaultSize` written as a
+     * length into a fraction. It is an observer rather than a single read because
+     * a split inside a closed `PlAccordion` or an unselected `PlTab` is zero wide when
+     * it mounts, and dividing by that would put every pane at nothing.
+     */
+    React.useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const measure = () => {
+            const rect = root.getBoundingClientRect();
+            const extent = (horizontal ? rect.width : rect.height) - gutter;
+            if (extent <= 0)
+                return;
+            setFractions((previous) => previous && previous.length === count
+                ? previous
+                : initialFractions(constraintsRef.current, extent, root));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, [count, horizontal, gutter]);
+    /**
+     * Everything a drag needs to know, measured at the moment it starts.
+     *
+     * A drag only ever moves the boundary between two panes, so their total is
+     * fixed and one pane's floor is the other's ceiling. Folding all four bounds
+     * into a single range on the first of the pair is what keeps every move to one
+     * clamp and one division.
+     */
+    function grip(index) {
+        const root = rootRef.current;
+        const current = fractionsRef.current;
+        if (!resizable || !root || !current || current[index + 1] === undefined)
+            return null;
+        const rect = root.getBoundingClientRect();
+        const extent = (horizontal ? rect.width : rect.height) - gutter;
+        if (extent <= 0)
+            return null;
+        const before = constraintsRef.current[index];
+        const after = constraintsRef.current[index + 1];
+        const start = current[index] * extent;
+        const pair = start + current[index + 1] * extent;
+        const lower = Math.max(toPixels(before?.minSize, extent, root) ?? 0, pair - (toPixels(after?.maxSize, extent, root) ?? pair));
+        const upper = Math.min(toPixels(before?.maxSize, extent, root) ?? pair, pair - (toPixels(after?.minSize, extent, root) ?? 0));
+        if (upper < lower)
+            return null;
+        return {
+            root,
+            current,
+            extent,
+            start,
+            pair,
+            resize(delta) {
+                const sized = Math.min(upper, Math.max(lower, start + delta));
+                const next = [...current];
+                next[index] = sized / extent;
+                next[index + 1] = (pair - sized) / extent;
+                setFractions(next);
+                onResize?.(next.map((fraction) => fraction * 100));
+                return next;
+            }
+        };
+    }
+    /**
+     * How to take a drag in flight apart, held for as long as one is running.
+     *
+     * A drag is torn down by the `pointerup` that ends it, and that event never
+     * arrives if the split goes away first — a route change, a closed accordion, a
+     * pane list that shrank. What is left behind is not only two listeners on a
+     * detached node: the drag takes the whole document's text selection away while
+     * it runs, and nothing else ever puts it back.
+     */
+    const teardownRef = React.useRef(null);
+    React.useEffect(() => () => teardownRef.current?.(), []);
+    function beginDrag(index, event) {
+        const held = grip(index);
+        if (!held)
+            return;
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        handle.dataset.dragging = 'true';
+        /*
+         * A drag across a page selects the text it passes over, and the obvious cure
+         * — `preventDefault` on the press — also stops the browser focusing the
+         * handle, which leaves the component focusing it by hand and every mouse
+         * press wearing a keyboard focus ring. Taking the selection off the document
+         * for the length of the drag fixes the selection without touching the focus.
+         *
+         * The property is written prefixed and through `setProperty`, because WebKit
+         * implements only `-webkit-user-select`: it has no `userSelect` on a style
+         * declaration, so `style.userSelect = 'none'` hangs a plain JS property off
+         * the object, changes nothing, and Safari selects text through the whole
+         * drag. Chromium and Firefox both read the prefixed name as the standard
+         * one. This is what Tailwind's own `select-none` emits, for the same reason.
+         */
+        const selection = document.body.style.getPropertyValue('-webkit-user-select');
+        document.body.style.setProperty('-webkit-user-select', 'none');
+        const origin = horizontal ? event.clientX : event.clientY;
+        // Positive is always "toward the end", so a drag under RTL moves the
+        // boundary the way the pointer went rather than the way the axis is numbered.
+        const towardsEnd = horizontal && getComputedStyle(held.root).direction === 'rtl' ? -1 : 1;
+        let latest = held.current;
+        const move = (moveEvent) => {
+            const position = horizontal ? moveEvent.clientX : moveEvent.clientY;
+            latest = held.resize((position - origin) * towardsEnd);
+        };
+        // Everything the drag took from outside itself, given back. Split from `end`
+        // because unmounting has to run this half and must not run the other: a
+        // component that disappeared did not finish resizing, and telling a caller it
+        // did would set state on the way out of the tree.
+        const release = () => {
+            teardownRef.current = null;
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', end);
+            handle.removeEventListener('pointercancel', end);
+            delete handle.dataset.dragging;
+            // Removed rather than set back to '', so a page that never wrote the
+            // property inline is left with the declaration it actually had.
+            if (selection)
+                document.body.style.setProperty('-webkit-user-select', selection);
+            else
+                document.body.style.removeProperty('-webkit-user-select');
+        };
+        const end = () => {
+            release();
+            onResizeEnd?.(latest.map((fraction) => fraction * 100));
+        };
+        teardownRef.current = release;
+        handle.addEventListener('pointermove', move);
+        handle.addEventListener('pointerup', end);
+        handle.addEventListener('pointercancel', end);
+    }
+    function nudge(index, pixels) {
+        const held = grip(index);
+        if (!held)
+            return;
+        const next = held.resize(pixels);
+        // A key press is a whole gesture on its own — there is no "let go" to wait
+        // for, so the settled callback fires with it.
+        onResizeEnd?.(next.map((fraction) => fraction * 100));
+    }
+    const handleClassNames = cx('group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center', handleTrackClasses[size], transitionClasses, '[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0', resizable
+        ? cx(horizontal ? 'cursor-col-resize' : 'cursor-row-resize', 'hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)')
+        : '');
+    return (_jsx("div", { ref: setRootRef, className: cx('flex h-full w-full', horizontal ? 'flex-row' : 'flex-col', 
+        // A flex item refuses to go below its content's intrinsic size unless it
+        // is told to, which is what turns a pane holding a long line into a pane
+        // that cannot be dragged narrower.
+        'min-h-0 min-w-0', className), 
+        // Three slots rather than the whole `surfaceSlots` set: a split draws no
+        // sheet, so the family only ever shows up in the handle's hairline, the
+        // tint under a hovered handle and the focus ring.
+        style: {
+            '--p-accent': `var(--plass-${color}-accent)`,
+            '--p-soft': `var(--plass-${color}-soft)`,
+            '--p-ring': `var(--plass-${color}-ring)`,
+            ...style
+        }, ...props, children: items.map((item, index) => (_jsxs(React.Fragment, { children: [index > 0 ? (_jsx("div", { role: "separator", "aria-orientation": horizontal ? 'vertical' : 'horizontal', "aria-valuenow": fractions ? Math.round(fractions[index - 1] * 100) : undefined, "aria-valuemin": 0, "aria-valuemax": 100, "aria-disabled": !resizable || undefined, tabIndex: resizable ? 0 : -1, className: handleClassNames, 
+                    // No `preventDefault` and no explicit focus: the browser focuses
+                    // the handle on a press by itself, and it knows that a press is
+                    // not a keystroke — which is what keeps the focus ring off a
+                    // handle somebody merely dragged. `beginDrag` takes the page's
+                    // text selection away for the length of the drag instead.
+                    onPointerDown: (event) => {
+                        if (event.button !== 0)
+                            return;
+                        beginDrag(index - 1, event);
+                    }, onKeyDown: (event) => {
+                        const back = horizontal ? 'ArrowLeft' : 'ArrowUp';
+                        const forward = horizontal ? 'ArrowRight' : 'ArrowDown';
+                        if (event.key !== back && event.key !== forward)
+                            return;
+                        event.preventDefault();
+                        nudge(index - 1, event.key === forward ? KEYBOARD_STEP : -KEYBOARD_STEP);
+                    }, children: _jsx("span", { "aria-hidden": "true", className: cx('pointer-events-none bg-(--plass-border)', transitionClasses, horizontal ? 'h-full w-px' : 'h-px w-full', resizable
+                            ? 'group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)'
+                            : '') }) })) : null, _jsx(PaneContext.Provider, { value: {
+                        basis: fractions
+                            ? `calc((100% - ${gutter}px) * ${fractions[index].toFixed(6)})`
+                            : null
+                    }, children: item })] }, item.key ?? index))) }));
+});
+/**
+ * One region of a split.
+ *
+ * It carries no surface of its own on purpose: a split is layout, and the moment
+ * a pane drew a sheet it would stop being usable as the thing a `PlCard`, a
+ * `PlTable` or an editor is put inside. Put a `PlCard` in it when a surface is
+ * wanted.
+ *
+ * `defaultSize`, `minSize` and `maxSize` are read by the `PlPanes` around it
+ * rather than used here — a pane cannot know what "half" is, only the split can.
+ */
+export const PlPane = /* @__PURE__ */ React.forwardRef(function PlPane(
+// The three sizing props are named here only so they are taken out of the
+// rest, which is spread onto a `<div>` — `defaultSize` on a div is an
+// attribute React does not know and would hand straight to the DOM.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+{ defaultSize, minSize, maxSize, className, style, children, ...props }, ref) {
+    const { basis } = React.useContext(PaneContext);
+    return (_jsx("div", { ref: ref, className: cx('relative min-h-0 min-w-0 overflow-auto', className), 
+        // `1 1 0%` before the split has measured itself, so a pane renders at an
+        // even share on the first paint instead of at nothing and then jumping.
+        style: { flex: basis ? `0 0 ${basis}` : '1 1 0%', ...style }, ...props, children: children }));
+});

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

@@ -0,0 +1,2 @@
+export { PlPane, PlPanes } from './PlPanes.js';
+export type { PlPaneProps, PlPanesProps, PlPaneSize } from './PlPanes.js';

package/dist/components/panes/index.js

@@ -0,0 +1 @@
+export { PlPane, PlPanes } from './PlPanes.js';

package/dist/components/pill/PlPill.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
+export interface PlPillProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onClick' | 'title'> {
+    /**
+     * Drop shadow depth. `2` here, against the `0` almost everything else takes.
+     *
+     * That is not an inconsistency: a pill is defined by **not** being part of the
+     * page. Every other surface in the library rests on the page and earns its
+     * separation from the glass edge, so a shadow is opt-in. This one hovers over
+     * whatever is underneath it, and a lozenge lying flat on the content it is
+     * floating over reads as a mistake — the same argument
+     * `PlFloatingBottomNavigation` makes for its own `2`.
+     * @default 2
+     */
+    elevation?: PlassElevation;
+    /**
+     * The leading slot — a glyph, an avatar, a status dot, a photo.
+     *
+     * It is given a square box of its own and clipped to a circle, so an `<img>`
+     * lands in it as readily as an icon does: the image fills the box and is
+     * cropped rather than letterboxed, which is what a 20px portrait wants.
+     */
+    startIcon?: React.ReactNode;
+    /** The trailing slot. Outside the pressable area, so it can be a control. */
+    endIcon?: React.ReactNode;
+    /**
+     * The headline in the middle — what the pill is currently about.
+     *
+     * A prop rather than something to compose, for the reason `PlCard`'s title is
+     * one: the arrangement is fixed and what a caller wants to decide is what goes
+     * in each slot. Almost every pill is a line of text and an optional second
+     * line under it, and spelling that as children means every caller inventing
+     * their own centring and type scale.
+     */
+    title?: React.ReactNode;
+    /** The second line, under the title. One step down and quieter. */
+    description?: React.ReactNode;
+    /**
+     * The second half, revealed when `expanded`.
+     *
+     * The pill grows downward into it rather than swapping to a different shape:
+     * one object saying more.
+     */
+    details?: React.ReactNode;
+    /** Whether `details` is showing. @default false */
+    expanded?: boolean;
+    /**
+     * How it sits in the page's scroll. `fixed` pins it against the viewport and
+     * centres it horizontally, which is the arrangement this shape exists for.
+     * @default 'static'
+     */
+    position?: PlassPosition;
+    /** Which edge it is held against when `position` is not `static`. @default 'top' */
+    side?: 'top' | 'bottom';
+    /** Passing it makes the middle a real button. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Anything the middle needs that `title` and `description` cannot say — a
+     * pair of small readouts, a live counter. Rendered under them, in the same
+     * centred column.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A floating lozenge holding a small amount of live information.
+ *
+ * The shape is a **stadium**, which the house radius rule otherwise forbids:
+ * every control is held just short of the 50% that would make it a pill, because
+ * the flat run along its top and bottom edge is what still reads as a sheet with
+ * the corners cut off it. This is the exception the rule is drawn against, and
+ * it works for the same reason the rule does — this is not a sheet lying on the
+ * page. It is an object hovering over one, and an object hovering over the page
+ * should not look as though it was cut from the same material.
+ *
+ * `details` is revealed by animating a measured height, exactly as a
+ * `PlAccordion` panel is: nothing is transformed and no text is resampled, the
+ * pill is simply a window that opens. The measurement is a `ResizeObserver`
+ * rather than a hardcoded height, so a details area whose content changes —
+ * which is what live information does — grows with it.
+ */
+export declare const PlPill: React.ForwardRefExoticComponent<PlPillProps & React.RefAttributes<HTMLDivElement>>;