plass-ui 1.2.0 → 1.4.0

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 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 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 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,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}

package/dist/internal/defaults.d.ts

@@ -0,0 +1,74 @@
+/**
+ * The defaults an application sets once, and every component reads.
+ *
+ * The context lives here rather than beside `PlassProvider` for the reason
+ * `internal/button-group.ts` gives one folder over: seventy components read it
+ * and one component writes it, and none of them should have to import the
+ * other.
+ *
+ * **What is in here is decided by one rule: an axis belongs to the application
+ * or it belongs to the component.** `size` and `density` are the application's
+ * — a product that is compact is compact everywhere, and repeating `size="sm"`
+ * at four hundred call sites is not a design decision, it is transcription.
+ * `color` is the application's for the same reason, one step weaker: a brand
+ * whose primary family is `secondary` says so once.
+ *
+ * `variant` and `elevation` are **not** here, and their absence is the load
+ * bearing part:
+ *
+ * - `variant` names what a surface is *made of*, and the design language spends
+ *   its first paragraph on the fact that a pressed thing and a thing that holds
+ *   content are different materials. A button defaults to `solid` and a card to
+ *   `glass` because that is the arrangement, not because nobody got round to
+ *   configuring it. One value for both is not a default, it is a flattening.
+ * - `elevation` is per-component semantics for the same reason: a control rests
+ *   **on** the sheet and defaults to `1`, a field is cut **into** it and
+ *   defaults to `0`. A single number for the two says the opposite of what the
+ *   ladder means.
+ *
+ * A caller who genuinely wants every button glass writes it on the buttons.
+ */
+import * as React from 'react';
+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. */
+export interface PlassDefaults {
+    /** The rung of the size ladder every component starts from. */
+    size?: PlassSize;
+    /** The semantic family they start from. */
+    color?: PlassColor;
+    /** How tightly they pack their content. */
+    density?: PlassDensity;
+    /** The BCP 47 tag the date and time components format and read against. */
+    locale?: string;
+    /** Which day their weeks start on, as `Date` counts them — Sunday is `0`. */
+    weekStartsOn?: PlassWeekday;
+    /**
+     * 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.
+     *
+     * Left out is not "left to right" — it is **"read it off the document"**,
+     * which is what a page that wrote `dir="rtl"` already said. Set it only for a
+     * subtree that runs the other way from the page around it, or on a server
+     * that knows the answer before there is a document to ask.
+     */
+    direction?: PlassDirection;
+}
+export declare const DefaultsContext: React.Context<PlassDefaults>;
+/**
+ * What the nearest `PlassProvider` decided, or nothing.
+ *
+ * Every component that reads this resolves in the same order and it is the
+ * order a reader would guess: **the component's own prop, then whatever set is
+ * around it, then the provider, then the component's own default.** So a
+ * `size="lg"` on one button still wins inside a `PlButtonGroup` inside a
+ * compact application.
+ */
+export declare function useDefaults(): PlassDefaults;

package/dist/internal/defaults.js

@@ -0,0 +1 @@
+"use client";import*as t from"react";const e=/* @__PURE__ */Object.freeze({});export const DefaultsContext=/* @__PURE__ */t.createContext(e);export function useDefaults(){return t.useContext(DefaultsContext)}

package/dist/internal/direction.d.ts

@@ -0,0 +1,4 @@
+/** The two directions a document can run in. */
+export type PlassDirection = 'ltr' | 'rtl';
+/** Which way the document runs, re-rendering when it turns over. */
+export declare function useDocumentDirection(): PlassDirection;

package/dist/internal/direction.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";function read(){return"undefined"==typeof document?"ltr":"rtl"===getComputedStyle(document.documentElement).direction?"rtl":"ltr"}let t=null,n=null;const r=new Set;function snapshot(){return null===t&&(t=read()),t}function onServer(){return"ltr"}function subscribe(e){return r.add(e),n||"undefined"==typeof document||(n=new MutationObserver(()=>{const e=read();e!==t&&(t=e,r.forEach(e=>e()))}),n.observe(document.documentElement,{attributes:!0,attributeFilter:["dir","class","style"]})),()=>{r.delete(e),0===r.size&&(n?.disconnect(),n=null,t=null)}}export function useDocumentDirection(){return e.useSyncExternalStore(subscribe,snapshot,onServer)}

