plass-ui 1.3.0 → 1.5.0

package/dist/internal/data-table.d.ts

@@ -0,0 +1,70 @@
+/**
+ * The arithmetic a data table does before it draws anything.
+ *
+ * Sorting, paging and range selection are decisions about values rather than
+ * about the DOM, so they are here as plain functions: they can be read without
+ * a browser, tested without one, and — the reason that matters — they are the
+ * same three answers the Flutter build gives, which is what keeps a table
+ * sorted one way on the web from being sorted another way in an app.
+ */
+import type * as React from 'react';
+/** Which way a column runs when it is sorted. */
+export type PlassSortDirection = 'asc' | 'desc';
+/** A column and the direction it is sorted in. */
+export interface PlassSort {
+    /** The column's `key`. */
+    key: string;
+    /** Which way it runs. */
+    direction: PlassSortDirection;
+}
+/**
+ * Puts two cell values in order, in the direction given: `1` for ascending and
+ * `-1` for descending.
+ *
+ * Numbers and dates compare as themselves, strings compare the way the reader's
+ * language orders them, and everything else falls back to its text. Two rules
+ * carry the weight:
+ *
+ * **Nothing sorts last, in both directions.** A column of amounts with three
+ * blanks in it is a column whose blanks are not the smallest amounts, and a
+ * reader who reversed the sort to find the largest should not be handed the
+ * empty ones instead. So the answer for a missing value is decided here, and the
+ * direction turns only the rest round.
+ *
+ * **Strings compare with `localeCompare`.** `'a' < 'B'` is false by code point,
+ * which puts every capitalised word above every lower-case one and sorts `Ösi`
+ * after `Zoe`. A list of names a reader cannot scan is a list that was sorted
+ * for the machine.
+ */
+export declare function compareValues(a: unknown, b: unknown, direction?: 1 | -1): number;
+/**
+ * What pressing a column heading does next.
+ *
+ * Ascending, then descending, then **off** — a third press puts the rows back
+ * in the order they arrived in. That order is information: it is usually the
+ * order the server chose, and a table that can never be put back has thrown it
+ * away. Pressing a different column starts that column ascending rather than
+ * inheriting the direction of the one before it.
+ */
+export declare function nextSort(current: PlassSort | null, key: string): PlassSort | null;
+/**
+ * The keys of every row between two of them, inclusive, in the order the rows
+ * are currently in.
+ *
+ * What a shift-click ticks. "Currently in" is the point: a reader dragging a
+ * range down a sorted table means the rows they can see, not the rows the
+ * unsorted array happens to hold between those two indices.
+ *
+ * An unknown key selects nothing rather than throwing, because the anchor can
+ * legitimately have been filtered away between the two clicks.
+ */
+export declare function keysBetween(keys: readonly React.Key[], from: React.Key, to: React.Key): React.Key[];
+/**
+ * Which rows a page shows, as a `[start, end)` pair into the sorted set.
+ *
+ * Clamped rather than trusted: a page number that has gone past the end — the
+ * usual way being a filter that shortened the list under a reader sitting on
+ * page nine — shows the last page instead of an empty table with a pager that
+ * says there is something there.
+ */
+export declare function pageBounds(total: number, page: number, pageSize: number): [number, number];

package/dist/internal/data-table.js

@@ -0,0 +1 @@
+export function compareValues(e,n,t=1){const o=null==e||""===e,r=null==n||""===n;return o||r?o&&r?0:o?1:-1:function compareKnown(e,n){return"number"==typeof e&&"number"==typeof n?e-n:"boolean"==typeof e&&"boolean"==typeof n?Number(e)-Number(n):e instanceof Date&&n instanceof Date?e.getTime()-n.getTime():String(e).localeCompare(String(n))}(e,n)*t}export function nextSort(e,n){return null===e||e.key!==n?{key:n,direction:"asc"}:"asc"===e.direction?{key:n,direction:"desc"}:null}export function keysBetween(e,n,t){const o=e.indexOf(n),r=e.indexOf(t);return-1===o||-1===r?[]:o<=r?e.slice(o,r+1):e.slice(r,o+1)}export function pageBounds(e,n,t){const o=Math.max(1,Math.ceil(e/t)),r=(Math.min(Math.max(1,Math.trunc(n)),o)-1)*t;return[r,Math.min(r+t,e)]}

package/dist/internal/date.d.ts

@@ -112,6 +112,16 @@ export declare function withTime(date: Date, parts: {
     minutes?: number;
     seconds?: number;
 }): Date;
