plass-ui 1.3.0 → 1.5.0

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/image.d.ts

@@ -0,0 +1,94 @@
+/**
+ * The arithmetic a `PlImage` turns, mirrors and places its picture with, and the
+ * declarations that draw the turn and the mirror.
+ *
+ * The arithmetic is here rather than in the component for the reason
+ * `internal/gallery.ts` is: **the Dart build needs the same answers.** A turn
+ * that rounded a stray `45` to a different quarter on the two sides would be one
+ * picture lying two different ways, and a crop that kept a different part of it
+ * would be two pictures. The declarations are here because the preview draws
+ * the same turn and mirror from a chunk of its own.
+ */
+import type * as React from 'react';
+/** A turn, as a count of clockwise quarters. */
+export type PlassQuarters = 0 | 1 | 2 | 3;
+/**
+ * Which way a picture is mirrored, along the axes it is shown on.
+ *
+ * Declared here rather than beside the component because the declarations
+ * below are written from it; `PlImageFlip` is this under the component's name.
+ */
+export type PlassImageFlip = 'none' | 'horizontal' | 'vertical' | 'both';
+/**
+ * A turn in degrees as a count of clockwise quarters, whatever number arrived.
+ *
+ * The type holds a TypeScript caller to `0`, `90`, `180` and `270`; this is for
+ * everyone else. `-90` is the `270` it means, `450` is `90`, anything between
+ * two quarters goes to the nearer one, and a number that is not finite is no
+ * turn at all.
+ */
+export declare function quartersOf(degrees: number): PlassQuarters;
+/** Whether a turn puts the picture on its side, swapping its width and height. */
+export declare function isSideways(quarters: PlassQuarters): boolean;
+/**
+ * The turn and the mirror, as the declarations that draw them.
+ *
+ * The individual `rotate` and `scale` properties rather than `transform`, which
+ * leaves `transform` to whoever else wants the picture: an inline `transform`
+ * here would silently beat a hover effect or a class of the caller's own.
+ *
+ * The two compose in a fixed order, and scale comes first: it acts on the
+ * element before the element is turned. So on a quarter turn, a mirror along one
+ * axis of the screen is a mirror along the other axis of the element, and the
+ * two are swapped here rather than making a caller think about it.
+ *
+ * On its side the picture is laid out at the box's height by the box's width
+ * and turned into place, and that is what lets `fit` work at all. `object-fit`
+ * fits the element's own box, and a picture turned inside the box it was given
+ * would overhang it on one axis and fall short on the other. The container
+ * units read the box, which is a size container only while this is the case;
+ * `maxWidth` is cleared because a reset caps an `<img>` at the width of its
+ * parent, and on a tall box that is shorter than the length the turned picture
+ * needs.
+ */
+export declare function poseStyle(quarters: PlassQuarters, flip: PlassImageFlip): React.CSSProperties | null;
+/**
+ * The geometry of a copy of the picture drawn underneath it: the same turn and
+ * mirror, over the same box grown by `bleed` on every side.
+ *
+ * A blur fades to transparent over about two of its radii at the element's
+ * edge, so a blurred copy drawn at the box's own size would show the page
+ * through a soft frame. Grown past the box, it has the fringe clipped off by the
+ * box's `overflow: hidden` instead.
+ */
+export declare function layerStyle(quarters: PlassQuarters, flip: PlassImageFlip, bleed: number): React.CSSProperties;
+/**
+ * A position as the fractions of the free space across and down, or `null` for
+ * anything past the keywords and percentages `PlImagePosition` offers.
+ *
+ * The part of CSS's grammar a caller writes. A keyword says its own axis, a
+ * percentage is across when it comes first and down when it comes second, and
+ * `center` says nothing, which leaves the axis at the middle. A length has no
+ * fraction to turn, so it is `null`.
+ */
+export declare function positionFractions(position: string): [number, number] | null;
+/**
+ * A place on the picture as it is shown, as the same place on the element that
+ * is actually turned and mirrored.
+ *
+ * `object-position` works in the element's own frame, before it is transformed,
+ * so `top` on a picture turned upside down would keep what ends up at the
+ * bottom. The mirror is undone first, because it acts on the axes of the screen
+ * after the turn. Then the turn, a quarter at a time: one quarter clockwise lays
+ * the element's left edge along the top of the screen, so what is across on the
+ * screen was down the element.
+ */
+export declare function elementFractions([shownAcross, shownDown]: readonly [number, number], quarters: PlassQuarters, mirrorAcross: boolean, mirrorDown: boolean): [number, number];
+/**
+ * The `object-position` that keeps `position` where the reader sees it.
+ *
+ * Always written as two percentages rounded to two decimals, which every engine
+ * serialises the same way. A string the parser cannot read is handed through as
+ * it was written.
+ */
+export declare function objectPosition(position: string, quarters: PlassQuarters, flip: PlassImageFlip): string;