package/dist/internal/drag.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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.
+ */
+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 beginPointerDrag({target:e,pointerId:t,onMove:n,onEnd:r,selectable:o=!0,mark:s=!0}){const i=o?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")}}():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/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,34 @@
+/**
+ * The arithmetic a `PlGallery` lays itself out with.
+ *
+ * It is here rather than in the component for the reason `internal/steps.ts`
+ * is: **the Dart build needs the same answers.** A masonry that dealt its
+ * columns differently on the two sides would be one gallery with two orders,
+ * and the order is the only thing about a masonry a reader can check.
+ *
+ * Nothing in here measures anything. Every function takes the ratios the caller
+ * declared, which is what lets the whole arrangement be right in the first
+ * frame the browser paints and stay put as the files arrive — the bargain
+ * `PlImage`'s own `ratio` makes, one level up, and the reason a gallery of
+ * forty photographs does not reflow forty times.
+ */
+/**
+ * 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;
+/**
+ * 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[][];

package/dist/internal/gallery.js

@@ -0,0 +1 @@
+export function ratioOf(r,e){if(void 0===r)return e;if("number"==typeof r)return r>0?r:e;const[t,n]=r.split("/"),o=void 0===n?Number(t):Number(t)/Number(n);return Number.isFinite(o)&&o>0?o:e}export function dealColumns(r,e){const t=Array.from({length:e},()=>[]),n=new Array(e).fill(0);return r.forEach((r,o)=>{let u=0;for(let r=1;r<e;r+=1)n[r]<n[u]&&(u=r);t[u].push(o),n[u]+=1/r}),t}

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,28 +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[];
-/**
- * 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 responsiveSlots(t,e,n){const s=function breakpointMap(t){return null==t?{}:"object"==typeof t?t:{xs:t}}(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 l=i.trim().toLowerCase();return l?t[l]??l: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.
  *

package/dist/internal/icons.js

@@ -1 +1 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";export function Spinner(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[r("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),r("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}export function ChevronIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 6.5 3.5 3.5 3.5-3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function ArrowRightIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3 8h10m-3.5-3.5L13 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function EllipsisIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"3.5",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"8",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"12.5",cy:"8",r:"1.15",fill:"currentColor"})]})}export function CheckIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m3.5 8.5 3 3 6-6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export function MinusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function PlusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M8 3.5v9M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function CloseIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 4.5 7 7m0-7-7 7",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function ClockIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 4.5V8l2.4 1.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}export function CalendarIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("rect",{x:"2.25",y:"3.25",width:"11.5",height:"10.5",rx:"2",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M2.25 6.5h11.5",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M5.5 1.75v2.5M10.5 1.75v2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function LinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M6.5 9.5a2.75 2.75 0 0 0 4 .25l1.75-1.75a2.75 2.75 0 0 0-3.9-3.9L7.75 5.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("path",{d:"M9.5 6.5a2.75 2.75 0 0 0-4-.25L3.75 8a2.75 2.75 0 0 0 3.9 3.9l.6-.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function ExternalLinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M12.75 9.25v2.5a1.5 1.5 0 0 1-1.5 1.5h-7a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5h2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("path",{d:"M9.5 2.75h3.75V6.5M7.25 8.75l5.75-5.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}function NoteIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 7.25v4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"4.9",r:"0.85",fill:"currentColor"})]})}export function DotIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:r("circle",{cx:"8",cy:"8",r:"3.25"})})}export function StarIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:r("path",{d:"m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z"})})}export function StarOutlineIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z",stroke:"currentColor",strokeWidth:"1.3",strokeLinejoin:"round"})})}export function severityIcon(o){return"success"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.25 8.25 1.9 1.9 3.6-3.9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}):"warning"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M7.13 2.6 1.9 11.7a1 1 0 0 0 .87 1.5h10.46a1 1 0 0 0 .87-1.5L8.87 2.6a1 1 0 0 0-1.74 0Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r("path",{d:"M8 6.1v3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"11.2",r:"0.85",fill:"currentColor"})]}):"danger"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.9 5.9 4.2 4.2m0-4.2-4.2 4.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}):r(NoteIcon,{})}
+import{jsx as r,jsxs as e}from"react/jsx-runtime";export function Spinner(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"animate-spin",children:[r("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeOpacity:"0.25",strokeWidth:"2"}),r("path",{d:"M14.5 8A6.5 6.5 0 0 0 8 1.5",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]})}export function ChevronIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 6.5 3.5 3.5 3.5-3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function ArrowRightIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3 8h10m-3.5-3.5L13 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function EllipsisIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"3.5",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"8",cy:"8",r:"1.15",fill:"currentColor"}),r("circle",{cx:"12.5",cy:"8",r:"1.15",fill:"currentColor"})]})}export function CheckIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m3.5 8.5 3 3 6-6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export function CopyIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("rect",{x:"5.75",y:"5.75",width:"7.5",height:"7.5",rx:"1.75",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M10.25 3.6a1.85 1.85 0 0 0-1.5-.85h-4a2 2 0 0 0-2 2v4c0 .62.28 1.17.72 1.54",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function CodeIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M5.75 4.5 2.5 8l3.25 3.5m4.5-7L13.5 8l-3.25 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export function MinusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function PlusIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"M8 3.5v9M3.5 8h9",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function CloseIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m4.5 4.5 7 7m0-7-7 7",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round"})})}export function ClockIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 4.5V8l2.4 1.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}export function CalendarIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("rect",{x:"2.25",y:"3.25",width:"11.5",height:"10.5",rx:"2",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M2.25 6.5h11.5",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M5.5 1.75v2.5M10.5 1.75v2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function LinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M6.5 9.5a2.75 2.75 0 0 0 4 .25l1.75-1.75a2.75 2.75 0 0 0-3.9-3.9L7.75 5.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("path",{d:"M9.5 6.5a2.75 2.75 0 0 0-4-.25L3.75 8a2.75 2.75 0 0 0 3.9 3.9l.6-.6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})}export function ExternalLinkIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M12.75 9.25v2.5a1.5 1.5 0 0 1-1.5 1.5h-7a1.5 1.5 0 0 1-1.5-1.5v-7a1.5 1.5 0 0 1 1.5-1.5h2.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("path",{d:"M9.5 2.75h3.75V6.5M7.25 8.75l5.75-5.75",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})}function NoteIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"M8 7.25v4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"4.9",r:"0.85",fill:"currentColor"})]})}export function DotIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:r("circle",{cx:"8",cy:"8",r:"3.25"})})}export function StarIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:r("path",{d:"m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z"})})}export function StarOutlineIcon(){return r("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r("path",{d:"m8 1.6 1.86 3.9 4.14.56-3.02 2.9.76 4.24L8 11.16 4.26 13.2l.76-4.24L2 6.06l4.14-.56z",stroke:"currentColor",strokeWidth:"1.3",strokeLinejoin:"round"})})}export function severityIcon(o){return"success"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.25 8.25 1.9 1.9 3.6-3.9",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}):"warning"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("path",{d:"M7.13 2.6 1.9 11.7a1 1 0 0 0 .87 1.5h10.46a1 1 0 0 0 .87-1.5L8.87 2.6a1 1 0 0 0-1.74 0Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r("path",{d:"M8 6.1v3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r("circle",{cx:"8",cy:"11.2",r:"0.85",fill:"currentColor"})]}):"danger"===o?e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[r("circle",{cx:"8",cy:"8",r:"6.25",stroke:"currentColor",strokeWidth:"1.5"}),r("path",{d:"m5.9 5.9 4.2 4.2m0-4.2-4.2 4.2",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}):r(NoteIcon,{})}

package/dist/internal/keys.d.ts

@@ -0,0 +1,93 @@
+/**
+ * The shortcut vocabulary, read rather than written.
+ *
+ * `PlHotKeys` turns `Mod+Enter` into a pair of key caps; this turns the same
+ * string into a predicate over a real keyboard event. They are one file because
+ * a shortcut a component **displays** and a shortcut it **binds** have to be
+ * spelled the same way — otherwise the cap on the screen is a claim nobody
+ * checked. `PlCommandPalette` made that argument first and carried a private
+ * copy of the matcher to make it; the fields that take a `hotKeys` map are the
+ * reason it lives here instead, and `PlHotKeys` now reads the alias table and
+ * the platform out of this file rather than owning them.
+ *
+ * Nothing here is exported from `src/index.ts`. The one public name is
+ * `PlassHotKeys` in `src/types.ts`, which is the map a caller writes.
+ */
+import type * as React from 'react';
+import type { PlassHotKeys } from '../types.js';
+/** The three real platforms, once `auto` has been resolved. */
+export type PlassOS = 'mac' | 'windows' | 'linux';
+/**
+ * What the browser says it is running on.
+ *
+ * `userAgentData.platform` is the modern spelling and `navigator.platform` the
+ * deprecated one that every browser still answers; the user agent string is the
+ * last resort. All three are matched at once because the question here is coarse
+ * — which of three key caps to print, and which modifier `Mod` stands for — and
+ * getting it slightly wrong is a label, not a bug.
+ */
+export declare function detectOS(): PlassOS;
+/**
+ * The spellings that mean the same key, folded onto one name.
+ *
+ * A caller writes what is printed on their own keyboard — `Cmd`, `Option`,
+ * `Return`, `Esc` — and every one of those has to reach the same cap and the
+ * same binding.
+ */
+export declare const keyAliases: Record<string, string>;
+/** One token of a chord, folded: case, spacing and the aliases above. */
+export declare function canonicalKey(token: string): string;
+/**
+ * Only the parts of an event a chord is decided on, so the same matcher takes a
+ * React synthetic event and a DOM one without either being converted.
+ */
+export interface PlassKeyState {
+    key: string;
+    metaKey: boolean;
+    ctrlKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+}
+/**
+ * Does the chord carry a modifier a reader cannot type?
+ *
+ * `Mod`, `Ctrl`, `Meta` and `Alt` cannot appear in a text field's value, so a
+ * chord holding one of them is safe to answer wherever the focus happens to be.
+ * **Shift deliberately does not count**: `Shift+A` is how a capital A is typed.
+ *
+ * This is what lets a global binding be answered while somebody is writing an
+ * email without also stealing the letters out of it.
+ */
+export declare function hasHardModifier(chord: string): boolean;
+/** Whether this key would have done something in a field. */
+export declare function editsText(key: string): boolean;
+/**
+ * Whether the event landed somewhere a reader is entering text.
+ *
+ * A `<select>` counts: its own typeahead is how a reader picks an option, and a
+ * bare letter taken out from under it is a control that stops working. An
+ * `<input type="checkbox">` does not — nothing is being typed into it.
+ */
+export declare function isTypingTarget(target: EventTarget | null): boolean;
+/**
+ * Is this the chord?
+ *
+ * Every modifier is checked in **both** directions, which is the difference
+ * between binding a shortcut and binding a key: `'Enter'` must not fire on
+ * `Mod+Enter`, or a field that saves on Enter also saves on every chord that
+ * happens to end in one.
+ */
+export declare function matchesHotKey(event: PlassKeyState, chord: string): boolean;
+/**
+ * The `onKeyDown` a control carrying a `hotKeys` map wears.
+ *
+ * `undefined` when there is nothing to bind and no handler to call, so a field
+ * with neither attaches no listener at all.
+ *
+ * The caller's own `onKeyDown` runs **first** and unconditionally: it is the
+ * lower-level hook and it should see every key, including the ones the map is
+ * about to claim. If it consumed the event — `preventDefault()` — the map is
+ * skipped, which is how a caller overrules one of their own bindings for a
+ * particular key without taking the map apart.
+ */
+export declare function hotKeyHandler<E extends Element>(hotKeys: PlassHotKeys | undefined, onKeyDown: React.KeyboardEventHandler<E> | undefined): React.KeyboardEventHandler<E> | undefined;

package/dist/internal/keys.js

@@ -0,0 +1 @@
+export function detectOS(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,t=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(t)?"mac":/win/i.test(t)?"windows":"linux"}export const keyAliases={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",numpadenter:"enter",esc:"escape",del:"delete",caps:"capslock"};export function canonicalKey(e){const t=e.toLowerCase().replace(/[\s_-]/g,"");return keyAliases[t]??t}const e={up:"arrowup",down:"arrowdown",left:"arrowleft",right:"arrowright",space:" ",plus:"+"};export function hasHardModifier(e){return e.split("+").slice(0,-1).map(canonicalKey).some(e=>"mod"===e||"ctrl"===e||"meta"===e||"alt"===e)}const t=new Set(["enter","backspace","delete","arrowleft","arrowright","arrowup","arrowdown","home","end","pageup","pagedown"]);export function editsText(e){return 1===e.length||t.has(e.toLowerCase())}export function isTypingTarget(e){if(!(e instanceof HTMLElement))return!1;if(e.isContentEditable)return!0;if("TEXTAREA"===e.tagName||"SELECT"===e.tagName)return!0;if("INPUT"===e.tagName){const t=e.type;return!["button","checkbox","color","file","image","radio","range","reset","submit"].includes(t)}return!1}export function matchesHotKey(t,r){const o=r.split("+").map(canonicalKey),a=new Set(o.slice(0,-1)),n=o[o.length-1],i=e[n]??n,c="mac"===detectOS()?t.metaKey:t.ctrlKey;return a.has("mod")===c&&a.has("shift")===t.shiftKey&&a.has("alt")===t.altKey&&!!(a.has("mod")||a.has("ctrl")===t.ctrlKey&&a.has("meta")===t.metaKey)&&t.key.toLowerCase()===i}export function hotKeyHandler(e,t){if(e||t)return r=>{if(t?.(r),e&&!r.defaultPrevented)for(const t of Object.keys(e))if(matchesHotKey(r,t))return r.preventDefault(),r.stopPropagation(),void e[t]()}}