+/**
+ * Holds a moment inside `[min, max]`, on a whole second when `seconds` is set
+ * and a whole minute when it is not — the smallest step the clock can show.
+ *
+ * The bounds are read at full precision, so a moment is rounded into the span
+ * rather than onto a bound it would then sit outside of: up from a minimum and
+ * down from a maximum. Two bounds inside one step leave no whole step between
+ * them, and the bound itself is returned.
+ */
+export declare function clampMoment(date: Date, min: Date | null | undefined, max: Date | null | undefined, seconds: boolean): Date;
 /** `date`'s calendar day wearing `time`'s clock. */
 export declare function mergeDateAndTime(date: Date, time: Date): Date;
 /**

package/dist/internal/date.js

@@ -1 +1 @@
-import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function startOfYear(t){return makeDate(t.getFullYear(),0,1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),daysInMonth(n.getFullYear(),n.getMonth()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function clampDate(t,e,r){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(r)&&t.getTime()>r.getTime()?new Date(r.getTime()):t}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function isMonthOutside(t,e,r){const n=t.getFullYear(),o=t.getMonth();return isDayOutside(makeDate(n,o,daysInMonth(n,o)),e,null)||isDayOutside(makeDate(n,o,1),null,r)}export function isYearOutside(t,e,r){const n=t.getFullYear();return isValidDate(e)&&n<e.getFullYear()||isValidDate(r)&&n>r.getFullYear()}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,r,n){return isValidDate(e)?t(r,n).format(e):""}const e=/* @__PURE__ */Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(r,n){const o=t(r,n);return[...new Set(e.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOMonth(t){return`${String(t.getFullYear()).padStart(4,"0")}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),r=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${r}:${pad(t.getSeconds())}`:r}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const r=/* @__PURE__ */makeDate(2021,7,1);export function weekdayLabels(e,n,o="short"){const a=t(e,{weekday:o});return Array.from({length:7},(t,e)=>a.format(addDays(r,(n+e)%7)))}export function monthLabels(e,r="short"){const n=t(e,{month:r});return Array.from({length:12},(t,e)=>n.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const n=t(e,{year:"numeric",month:"long"}).formatToParts(r);return n.findIndex(t=>"month"===t.type)<n.findIndex(t=>"year"===t.type)}export function isHour12(e){const r=t(e,{hour:"numeric"}).resolvedOptions();return r.hourCycle?"h11"===r.hourCycle||"h12"===r.hourCycle:!0===r.hour12}export function meridiemLabels(e){const n=t(e,{hour:"numeric",hour12:!0}),read=t=>{const e=n.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}
+import{dateFormatter as t}from"./format.js";export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,n){const r=new Date(0);return r.setFullYear(t,e,n),r.setHours(0,0,0,0),r}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function startOfYear(t){return makeDate(t.getFullYear(),0,1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const n=new Date(t.getTime());return n.setDate(n.getDate()+e),n}export function addMonths(t,e){const n=new Date(t.getTime()),r=makeDate(t.getFullYear(),t.getMonth()+e,1);return n.setFullYear(r.getFullYear(),r.getMonth(),Math.min(t.getDate(),daysInMonth(r.getFullYear(),r.getMonth()))),n}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function clampDate(t,e,n){return isValidDate(e)&&t.getTime()<e.getTime()?new Date(e.getTime()):isValidDate(n)&&t.getTime()>n.getTime()?new Date(n.getTime()):t}export function isDayOutside(t,e,n){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(n)&&compareDay(t,n)>0}export function isMonthOutside(t,e,n){const r=t.getFullYear(),o=t.getMonth();return isDayOutside(makeDate(r,o,daysInMonth(r,o)),e,null)||isDayOutside(makeDate(r,o,1),null,n)}export function isYearOutside(t,e,n){const r=t.getFullYear();return isValidDate(e)&&r<e.getFullYear()||isValidDate(n)&&r>n.getFullYear()}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const n=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(n/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(n/60);return[t,t+59]}if("second"===t)return[n,n];const r=e.getHours()<12?0:43200;return[r,r+43200-1]}export function withTime(t,e){const n=new Date(t.getTime());return n.setHours(e.hours??n.getHours(),e.minutes??n.getMinutes(),e.seconds??n.getSeconds(),0),n}export function clampMoment(t,e,n,r){const o=r?1e3:6e4,floor=t=>withTime(t,{seconds:r?t.getSeconds():0});if(isValidDate(e)&&t.getTime()<e.getTime()){const t=floor(e),r=t.getTime()<e.getTime()?new Date(t.getTime()+o):t;return isValidDate(n)&&r.getTime()>n.getTime()?new Date(e.getTime()):r}if(isValidDate(n)&&t.getTime()>n.getTime()){const t=floor(n);return isValidDate(e)&&t.getTime()<e.getTime()?new Date(n.getTime()):t}return t}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const n=startOfMonth(t),r=(n.getDay()-e+7)%7,o=addDays(n,-r);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,n)=>addDays(o,7*e+n)))}export function yearPageStart(t){return t-(t%12+12)%12}export function formatDate(e,n,r){return isValidDate(e)?t(n,r).format(e):""}const e=/* @__PURE__ */[...Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58)),new Date(2027,0,22,12,58,58)];export function displaySamples(n,r){const o=t(n,r);return[...new Set(e.map(t=>o.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const pad=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${pad(t.getMonth()+1)}-${pad(t.getDate())}`}export function toISOMonth(t){return`${String(t.getFullYear()).padStart(4,"0")}-${String(t.getMonth()+1).padStart(2,"0")}`}export function toISOYear(t){return String(t.getFullYear()).padStart(4,"0")}export function toISOTime(t,e=!1){const pad=t=>String(t).padStart(2,"0"),n=`${pad(t.getHours())}:${pad(t.getMinutes())}`;return e?`${n}:${pad(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const n=/* @__PURE__ */makeDate(2021,7,1);export function weekdayLabels(e,r,o="short"){const a=t(e,{weekday:o});return Array.from({length:7},(t,e)=>a.format(addDays(n,(r+e)%7)))}export function monthLabels(e,n="short"){const r=t(e,{month:n});return Array.from({length:12},(t,e)=>r.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(e){const r=t(e,{year:"numeric",month:"long"}).formatToParts(n);return r.findIndex(t=>"month"===t.type)<r.findIndex(t=>"year"===t.type)}export function isHour12(e){const n=t(e,{hour:"numeric"}).resolvedOptions();return n.hourCycle?"h11"===n.hourCycle||"h12"===n.hourCycle:!0===n.hour12}export function meridiemLabels(e){const r=t(e,{hour:"numeric",hour12:!0}),read=t=>{const e=r.formatToParts(withTime(n,{hours:t})).find(t=>"dayPeriod"===t.type);return e?.value??(t<12?"AM":"PM")};return[read(9),read(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,n=new Intl.Locale(e),r="function"==typeof n.getWeekInfo?n.getWeekInfo():n.weekInfo;if("number"==typeof r?.firstDay)return r.firstDay%7}catch{}return 0}

package/dist/internal/defaults.d.ts

@@ -29,7 +29,7 @@
  * A caller who genuinely wants every button glass writes it on the buttons.
  */
 import * as React from 'react';
-import type { PlassPickerLabels } from './calendar.js';
+import type { PlassLabels } from './labels.js';
 import type { PlassDirection } from './direction.js';
 import type { PlassColor, PlassDensity, PlassSize, PlassWeekday } from '../types.js';
 /** Everything a `PlassProvider` can decide for the tree under it. */
@@ -44,8 +44,13 @@ export interface PlassDefaults {
     locale?: string;
     /** Which day their weeks start on, as `Date` counts them — Sunday is `0`. */
     weekStartsOn?: PlassWeekday;
-    /** The strings a picker says that `Intl` has no opinion about. */
-    labels?: Partial<PlassPickerLabels>;
+    /**
+     * The words the library says on its own behalf, translated.
+     *
+     * A partial: whatever is not in it stays English, so a caller can replace one
+     * string without owning the other sixty. `plass-ui/locales` ships whole ones.
+     */
+    labels?: Partial<PlassLabels>;
     /**
      * Which way the tree runs, for the behaviours that read it in JavaScript.
      *

package/dist/internal/drag.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Everything a pointer drag takes from outside itself, and the one function
+ * that gives all of it back.
+ *
+ * The arithmetic of a drag differs in every component that has one and stays
+ * where it is. What is the same everywhere is the scaffold around it — three
+ * listeners, a `data-dragging` to style against, the document's text selection,
+ * and a teardown an unmount can call — and every copy of that scaffold is a
+ * place for one of the four to be forgotten.
+ *
+ * There is deliberately **no `requestAnimationFrame` in here.** A `pointermove`
+ * is already delivered once per frame in every browser the library supports —
+ * `pointerrawupdate` is the uncoalesced one — so coalescing again would buy
+ * nothing and cost a frame of latency on the one gesture where latency is the
+ * whole feel of it.
+ */
+/**
+ * The selection, taken for the length of a gesture.
+ *
+ * Written prefixed and through `setProperty` because WebKit implements only
+ * `-webkit-user-select`: `style.userSelect = 'none'` hangs a plain JavaScript
+ * property off the object, changes nothing, and Safari goes on selecting text
+ * through the whole drag. It is taken off the document rather than fixed with
+ * `preventDefault`, which would also stop the browser focusing what was
+ * pressed and leave every mouse press wearing a keyboard focus ring.
+ *
+ * Exported as well as used below, for the gesture that takes the selection at a
+ * moment of its own rather than at the press: `PlScrollZone` waits for the
+ * pointer to pass its threshold, because up to that point the press is still a
+ * click on a card and the reader is still allowed to select the text under it.
+ */
+export declare function takeSelection(): () => void;
+export interface PointerDragOptions {
+    /**
+     * The element the three listeners go on, and the one the pointer is captured
+     * to. Capture is what retargets every later event here, so a drag survives
+     * the pointer leaving the element it started on.
+     */
+    target: HTMLElement;
+    /** The pointer that started it. */
+    pointerId: number;
+    /** Every move until the gesture ends. */
+    onMove: (event: PointerEvent) => void;
+    /**
+     * The gesture ended the way it was meant to — the pointer was released.
+     *
+     * A `pointercancel` counts: the gesture is over and the caller wants to know
+     * where it settled. What does **not** count is the drag being torn down by an
+     * unmount — a component that disappeared did not finish resizing, and telling
+     * a caller it did would set state on the way out of the tree. That split is
+     * why `release` and `onEnd` are two things.
+     */
+    onEnd?: () => void;
+    /** Whether the document's text selection is taken for the length of it. @default true */
+    selectable?: boolean;
+    /** Marks the target while it runs, for `data-dragging` to style against. @default true */
+    mark?: boolean;
+}
+/**
+ * Starts a drag. Returns `release` — everything above, given back.
+ *
+ * Call `release` from an unmount effect. It is idempotent, so the pointer's own
+ * `pointerup` calling it first costs nothing.
+ */
+export declare function beginPointerDrag({ target, pointerId, onMove, onEnd, selectable, mark }: PointerDragOptions): () => void;

package/dist/internal/drag.js

@@ -0,0 +1 @@
+export function takeSelection(){const e=document.body,t=e.style.getPropertyValue("-webkit-user-select");return e.style.setProperty("-webkit-user-select","none"),()=>{t?e.style.setProperty("-webkit-user-select",t):e.style.removeProperty("-webkit-user-select")}}export function beginPointerDrag({target:e,pointerId:t,onMove:n,onEnd:r,selectable:o=!0,mark:s=!0}){const i=o?takeSelection():null;s&&(e.dataset.dragging="true"),e.setPointerCapture?.(t);let a=!0;const release=()=>{a&&(a=!1,e.removeEventListener("pointermove",n),e.removeEventListener("pointerup",end),e.removeEventListener("pointercancel",end),s&&delete e.dataset.dragging,i?.())},end=()=>{release(),r?.()};return e.addEventListener("pointermove",n),e.addEventListener("pointerup",end),e.addEventListener("pointercancel",end),release}

package/dist/internal/focusable.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Every element under `root` that the Tab key could land on, in document order.
+ *
+ * Anything inside an `inert` subtree is left out: it matches the selector and
+ * a browser still refuses to focus it, so handing the focus to one is handing
+ * it to the top of the document.
+ */
+export declare function focusablesIn(root: ParentNode): HTMLElement[];

package/dist/internal/focusable.js

@@ -0,0 +1 @@
+export function focusablesIn(e){return Array.from(e.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter(e=>!e.closest("[inert]"))}

package/dist/internal/form.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+/**
+ * How a control whose visible part is not an `<input>` takes part in a form.
+ *
+ * Base UI's `Form` validates, focuses and collects only the controls registered
+ * with a `Field`, and the one public way to register is `Field.Control`, which
+ * is an `<input>` holding a string. A picker's trigger is a button and a file
+ * picker's is a drop zone, so on their own they were invisible to a `PlForm`:
+ * missing from its values, never blocking a submit, and never showing the error
+ * it had for their `name`.
+ *
+ * `FormControl` is that input, kept off screen. It holds the value as a string,
+ * so `required` is the browser's own check, and it hands the focus a form moves
+ * to it on to the control a reader actually uses. What a string cannot carry —
+ * the two ends of a range, several selections, a list of files — is reported to
+ * the `PlForm` around it through `useFormReport`, and `PlForm` lays those over
+ * the values Base UI collected.
+ */
+/** Values reported to a `PlForm` by name, read when the form is submitted. */
+export type FormReport = Map<string, () => unknown>;
+export declare const FormReportContext: React.Context<FormReport | null>;
+/**
+ * Reports `read()` as the value of `name` to the `PlForm` around the caller,
+ * for as long as `enabled` holds. Outside a `PlForm` it does nothing.
+ */
+export declare function useFormReport(name: string | undefined, read: () => unknown, enabled?: boolean): void;
+/**
+ * Whether `element` is inside a disabled `<fieldset>`, re-rendering when a
+ * fieldset around it turns `disabled` on or off.
+ *
+ * The browser disables a native control inside one by itself. A control drawn
+ * as elements with a `tabIndex` is not a form control, so the fieldset never
+ * reaches it and it has to ask. The answer is the platform's: a disabled
+ * fieldset reaches everything inside it except what is in its first `<legend>`.
+ */
+export declare function useFieldsetDisabled(element: Element | null): boolean;
+/**
+ * Tells a `FormControl` the reader has left the control it stands behind, so a
+ * form that validates on blur checks it then. The input never has the focus
+ * itself, so the event it would have had is sent to it.
+ */
+export declare function leaveFormControl(input: HTMLInputElement | null): void;
+export interface FormControlProps {
+    /** The name the value submits under, and the key a form's `errors` use. */
+    name?: string;
+    /**
+     * The value as a form submits it: one string, or one entry per row. An empty
+     * string, a list with an empty entry and an empty list are no value, which is
+     * what `required` checks.
+     */
+    value: string | readonly string[];
+    required: boolean;
+    disabled: boolean;
+    /** The element a reader uses, which takes the focus a form moves here. */
+    standIn: () => HTMLElement | null | undefined;
+}
+/**
+ * The input a `Field` registers for a control that is not one. Renders inside a
+ * `Field.Root`.
+ */
+export declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLInputElement>>;

package/dist/internal/form.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{Field as o}from"@base-ui/react/field";export const FormReportContext=/* @__PURE__ */n.createContext(null);export function useFormReport(e,t,r=!0){const o=n.useContext(FormReportContext),s=n.useRef(t);n.useEffect(()=>{s.current=t}),n.useEffect(()=>{if(!o||!e||!r)return;const entry=()=>s.current();return o.set(e,entry),()=>{o.get(e)===entry&&o.delete(e)}},[o,e,r])}function fieldsetsAround(e){const t=[];for(let r=e.parentElement?.closest("fieldset");r;r=r.parentElement?.closest("fieldset"))t.push(r);return t}export function useFieldsetDisabled(e){const t=n.useCallback(t=>{if(!e)return()=>{};const r=new MutationObserver(t);return fieldsetsAround(e).forEach(e=>r.observe(e,{attributes:!0,attributeFilter:["disabled"]})),()=>r.disconnect()},[e]);return n.useSyncExternalStore(t,()=>null!==e&&fieldsetsAround(e).some(t=>t.disabled&&!t.querySelector(":scope > legend")?.contains(e)),()=>!1)}export function leaveFormControl(e){e?.dispatchEvent(new FocusEvent("focusout",{bubbles:!0}))}export const FormControl=/* @__PURE__ */n.forwardRef(function FormControl({name:n,value:s,required:u,disabled:i,standIn:a},l){const c=Array.isArray(s),d=c?s.length>0&&s.every(e=>""!==e):""!==s;return useFormReport(n,()=>[...s],c&&!i),r(t,{children:[e(o.Control,{ref:l,name:n,value:c?d?s.join("\n"):"":s,required:u,disabled:i,tabIndex:-1,"aria-hidden":"true",autoComplete:"off",className:"pointer-events-none absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onFocus:()=>a()?.focus(),render:c?t=>e("input",{...t,name:void 0}):void 0}),c&&n?s.map((t,r)=>e("input",{type:"hidden",name:n,value:t,disabled:i},r)):null]})});

package/dist/internal/format.d.ts

@@ -22,3 +22,5 @@
  */
 /** A memoised `Intl.DateTimeFormat`. */
 export declare function dateFormatter(locale: string | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/** A memoised `Intl.NumberFormat`. */
+export declare function numberFormatter(locale: string | undefined, options?: Intl.NumberFormatOptions): Intl.NumberFormat;

package/dist/internal/format.js

@@ -1 +1 @@
-const t=new Map;export function dateFormatter(e,n){const r=function cacheKey(t,e){return`${t??""}\0${e?JSON.stringify(e):""}`}(e,n);let o=t.get(r);return o||(o=new Intl.DateTimeFormat(e,n),t.set(r,o)),o}
+function cacheKey(t,e){return`${t??""}\0${e?JSON.stringify(e):""}`}const t=new Map;export function dateFormatter(e,n){const r=cacheKey(e,n);let c=t.get(r);return c||(c=new Intl.DateTimeFormat(e,n),t.set(r,c)),c}const e=new Map;export function numberFormatter(t,n){const r=cacheKey(t,n);let c=e.get(r);return c||(c=new Intl.NumberFormat(t,n),e.set(r,c)),c}

package/dist/internal/gallery.d.ts

@@ -0,0 +1,80 @@
+/**
+ * A tile's proportion as the number the layouts do arithmetic on.
+ *
+ * A ratio is `16 / 9` as often as it is `1.78`, because that is how CSS writes
+ * one and this library does not make a caller translate it.
+ */
+export declare function ratioOf(value: number | string | undefined, fallback: number): number;
+/**
+ * Whether an item's picture is turned onto its side.
+ *
+ * The gallery and its viewer both ask, so they ask here: a tile laid out on its
+ * side that opened upright, or the other way round, would be one picture shown
+ * two ways.
+ */
+export declare function isTurned(rotate: number | undefined): boolean;
+/**
+ * The proportion an item is shown at: its file's own, or the inverse for a
+ * picture on its side.
+ *
+ * An item's `ratio` stays the stored file's proportion, which is what a caller
+ * has to hand, so every piece of layout arithmetic that runs before anything
+ * loads reads it through this.
+ */
+export declare function shownRatio(ratio: number, rotate: number | undefined): number;
+/**
+ * The items dealt into columns, shortest column first.
+ *
+ * Not CSS `columns`, which fills the first column top to bottom before it
+ * starts the second — so a set numbered 1 to 12 reads *down* the left edge, and
+ * the first three pictures a reader meets are stacked on top of each other.
+ * Dealt this way the first row is items 1, 2 and 3, which is the order they
+ * were given in.
+ *
+ * The heights are the ratios rather than anything measured, which is what makes
+ * this run on the server and hold still while the files arrive.
+ */
+export declare function dealColumns(ratios: readonly number[], columns: number): number[][];
+/**
+ * One row track of a masonry: a share of the column width, the height of the
+ * captions that end there, or the gap.
+ */
+export type PlassMasonryTrack = number | 'caption' | 'gap';
+/** Where one tile sits in a masonry's grid, as `grid-column` and `grid-row` count. */
+export interface PlassMasonryTile {
+    /** The lane, from 1. */
+    column: number;
+    /** The row line the tile starts on. */
+    start: number;
+    /** The row line it ends on. */
+    end: number;
+}
+/**
+ * The same deal as `dealColumns`, written as the rows of one CSS grid rather
+ * than as a list per lane.
+ *
+ * A list per lane put the document in lane order: Tab went 1, 4, 7 through
+ * twelve pictures in three lanes, and a tile that changed lane when the count
+ * did was a new element, with its picture's state thrown away. Placed in one
+ * grid, every tile stays where it was given and only its placement changes.
+ * The web build needs this and the Dart build does not, because a Flutter
+ * layout is not a document.
+ *
+ * Every edge where a tile ends, in any lane, is a row line. The track up to it
+ * is a share, sized in `fr` by its distance from the edge before, in column
+ * widths. In a grid whose height is its content every `fr` then comes out one
+ * column width long, so a tile spanning its shares is exactly as tall as its
+ * picture. After the share come the captions that end on that edge, in a track
+ * of their own so their height is not spread over the pictures, and then the
+ * gap, when a tile starts there.
+ *
+ * What a stylesheet cannot know is where an edge in one lane falls among the
+ * edges of another once the gaps and captions are added, because that depends
+ * on the width. A tile that runs past the end of a tile in another lane spans
+ * that tile's caption and gap tracks as well, and is that much taller than its
+ * picture.
+ */
+export declare function masonryRows(ratios: readonly number[], columns: number, captions: boolean): {
+    tracks: PlassMasonryTrack[];
+    tiles: PlassMasonryTile[];
+};

package/dist/internal/gallery.js

@@ -0,0 +1 @@
+import{isSideways as t,quartersOf as r}from"./image.js";export function ratioOf(t,r){if(void 0===t)return r;if("number"==typeof t)return t>0?t:r;const[n,o]=t.split("/"),e=void 0===o?Number(n):Number(n)/Number(o);return Number.isFinite(e)&&e>0?e:r}export function isTurned(n){return void 0!==n&&t(r(n))}export function shownRatio(t,r){return isTurned(r)?1/t:t}export function dealColumns(t,r){const n=Array.from({length:r},()=>[]),o=new Array(r).fill(0);return t.forEach((t,e)=>{let s=0;for(let t=1;t<r;t+=1)o[t]<o[s]&&(s=t);n[s].push(e),o[s]+=1/t}),n}export function masonryRows(t,r,n){const o=dealColumns(t,r),e=[],s=[],u=[];o.forEach((r,n)=>{let o=0;r.forEach((i,a)=>{o+=1/t[i],e[i]=n,s[i]=o,u[i]=0===a?-1:r[a-1]})});const i=[],a=[];for(const r of t.map((t,r)=>r).sort((t,r)=>s[t]-s[r]))(0===i.length||s[r]-i[i.length-1]>.001)&&i.push(s[r]),a[r]=i.length-1;const f=new Set(u.filter(t=>-1!==t).map(t=>a[t])),c=[],l=[],p=[];i.forEach((t,r)=>{c.push(t-(0===r?0:i[r-1])),n&&c.push("caption"),l[r]=c.length+1,f.has(r)&&c.push("gap"),p[r]=c.length+1});const h=t.map((t,r)=>({column:e[r]+1,start:-1===u[r]?1:p[a[u[r]]],end:l[a[r]]}));return{tracks:c,tiles:h}}

package/dist/internal/glow.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+/**
+ * Moves `.plass-glow`'s light to where the pointer is on the surface.
+ *
+ * Written straight to the element as `--p-mx` and `--p-my` rather than held in
+ * state: it runs at pointer rate, and a `setState` here would re-render the
+ * tree on every mouse move. It also runs while a finger is down, which is what
+ * makes the light follow a drag on a touch screen, where there is no hover and
+ * the `:active` layer does the work.
+ *
+ * `offsetX` and `offsetY` cost nothing, but they are measured from whatever the
+ * pointer is over. On a surface whose own element is under the pointer — a
+ * button, whose icons ignore the pointer — that is the surface, and they are
+ * used as they are. On one that holds other elements the pointer can land on,
+ * the position is read against the surface's own box instead.
+ */
+export declare function followPointer(event: React.PointerEvent<HTMLElement>): void;

package/dist/internal/glow.js

@@ -0,0 +1 @@
+export function followPointer(t){const e=t.currentTarget;let n=t.nativeEvent.offsetX,o=t.nativeEvent.offsetY;if(t.target!==e){const r=e.getBoundingClientRect();n=t.clientX-r.left,o=t.clientY-r.top}e.style.setProperty("--p-mx",`${n}px`),e.style.setProperty("--p-my",`${o}px`)}

package/dist/internal/grid.d.ts

@@ -1,9 +1,11 @@
 /**
- * The arithmetic and the vocabulary `PlGrid` and `PlGridItem` share.
+ * The arithmetic and the vocabulary `PlGrid`, `PlGridItem` and `PlFlex` share.
  *
  * Like `internal/styles.ts` this is the library talking to itself, and it lives
- * here rather than in either component's folder for one reason: the two are one
- * system in two elements, and neither should have to import the other.
+ * here rather than in any of their folders for one reason: the grid is one
+ * system in two elements and neither should have to import the other, and a
+ * flex box distributes and aligns its children with the same five words — so a
+ * caller who has learned `justify` on one has learned it on all three.
  *
  * What is *not* here is the layout itself. A column width is
  * `(100% + gap) * span / columns - gap`, it has to change at four breakpoints,
@@ -14,30 +16,7 @@
  * file generates. That is the same split the rest of the library makes:
  * per-instance values go in inline custom properties, never in class names.
  */
-import type * as React from 'react';
-import type { PlassAlignItems, PlassAlignSelf, PlassBreakpoint, PlassJustify, PlassResponsive } from '../types.js';
-/** Smallest first, which is also the order the media queries have to be in. */
-export declare const breakpoints: readonly PlassBreakpoint[];
-/** A bare value means "from `xs` up"; a map is already per-breakpoint. */
-export declare function breakpointMap<T>(value: PlassResponsive<T> | undefined): Partial<Record<PlassBreakpoint, T>>;
-/**
- * Turns a responsive value into the `--p-{name}-{breakpoint}` slots the CSS
- * reads, emitting only the breakpoints the caller actually named.
- *
- * The gaps are filled in by CSS rather than here: each breakpoint's rule falls
- * back through the ones below it, so `{ md: 6 }` needs one slot and not five.
- * That keeps the inline style on a grid item down to what was asked for.
- */
-export declare function responsiveSlots<T>(name: string, value: PlassResponsive<T> | undefined, toCss: (value: T) => string): React.CSSProperties;
-/**
- * Fills in the `xs` entry of a partial map with the prop's own default.
- *
- * Without this, `spacing={{ md: 4 }}` would be a grid with no gutter at all
- * below 48rem — the CSS fallback rather than the documented default — and a
- * caller who narrowed one breakpoint would silently lose every other one. A map
- * says "from here up, use this instead"; it does not say "and nothing below".
- */
-export declare function withBaseline<T>(value: PlassResponsive<T> | undefined, baseline: T): PlassResponsive<T>;
+import type { PlassAlignItems, PlassAlignSelf, PlassJustify } from '../types.js';
 /**
  * A count of columns, as a plain number for `calc()` to divide by.
  *

package/dist/internal/grid.js

@@ -1 +1 @@
-export const breakpoints=["xs","sm","md","lg","xl"];export function breakpointMap(t){return null==t?{}:"object"==typeof t?t:{xs:t}}export function responsiveSlots(t,e,n){const s=breakpointMap(e),o={};for(const e of breakpoints){const r=s[e];void 0!==r&&(o[`--p-${t}-${e}`]=n(r))}return o}export function withBaseline(t,e){return null==t?e:"object"==typeof t?{xs:e,...t}:t}export function columnCount(t){return String(Math.max(1,Math.round(t)))}export function columnUnits(t,e){return String(Math.max(e,Math.round(t)))}export const spanValue=t=>columnUnits(t,1);export const offsetValue=t=>columnUnits(t,0);export function spacingValue(t){const e=.25*Math.max(0,t);return`${Number(e.toFixed(5))}rem`}export const justifyClasses={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly",stretch:"justify-stretch"};export const alignItemsClasses={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"};export const alignContentClasses={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"};export const alignSelfClasses={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};
+export function columnCount(t){return String(Math.max(1,Math.round(t)))}export function columnUnits(t,e){return String(Math.max(e,Math.round(t)))}export const spanValue=t=>columnUnits(t,1);export const offsetValue=t=>columnUnits(t,0);export function spacingValue(t){const e=.25*Math.max(0,t);return`${Number(e.toFixed(5))}rem`}export const justifyClasses={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly",stretch:"justify-stretch"};export const alignItemsClasses={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"};export const alignContentClasses={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"};export const alignSelfClasses={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};

package/dist/internal/highlight.d.ts

@@ -0,0 +1,98 @@
+/**
+ * The grammar engine behind [PlCodeBlock], and the only thing in the library that
+ * is loaded rather than imported.
+ *
+ * highlight.js is the second runtime dependency Plass has, and it is here for a
+ * reason no amount of hand-written regex answers: colouring a language means
+ * knowing that language, and there are thirty-five of them. It is reached
+ * through `highlight.js/lib/core` plus one module per language — never through
+ * the package root, which is all hundred and ninety at once.
+ *
+ * **Every one of those specifiers is behind an `import()`, and that is the
+ * whole design.** A bundler resolves it at build time and emits it as its own
+ * chunk, so a page that imports `PlCodeBlock` and never highlights anything — a
+ * one-line `npm install` with `highlight={false}` — downloads none of it, and a
+ * page that highlights TypeScript downloads the core and TypeScript and not the
+ * other thirty-four. A component that does the same with a static import
+ * spends forty kilobytes before it has drawn a character.
+ *
+ * The dependency is a real `dependencies` entry rather than an optional peer
+ * because a specifier a bundler cannot resolve fails the *whole* build, not
+ * just the part that would have used it: Rollup walks and resolves
+ * `PlCodeBlock.js` while it is still deciding whether to keep it. An optional peer
+ * would mean `import { PlButton } from 'plass-ui'` breaking for anyone who had
+ * not installed a syntax highlighter.
+ *
+ * What comes back out of here is not HTML. highlight.js emits a string of
+ * nested `<span>`s, and PlCodeBlock needs lines — a line is what carries a
+ * number, a prompt and a place in a scroll — so `tokenize` turns that string
+ * into runs of text with a class on them, split at every newline. That also
+ * means nothing in the library ever writes `dangerouslySetInnerHTML`.
+ */
+/** One run of text with a single colour: the innermost span highlight.js drew. */
+export interface PlCodeToken {
+    text: string;
+    /** The class highlight.js put on it — `hljs-keyword`, `hljs-title function_`. */
+    token?: string;
+}
+/** One line of code, as the runs it is made of. An empty array is a blank line. */
+export type PlCodeLine = PlCodeToken[];
+/** The core, and what it hands `registerLanguage`. Opaque here; only hljs reads them. */
+type Hljs = typeof import('highlight.js/lib/core').default;
+type LanguageDefinition = Parameters<Hljs['registerLanguage']>[1];
+/**
+ * Teaches CodeBlock a language the built-in set does not have.
+ *
+ * The same arrangement `src/locales/` makes for the languages the library's own
+ * words are not translated into, and for the same reason: highlight.js knows a
+ * hundred and ninety grammars, a documentation site uses six, and the
+ * thirty-five here are a guess at which six. Registering is how a Nix flake or
+ * an Elixir project gets coloured without the other hundred and fifty being in
+ * anyone's build.
+ *
+ * ```ts
+ * import { registerLanguage } from 'plass-ui';
+ * import elixir from 'highlight.js/lib/languages/elixir';
+ *
+ * registerLanguage('elixir', elixir);
+ * ```
+ *
+ * Call it at module scope. A language registered after a block has drawn does
+ * not repaint that block — nothing re-renders on its own — but every block
+ * mounted after it sees it.
+ *
+ * @param name What `language` will be written as. Registering a name the
+ *   library already has replaces it.
+ * @param definition The default export of a `highlight.js/lib/languages/*`
+ *   module.
+ */
+export declare function registerLanguage(name: string, definition: LanguageDefinition): void;
+/** The canonical name a caller's spelling means, whether or not it can be loaded. */
+export declare function canonicalLanguage(language: string | undefined): string | null;
+/**
+ * Colours `code`, or returns `null` when the language is unknown or the chunk
+ * has not arrived yet.
+ *
+ * Highlighting the block as a whole and splitting afterwards, never line by
+ * line: a block comment, a template literal and a heredoc all span lines, and a
+ * highlighter handed one line at a time sees the second line of a comment as
+ * code.
+ */
+export declare function highlight(code: string, language: string): Promise<PlCodeLine[] | null>;
+/**
+ * highlight.js's own markup, as lines of coloured runs.
+ *
+ * The output is a strictly nested tree of `<span class="…">` with escaped text
+ * between, and a span may cross a newline — which is exactly why this exists
+ * rather than a `split('\n')` over the string. Walking it keeps the open class
+ * across the break and reopens it on the next line.
+ *
+ * Only the innermost class survives a nesting. In the browser it is the one on
+ * the element the text actually sits in, so it is the one whose colour applies;
+ * keeping the ancestors would put two equally specific rules on one run and let
+ * stylesheet order decide the colour.
+ */
+export declare function tokenize(html: string): PlCodeLine[];
+/** The same shape with no colour in it: what a block draws before its chunk lands. */
+export declare function plainLines(code: string): PlCodeLine[];
+export {};

package/dist/internal/highlight.js

@@ -0,0 +1 @@
+const i={bash:()=>import("highlight.js/lib/languages/bash"),c:()=>import("highlight.js/lib/languages/c"),cpp:()=>import("highlight.js/lib/languages/cpp"),csharp:()=>import("highlight.js/lib/languages/csharp"),css:()=>import("highlight.js/lib/languages/css"),dart:()=>import("highlight.js/lib/languages/dart"),diff:()=>import("highlight.js/lib/languages/diff"),dockerfile:()=>import("highlight.js/lib/languages/dockerfile"),go:()=>import("highlight.js/lib/languages/go"),graphql:()=>import("highlight.js/lib/languages/graphql"),ini:()=>import("highlight.js/lib/languages/ini"),java:()=>import("highlight.js/lib/languages/java"),javascript:()=>import("highlight.js/lib/languages/javascript"),json:()=>import("highlight.js/lib/languages/json"),kotlin:()=>import("highlight.js/lib/languages/kotlin"),less:()=>import("highlight.js/lib/languages/less"),lua:()=>import("highlight.js/lib/languages/lua"),makefile:()=>import("highlight.js/lib/languages/makefile"),markdown:()=>import("highlight.js/lib/languages/markdown"),objectivec:()=>import("highlight.js/lib/languages/objectivec"),perl:()=>import("highlight.js/lib/languages/perl"),php:()=>import("highlight.js/lib/languages/php"),plaintext:()=>import("highlight.js/lib/languages/plaintext"),powershell:()=>import("highlight.js/lib/languages/powershell"),python:()=>import("highlight.js/lib/languages/python"),r:()=>import("highlight.js/lib/languages/r"),ruby:()=>import("highlight.js/lib/languages/ruby"),rust:()=>import("highlight.js/lib/languages/rust"),scss:()=>import("highlight.js/lib/languages/scss"),shell:()=>import("highlight.js/lib/languages/shell"),sql:()=>import("highlight.js/lib/languages/sql"),swift:()=>import("highlight.js/lib/languages/swift"),typescript:()=>import("highlight.js/lib/languages/typescript"),xml:()=>import("highlight.js/lib/languages/xml"),yaml:()=>import("highlight.js/lib/languages/yaml")},t={"c++":"cpp",cc:"cpp",cjs:"javascript",console:"bash",cs:"csharp",cts:"typescript",docker:"dockerfile",gql:"graphql",golang:"go",h:"cpp",hpp:"cpp",htm:"xml",html:"xml",js:"javascript",jsx:"javascript",kt:"kotlin",kts:"kotlin",md:"markdown",mdx:"markdown",mjs:"javascript",mm:"objectivec",mts:"typescript",mysql:"sql",node:"javascript",none:"plaintext",objc:"objectivec",plain:"plaintext",posh:"powershell",ps1:"powershell",psql:"sql",py:"python",rb:"ruby",rs:"rust",sh:"bash",svelte:"xml",svg:"xml",text:"plaintext",toml:"ini",ts:"typescript",tsx:"typescript",txt:"plaintext",vue:"xml",yml:"yaml",zsh:"bash"},l=new Map;export function registerLanguage(i,t){const g=i.toLowerCase();l.set(g,t),s.delete(g)}let g=null;const s=new Map;export function canonicalLanguage(i){if(!i)return null;const g=i.trim().toLowerCase();return g?l.has(g)?g:t[g]??g:null}export async function highlight(t,a){let e=s.get(a);e||(e=async function prepare(t){const s=l.get(t),a=s?void 0:i[t];if(!s&&!a)return null;g??=import("highlight.js/lib/core").then(i=>i.default);const e=await g;return s?e.registerLanguage(t,s):e.getLanguage(t)||e.registerLanguage(t,(await a()).default),t}(a).catch(i=>{throw s.delete(a),i}),s.set(a,e));const h=await e;return h&&g?tokenize((await g).highlight(t,{language:h,ignoreIllegals:!0}).value):null}const a={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#x27;":"'"};export function tokenize(i){const t=[[]],l=[],g=/<span class="([^"]*)">|<\/span>/g;let s=0;const push=i=>{if(!i)return;const g=l[l.length-1];i.replace(/&(?:amp|lt|gt|quot|#x27);/g,i=>a[i]).split("\n").forEach((i,l)=>{l>0&&t.push([]),i&&t[t.length-1].push(g?{text:i,token:g}:{text:i})})};for(const t of i.matchAll(g))push(i.slice(s,t.index)),s=t.index+t[0].length,void 0===t[1]?l.pop():l.push(t[1]);return push(i.slice(s)),t}export function plainLines(i){return i.split("\n").map(i=>i?[{text:i}]:[])}

package/dist/internal/icons.d.ts

@@ -39,6 +39,16 @@ export declare function ArrowRightIcon(): React.ReactElement;
 export declare function EllipsisIcon(): React.ReactElement;
 /** The tick: a chosen option, a ticked menu item, a checked box. */
 export declare function CheckIcon(): React.ReactElement;
+/**
+ * The clipboard: one sheet behind another, which is what copying is.
+ *
+ * `PlCodeBlock`'s bar draws it, and it turns into the tick above once the
+ * clipboard has taken the code — the same tick a chosen option wears, because
+ * "it worked" is one mark in this library and not two.
+ */
+export declare function CopyIcon(): React.ReactElement;
+/** The angle brackets: the toggle that drops the colouring off a code block. */
+export declare function CodeIcon(): React.ReactElement;
 /**
  * The two steppers' marks.
  *