package/dist/internal/image.js

@@ -0,0 +1 @@
+export function quartersOf(t){return Number.isFinite(t)?(Math.round(t/90)%4+4)%4:0}export function isSideways(t){return t%2==1}export function poseStyle(t,e){const o="horizontal"===e||"both"===e,n="vertical"===e||"both"===e;if(0===t&&!o&&!n)return null;const[i,r]=isSideways(t)?[n,o]:[o,n];return{scale:i||r?`${i?-1:1} ${r?-1:1}`:void 0,rotate:0===t?void 0:90*t+"deg",...isSideways(t)?{position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"}:null}}export function layerStyle(t,e,o){const grown=t=>0===o?t:`calc(${t} + ${2*o}px)`;return isSideways(t)?{...poseStyle(t,e),width:grown("100cqh"),height:grown("100cqw")}:{...poseStyle(t,e),position:"absolute",top:-o+"px",left:-o+"px",width:grown("100%"),height:grown("100%"),maxWidth:"none"}}export function positionFractions(t){const e=[.5,.5],o=t.trim().toLowerCase().split(/\s+/);for(let t=0;t<o.length;t+=1){const n=["left","top","right","bottom"].indexOf(o[t]);if(n>=0)e[n%2]=n>1?1:0;else if(/^-?\d*\.?\d+%$/.test(o[t]))e[0===t?0:1]=parseFloat(o[t])/100;else if("center"!==o[t])return null}return e}export function elementFractions([t,e],o,n,i){let r=n?1-t:t,s=i?1-e:e;for(let t=0;t<o;t+=1)[r,s]=[s,1-r];return[r,s]}export function objectPosition(t,e,o){const n=positionFractions(t);if(null===n)return t;const[i,r]=elementFractions(n,e,"horizontal"===o||"both"===o,"vertical"===o||"both"===o),percent=t=>Math.round(1e4*t)/100+"%";return`${percent(i)} ${percent(r)}`}

package/dist/internal/inert.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The value `inert` has to be written with for a given React to put it in the
+ * DOM.
+ *
+ * React 19 knows `inert` as a boolean attribute, writes `true` and drops an
+ * empty string. React 18 does not know it at all: it drops `true` with a warning
+ * and writes a string as it is. A dropped attribute leaves the subtree
+ * focusable and on the accessibility tree, which is exactly what the attribute
+ * was there to stop, and nothing on the page looks any different.
+ */
+export declare function inertValueFor(version: string): true | '';
+/**
+ * `inert` as props to spread onto an element, written the way the running React
+ * keeps it. Nothing at all when the element is not inert, so the attribute is
+ * absent rather than present and false.
+ */
+export declare function inertProps(inert: boolean): {
+    inert?: boolean;
+};

package/dist/internal/inert.js

@@ -0,0 +1 @@
+import*as r from"react";export function inertValueFor(r){return Number.parseInt(r,10)>=19||""}const e=inertValueFor(r.version);export function inertProps(r){return r?{inert:e}:{}}

package/dist/internal/keys.d.ts

@@ -43,11 +43,30 @@ export declare function canonicalKey(token: string): string;
  */
 export interface PlassKeyState {
     key: string;
+    /** The physical key, for when `key` is what a modifier turned it into. */
+    code?: string;
     metaKey: boolean;
     ctrlKey: boolean;
     shiftKey: boolean;
     altKey: boolean;
 }
+/**
+ * Whether the key belongs to text an input method is still composing.
+ *
+ * The Enter that commits a Korean syllable and the Escape that cancels a
+ * Japanese conversion are the input method's keys, not the page's: answering
+ * one fires a binding the reader did not press, and consuming it breaks the
+ * word they were typing. `229` is what a browser reports for such a key where
+ * `isComposing` is not set.
+ */
+export declare function isComposingKey(event: {
+    keyCode?: number;
+    isComposing?: boolean;
+} & {
+    nativeEvent?: {
+        isComposing?: boolean;
+    };
+}): boolean;
 /**
  * Does the chord carry a modifier a reader cannot type?
  *

package/dist/internal/keys.js

@@ -1 +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]()}}
+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 isComposingKey(e){return Boolean(e.nativeEvent?.isComposing??e.isComposing)||229===e.keyCode}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,o){const n=o.split("+").map(canonicalKey),r=new Set(n.slice(0,-1)),a=n[n.length-1],i=e[a]??a,s="mac"===detectOS()?t.metaKey:t.ctrlKey,c=!(1===i.length&&!/[a-z0-9]/.test(i)&&!r.has("shift"))&&t.shiftKey;if(r.has("mod")!==s)return!1;if(r.has("shift")!==c||r.has("alt")!==t.altKey)return!1;if(!r.has("mod")&&(r.has("ctrl")!==t.ctrlKey||r.has("meta")!==t.metaKey))return!1;const p=t.key.toLowerCase();return p===i||!(!/^[a-z0-9]$/.test(i)||/^[a-z0-9]$/.test(p)||!t.code)&&t.code===(/[a-z]/.test(i)?`Key${i.toUpperCase()}`:`Digit${i}`)}export function hotKeyHandler(e,t){if(e||t)return o=>{if(t?.(o),e&&!o.defaultPrevented&&!isComposingKey(o))for(const t of Object.keys(e))if(matchesHotKey(o,t))return o.preventDefault(),o.stopPropagation(),void e[t]()}}

package/dist/internal/labels.d.ts

@@ -0,0 +1,182 @@
+export interface PlassLabels {
+    /** The × on a modal, a drawer, a popover, a toast. */
+    close: string;
+    /** The way out of a question that has two answers. */
+    cancel: string;
+    /** The other one. */
+    confirm: string;
+    /** The one button on a message that only needs to have been read. */
+    acknowledge: string;
+    /** Empties a field, a picker, a search. */
+    clear: string;
+    /** Finishes with a picker, or with a tour. */
+    done: string;
+    /** Leaves a sequence before the end of it. */
+    skip: string;
+    /** Names a search field the caller did not name. */
+    search: string;
+    /** Ticks everything in a list at once. */
+    selectAll: string;
+    /** Ticks one row of a table, whose own name is the row's contents. */
+    selectRow: string;
+    /** Takes one thing out of a set. */
+    remove: string;
+    /** Sends a message away without answering it. */
+    dismiss: string;
+    /** Opens a list a field is attached to. */
+    open: string;
+    /** A direction, on the two components that only move one step. */
+    previous: string;
+    next: string;
+    /** Uncovers and re-covers hidden content. */
+    reveal: string;
+    hide: string;
+    /** A number field's two steppers. */
+    increase: string;
+    decrease: string;
+    /** Opens a picture over the page. */
+    preview: string;
+    /** What a list says when it has nothing in it. */
+    empty: string;
+    /** Marks a step, or anything else, that may be left out. */
+    optional: string;
+    /** The trail's landmark, and the button that opens the steps it folded away. */
+    breadcrumb: string;
+    breadcrumbExpand: string;
+    /** The reel's landmark and its two steppers, which move by a slide. */
+    carousel: string;
+    carouselPrevious: string;
+    carouselNext: string;
+    /** What a slide is, said after its name: one slide's `aria-roledescription`.
+     * The reel's own is `carousel`. */
+    slide: string;
+    /** The wall of pictures' own landmark. */
+    gallery: string;
+    /** What a drawing of numbers is called when the caller has not named it. */
+    chart: string;
+    minimize: string;
+    maximize: string;
+    restore: string;
+    resizeWindow: string;
+    /** The palette's landmark and the placeholder in its field. */
+    commandPalette: string;
+    commandPalettePlaceholder: string;
+    /** What a sheet over the whole page is called when it has no name. */
+    overlay: string;
+    /** The region the toasts are announced in. */
+    notifications: string;
+    /** The pager's landmark and its four steppers, which move by a page. */
+    pagination: string;
+    paginationPrevious: string;
+    paginationNext: string;
+    paginationFirst: string;
+    paginationLast: string;
+    /** The stars' group. */
+    rating: string;
+    /** The panel's landmark, the buttons that open and shut it, and the handle
+     * that sizes it. */
+    sidebar: string;
+    sidebarOpen: string;
+    sidebarClose: string;
+    sidebarResize: string;
+    /** The first link on a page, which jumps past the furniture. */
+    skipToContent: string;
+    /** The button that goes back up a long page. */
+    backToTop: string;
+    /** The table of contents' own landmark. */
+    onThisPage: string;
+    /** What a chat bubble says while somebody is still writing. */
+    typing: string;
+    /** What a chat bubble's mark says about the message it is on. */
+    messageSending: string;
+    messageSent: string;
+    messageDelivered: string;
+    messageRead: string;
+    messageFailed: string;
+    /** What covers a spoiler until it is revealed. */
+    spoilerWarning: string;
+    /** What a file picker's drop zone says when the caller has not said. */
+    filePickerTitle: string;
+    /** Read out after a link that leaves the page, and never drawn. */
+    newTab: string;
+    /** The two columns of a transfer, and the buttons between them. */
+    transferAvailable: string;
+    transferSelected: string;
+    transferToSelected: string;
+    transferToAvailable: string;
+    /** The code block's bar: the button, what it says once it has worked, and
+     * what it says when the clipboard refused. */
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    /** The toggle that drops a block's colouring. */
+    raw: string;
+    /** What a block of code is called when it has neither a title nor a language. */
+    code: string;
+    /** The calendar's steppers, in day view. */
+    previousMonth: string;
+    nextMonth: string;
+    /** The same steppers in month view, where they move by a year. */
+    previousYear: string;
+    nextYear: string;
+    /** And in year view, where they move by a page of twelve. */
+    previousYears: string;
+    nextYears: string;
+    /** The two header buttons that open the month grid and the year grid. */
+    chooseMonth: string;
+    chooseYear: string;
+    /** The footer's actions. */
+    today: string;
+    /** The same shortcut on a picker that only asks for a month or a year. */
+    thisMonth: string;
+    thisYear: string;
+    now: string;
+    /** The clock's columns. */
+    hour: string;
+    minute: string;
+    second: string;
+    meridiem: string;
+    /** Which end of a range the calendar is currently asking for. */
+    start: string;
+    end: string;
+    /** A page button's name. */
+    paginationPage: (page: number) => string;
+    /** What the pager's live region says once the page has changed. */
+    paginationStatus: (page: number, count: number) => string;
+    /** What one star is called, and a read-only row with a score. The score can
+     * be a fraction, so a pack writes it the way its language writes a number:
+     * `2.5` in English, `2,5` in German. */
+    ratingValue: (value: number, count: number) => string;
+    /** And a read-only row with none. */
+    ratingNone: string;
+    /** One slide's name, which is also its dot's. */
+    carouselSlide: (index: number, count: number) => string;
+    /** Where a picture sits in a gallery: said after a tile's own words, and
+     * drawn as the viewer's counter. */
+    galleryItem: (index: number, total: number) => string;
+    /** A remove button named after what it takes away: a file, a chip. */
+    removeItem: (name: string) => string;
+    /** The row that offers what was typed as a value of its own. */
+    addCustom: (query: string) => string;
+    /** One slot of a code field, named by its place in the row. */
+    otpSlot: (index: number, count: number) => string;
+    /** What a transfer says once rows have moved, given how many and the list. */
+    transferMoved: (count: number, list: string) => string;
+}
+/**
+ * English, and the reason the library needs no setup to read.
+ *
+ * Every locale in `src/locales/` is this object with the values replaced, which
+ * is what makes a missing key a type error rather than a word that quietly
+ * stays English.
+ */
+export declare const defaultLabels: PlassLabels;
+/**
+ * The words in scope, resolved once per render.
+ *
+ * Two layers: the English above, and whatever a `PlassProvider` set. A
+ * component's own `*Label` prop is the third and narrowest, and it is applied
+ * at the call site rather than here — which is what lets an application
+ * translate the vocabulary once and one button still say something else.
+ */
+export declare function useLabels(): PlassLabels;

package/dist/internal/labels.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";import{useDefaults as a}from"./defaults.js";export const defaultLabels={close:"Close",cancel:"Cancel",confirm:"Confirm",acknowledge:"OK",clear:"Clear",done:"Done",skip:"Skip",search:"Search",selectAll:"Select all",selectRow:"Select row",remove:"Remove",dismiss:"Dismiss",open:"Open",previous:"Previous",next:"Next",reveal:"Reveal",hide:"Hide",increase:"Increase",decrease:"Decrease",preview:"Preview",empty:"Nothing here",optional:"Optional",breadcrumb:"Breadcrumb",breadcrumbExpand:"Show the hidden steps",carousel:"Carousel",carouselPrevious:"Previous slide",carouselNext:"Next slide",slide:"slide",commandPalette:"Command palette",commandPalettePlaceholder:"Search commands",gallery:"Gallery",chart:"Chart",minimize:"Minimize",maximize:"Maximize",restore:"Restore",resizeWindow:"Resize window",overlay:"Overlay",notifications:"Notifications",pagination:"Pagination",paginationPrevious:"Previous page",paginationNext:"Next page",paginationFirst:"First page",paginationLast:"Last page",rating:"Rating",sidebar:"Sidebar",sidebarOpen:"Open sidebar",sidebarClose:"Close sidebar",sidebarResize:"Resize sidebar",skipToContent:"Skip to content",backToTop:"Back to top",onThisPage:"On this page",typing:"Typing…",messageSending:"Sending",messageSent:"Sent",messageDelivered:"Delivered",messageRead:"Read",messageFailed:"Not delivered",spoilerWarning:"This may contain spoilers",filePickerTitle:"Drop files here, or click to browse",newTab:"(opens in a new tab)",transferAvailable:"Available",transferSelected:"Selected",transferToSelected:"Move to selected",transferToAvailable:"Move to available",copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Raw",code:"Code",previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End",paginationPage:e=>`Page ${e}`,paginationStatus:(e,a)=>`Page ${e} of ${a}`,ratingValue:(e,a)=>`${e.toLocaleString("en")} out of ${a}`,ratingNone:"No rating",carouselSlide:(e,a)=>`Slide ${e} of ${a}`,galleryItem:(e,a)=>`${e} of ${a}`,removeItem:e=>`Remove ${e}`,addCustom:e=>`Add “${e}”`,otpSlot:(e,a)=>`Character ${e} of ${a}`,transferMoved:(e,a)=>`${e} ${1===e?"item":"items"} moved to ${a}`};export function useLabels(){const{labels:o}=a();return e.useMemo(()=>o?{...defaultLabels,...o}:defaultLabels,[o])}

package/dist/internal/link.d.ts

@@ -16,3 +16,20 @@
  * that can drift, and the one that drifts is the one nobody reads.
  */
 export declare function safeRel(target: string | undefined, rel: string | undefined): string | undefined;
+/**
+ * Whether an address is one this library will point an `href` at.
+ *
+ * Relative addresses pass, and so do `http`, `https` and `mailto`. Everything
+ * else is turned down, which in practice means `javascript:` — an address that
+ * runs code instead of going somewhere. React 19 refuses to write one, but the
+ * peer range starts at React 18, which only warns and then writes it.
+ *
+ * The test is done on the address with tabs and line breaks taken out and the
+ * leading control characters and spaces trimmed, because that is the address the
+ * browser navigates to: a tab written into the middle of a scheme is gone by the
+ * time it counts. Only the scheme is read, so the rest is handed back untouched.
+ *
+ * Here beside `safeRel` for the same reason that one is here: which addresses a
+ * component will follow is one decision, and it belongs in one place.
+ */
+export declare function safeHref(href: string | undefined): string | undefined;

package/dist/internal/link.js

@@ -1 +1 @@
-export function safeRel(e,n){return void 0===e||""===e||"_self"===e?n:[...new Set([...(n??"").split(/\s+/).filter(Boolean),"noopener","noreferrer"])].join(" ")}
+export function safeRel(e,t){return void 0===e||""===e||"_self"===e?t:[...new Set([...(t??"").split(/\s+/).filter(Boolean),"noopener","noreferrer"])].join(" ")}const e=new Set(["http:","https:","mailto:"]),t=/^[a-z][a-z0-9+.-]*:/i;export function safeHref(r){if(void 0===r)return;const n=r.replace(/[\t\n\r]/g,"").replace(/^[\0- ]+/,""),o=t.exec(n);return null===o||e.has(o[0].toLowerCase())?r:void 0}

package/dist/internal/mockup.d.ts

@@ -0,0 +1,193 @@
+/**
+ * The device a `PlMockup` is a picture of: the tables that say how big it is,
+ * and the drawings that go on its screen.
+ *
+ * It lives here for the reason `internal/color.ts` does. Only one component
+ * reads it, but what it holds is a body of reference data rather than a piece of
+ * that component — five resolutions per device, three shells, six systems' worth
+ * of chrome — and a component file with all of that in it would be a table with
+ * a `forwardRef` at the bottom.
+ *
+ * Two conventions run through the whole file:
+ *
+ * **Every length in here is a device pixel.** The screen is laid out at the
+ * resolution it claims to have and the whole frame is scaled once, at the top,
+ * so a 54px status bar is 54px on the phone rather than 54px on the page. That
+ * is also why the geometry is written as inline styles rather than as utilities:
+ * these are numbers off a table, computed per render, and Tailwind only ever
+ * sees class names that appear literally in the source. Utilities are still what
+ * does the layout — the inline styles are only ever the measurements.
+ *
+ * **The chrome draws no words except the clock.** A menu bar's titles, a dock's
+ * icons and a status bar's carrier are abstract shapes, which is what keeps this
+ * an impression of a system rather than a copy of one: nothing to translate,
+ * nothing to redraw when a version ships, and no other party's marks in the
+ * library. The clock is the exception because a blank rectangle where the time
+ * goes reads as a bug, and it is a prop.
+ */
+import * as React from 'react';
+import type { PlassSize } from '../types.js';
+/** Which machine the mockup is a picture of. */
+export type PlMockupDevice = 'desktop' | 'tablet' | 'mobile';
+/**
+ * The system whose chrome is drawn on the screen.
+ *
+ * One union across all three devices rather than one per device: a caller
+ * reading the type should see the whole set, and a device offered an OS that is
+ * not its own falls back to its default rather than failing to compile — which
+ * is the behaviour a single `Mockup` with a `device` prop has to have anyway.
+ */
+export type PlMockupOs = 'macos' | 'windows' | 'linux' | 'ios' | 'ipados' | 'android';
+/** What the hardware around a desktop screen is. */
+export type PlMockupHardware = 'monitor' | 'laptop';
+/**
+ * The camera cut-out at the top of a screen.
+ *
+ * Hardware, not chrome — it is drawn whether or not `systemUi` is on, because a
+ * phone with the status bar hidden still has a hole in its screen.
+ */
+export type PlMockupNotch = 'none' | 'notch' | 'dynamic-island' | 'punch-hole';
+/**
+ * How much hardware there is around the screen.
+ *
+ * `none` is not a thinner bezel — it is no hardware at all: no frame, no stand,
+ * no laptop base, just the screen with its corners cut. It is what a mockup that
+ * only wants to say "this is a phone-shaped viewport" asks for.
+ *
+ * `thick` is an older device rather than a wider version of `standard`: the
+ * sides stay narrow and the forehead and chin grow, which is where a bezel
+ * actually goes when there is a lot of it.
+ */
+export type PlMockupBezel = 'none' | 'thin' | 'standard' | 'thick';
+/** What the hardware is made of. */
+export type PlMockupFinish = 'graphite' | 'silver' | 'white';
+/**
+ * Which way a handheld is held.
+ *
+ * `portrait`/`landscape` rather than `PlassOrientation`'s `vertical`/`horizontal`,
+ * and this is the one place the library spells the idea twice on purpose. A
+ * `PlDivider` running horizontally is not "landscape", and a device held upright is
+ * not "vertical" in any vocabulary a designer or a media query uses. CSS itself
+ * keeps both pairs for exactly this reason.
+ */
+export type PlMockupOrientation = 'portrait' | 'landscape';
+/** A screen's logical resolution, in CSS pixels. */
+export interface PlMockupResolution {
+    width: number;
+    height: number;
+}
+/**
+ * The system a device will actually draw.
+ *
+ * An OS the device does not run falls back to its default, with one nicety: a
+ * caller who writes `ios` on a tablet or `ipados` on a phone meant the Apple one
+ * and gets it, rather than being sent back to the start of the list.
+ */
+export declare function resolveOs(device: PlMockupDevice, os?: PlMockupOs): PlMockupOs;
+/** What a device puts in its screen when the caller says nothing. */
+export declare function defaultNotch(device: PlMockupDevice, os: PlMockupOs): PlMockupNotch;
+export declare const resolutions: Record<PlMockupDevice, Record<PlassSize, PlMockupResolution>>;
+/** How much hardware sits on each side of the screen. */
+export interface PlMockupInset {
+    x: number;
+    top: number;
+    bottom: number;
+}
+/** Every number the component needs to lay a device out, in device pixels. */
+export interface PlMockupMetrics {
+    /** The screen, after `orientation` has had its say. */
+    screen: PlMockupResolution;
+    /** The hardware around it. Zero on all four sides when `bezel` is `none`. */
+    bezel: PlMockupInset;
+    /** Screen plus bezel: the part you would call the device's face. */
+    body: {
+        width: number;
+        height: number;
+    };
+    /** Face plus whatever holds it up. This is what gets scaled to fit. */
+    frame: {
+        width: number;
+        height: number;
+    };
+    frameRadius: number;
+    screenRadius: number;
+    /** A monitor's neck and foot, when there is one. */
+    stand: {
+        neckWidth: number;
+        neckHeight: number;
+        footWidth: number;
+        footHeight: number;
+    } | null;
+    /** A laptop's base, when there is one. */
+    base: {
+        width: number;
+        height: number;
+        lipWidth: number;
+    } | null;
+}
+export declare function mockupMetrics(options: {
+    device: PlMockupDevice;
+    size: PlassSize;
+    resolution?: PlMockupResolution;
+    orientation: PlMockupOrientation;
+    bezel: PlMockupBezel;
+    hardware: PlMockupHardware;
+}): PlMockupMetrics;
+export declare const finishSlots: Record<PlMockupFinish, React.CSSProperties>;
+/**
+ * The hardware's surface: the finish, a light top edge and a hairline all the
+ * way round, which is the plate the design language puts on everything else. No
+ * dark bevel underneath — the shade is a ring, not a shadow.
+ */
+export declare const shellClasses = "bg-(--p-shell) [box-shadow:inset_0_1px_0_var(--p-shell-edge),inset_0_0_0_1px_var(--p-shell-shade)]";
+/** How far off the page the whole device sits, as a silhouette rather than a box.
+ *
+ *  `drop-shadow` rather than `box-shadow` for one reason: the shadow has to
+ *  follow a rounded lid on a narrow neck on a wide foot, and a box-shadow would
+ *  draw the rectangle that contains all three. It also sits outside the scale,
+ *  so a device shrunk to a third of its size does not get a third of its shadow.
+ */
+export declare const elevationFilters: readonly ["none", "drop-shadow(0 1px 2px var(--plass-shadow-ambient))", "drop-shadow(0 2px 4px var(--plass-shadow-ambient)) drop-shadow(0 8px 12px var(--plass-shadow-ambient))", "drop-shadow(0 4px 6px var(--plass-shadow-ambient)) drop-shadow(0 18px 28px var(--plass-shadow-ambient))"];
+/**
+ * The camera, drawn on the glass.
+ *
+ * Portrait puts it against the top edge and landscape against the leading one,
+ * which is where it goes on a real device turned the same way — and it is why
+ * the island does not collide with the status bar in landscape: it has moved out
+ * from under it.
+ */
+export declare function PlMockupCutout({ notch, screen, landscape }: {
+    notch: PlMockupNotch;
+    screen: PlMockupResolution;
+    landscape: boolean;
+}): React.JSX.Element | null;
+/** What a system puts on the screen, and how much room it takes. */
+export interface PlMockupChrome {
+    top?: {
+        size: number;
+        node: React.ReactNode;
+    };
+    bottom?: {
+        size: number;
+        node: React.ReactNode;
+    };
+    /** A dock down the leading edge. Only Linux has one. */
+    start?: {
+        size: number;
+        node: React.ReactNode;
+    };
+}
+/**
+ * The bars, per system.
+ *
+ * Each one takes its own space rather than floating over the content: a caller
+ * putting a screenshot in a mockup wants all of the screenshot, and a status bar
+ * that covered the top of it would be a crop nobody asked for. The cut-out is
+ * the exception, because that one really is a hole in the glass.
+ */
+export declare function mockupChrome(options: {
+    os: PlMockupOs;
+    notch: PlMockupNotch;
+    landscape: boolean;
+    time: string;
+}): PlMockupChrome;