plass-ui 1.3.0 → 1.4.0

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,30 +16,7 @@
  * file generates. That is the same split the rest of the library makes:
  * per-instance values go in inline custom properties, never in class names.
  */
-import type * as React from 'react';
-import type { PlassAlignItems, PlassAlignSelf, PlassBreakpoint, PlassJustify, PlassResponsive } from '../types.js';
-/** Smallest first, which is also the order the media queries have to be in. */
-export declare const breakpoints: readonly PlassBreakpoint[];
-/** A bare value means "from `xs` up"; a map is already per-breakpoint. */
-export declare function breakpointMap<T>(value: PlassResponsive<T> | undefined): Partial<Record<PlassBreakpoint, T>>;
-/**
- * Turns a responsive value into the `--p-{name}-{breakpoint}` slots the CSS
- * reads, emitting only the breakpoints the caller actually named.
- *
- * The gaps are filled in by CSS rather than here: each breakpoint's rule falls
- * back through the ones below it, so `{ md: 6 }` needs one slot and not five.
- * That keeps the inline style on a grid item down to what was asked for.
- */
-export declare function responsiveSlots<T>(name: string, value: PlassResponsive<T> | undefined, toCss: (value: T) => string): React.CSSProperties;
-/**
- * Fills in the `xs` entry of a partial map with the prop's own default.
- *
- * Without this, `spacing={{ md: 4 }}` would be a grid with no gutter at all
- * below 48rem — the CSS fallback rather than the documented default — and a
- * caller who narrowed one breakpoint would silently lose every other one. A map
- * says "from here up, use this instead"; it does not say "and nothing below".
- */
-export declare function withBaseline<T>(value: PlassResponsive<T> | undefined, baseline: T): PlassResponsive<T>;
+import type { PlassAlignItems, PlassAlignSelf, PlassJustify } from '../types.js';
 /**
  * A count of columns, as a plain number for `calc()` to divide by.
  *

package/dist/internal/grid.js

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

package/dist/internal/highlight.d.ts

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

package/dist/internal/highlight.js

@@ -0,0 +1 @@
+const i={bash:()=>import("highlight.js/lib/languages/bash"),c:()=>import("highlight.js/lib/languages/c"),cpp:()=>import("highlight.js/lib/languages/cpp"),csharp:()=>import("highlight.js/lib/languages/csharp"),css:()=>import("highlight.js/lib/languages/css"),dart:()=>import("highlight.js/lib/languages/dart"),diff:()=>import("highlight.js/lib/languages/diff"),dockerfile:()=>import("highlight.js/lib/languages/dockerfile"),go:()=>import("highlight.js/lib/languages/go"),graphql:()=>import("highlight.js/lib/languages/graphql"),ini:()=>import("highlight.js/lib/languages/ini"),java:()=>import("highlight.js/lib/languages/java"),javascript:()=>import("highlight.js/lib/languages/javascript"),json:()=>import("highlight.js/lib/languages/json"),kotlin:()=>import("highlight.js/lib/languages/kotlin"),less:()=>import("highlight.js/lib/languages/less"),lua:()=>import("highlight.js/lib/languages/lua"),makefile:()=>import("highlight.js/lib/languages/makefile"),markdown:()=>import("highlight.js/lib/languages/markdown"),objectivec:()=>import("highlight.js/lib/languages/objectivec"),perl:()=>import("highlight.js/lib/languages/perl"),php:()=>import("highlight.js/lib/languages/php"),plaintext:()=>import("highlight.js/lib/languages/plaintext"),powershell:()=>import("highlight.js/lib/languages/powershell"),python:()=>import("highlight.js/lib/languages/python"),r:()=>import("highlight.js/lib/languages/r"),ruby:()=>import("highlight.js/lib/languages/ruby"),rust:()=>import("highlight.js/lib/languages/rust"),scss:()=>import("highlight.js/lib/languages/scss"),shell:()=>import("highlight.js/lib/languages/shell"),sql:()=>import("highlight.js/lib/languages/sql"),swift:()=>import("highlight.js/lib/languages/swift"),typescript:()=>import("highlight.js/lib/languages/typescript"),xml:()=>import("highlight.js/lib/languages/xml"),yaml:()=>import("highlight.js/lib/languages/yaml")},t={"c++":"cpp",cc:"cpp",cjs:"javascript",console:"bash",cs:"csharp",cts:"typescript",docker:"dockerfile",gql:"graphql",golang:"go",h:"cpp",hpp:"cpp",htm:"xml",html:"xml",js:"javascript",jsx:"javascript",kt:"kotlin",kts:"kotlin",md:"markdown",mdx:"markdown",mjs:"javascript",mm:"objectivec",mts:"typescript",mysql:"sql",node:"javascript",none:"plaintext",objc:"objectivec",plain:"plaintext",posh:"powershell",ps1:"powershell",psql:"sql",py:"python",rb:"ruby",rs:"rust",sh:"bash",svelte:"xml",svg:"xml",text:"plaintext",toml:"ini",ts:"typescript",tsx:"typescript",txt:"plaintext",vue:"xml",yml:"yaml",zsh:"bash"},l=new Map;export function registerLanguage(i,t){const g=i.toLowerCase();l.set(g,t),s.delete(g)}let g=null;const s=new Map;export function canonicalLanguage(i){if(!i)return null;const 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/labels.d.ts

@@ -0,0 +1,138 @@
+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;
+    /** 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;
+    /** 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;
+    /** 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 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 button that shuts it, and the handle that sizes it. */
+    sidebar: 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;
+    /** 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;
+}
+/**
+ * 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",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",breadcrumb:"Breadcrumb",breadcrumbExpand:"Show the hidden steps",carousel:"Carousel",carouselPrevious:"Previous slide",carouselNext:"Next slide",commandPalette:"Command palette",commandPalettePlaceholder:"Search commands",gallery:"Gallery",chart:"Chart",minimize:"Minimize",maximize:"Maximize",restore:"Restore",resizeWindow:"Resize window",overlay:"Overlay",pagination:"Pagination",paginationPrevious:"Previous page",paginationNext:"Next page",paginationFirst:"First page",paginationLast:"Last page",rating:"Rating",sidebar:"Sidebar",sidebarClose:"Close sidebar",sidebarResize:"Resize sidebar",skipToContent:"Skip to content",backToTop:"Back to top",onThisPage:"On this page",typing:"Typing…",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"};export function useLabels(){const{labels:o}=a();return e.useMemo(()=>o?{...defaultLabels,...o}:defaultLabels,[o])}

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;

package/dist/internal/mockup.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";const i={desktop:["macos","windows","linux"],tablet:["ipados","android"],mobile:["ios","android"]};export function resolveOs(e,t){const a=i[e];return t&&a.includes(t)?t:"ios"===t&&"tablet"===e?"ipados":"ipados"===t&&"mobile"===e?"ios":a[0]}export function defaultNotch(e,t){return"mobile"!==e?"none":"android"===t?"punch-hole":"dynamic-island"}export const resolutions={mobile:{xs:{width:320,height:568},sm:{width:360,height:780},md:{width:390,height:844},lg:{width:414,height:896},xl:{width:430,height:932}},tablet:{xs:{width:744,height:1133},sm:{width:768,height:1024},md:{width:820,height:1180},lg:{width:834,height:1194},xl:{width:1024,height:1366}},desktop:{xs:{width:1024,height:640},sm:{width:1280,height:800},md:{width:1440,height:900},lg:{width:1680,height:1050},xl:{width:1920,height:1200}}};const a={mobile:{thin:{bezel:{x:8,top:8,bottom:8},frameRadius:50,screenRadius:42},standard:{bezel:{x:13,top:13,bottom:13},frameRadius:56,screenRadius:43},thick:{bezel:{x:16,top:62,bottom:62},frameRadius:40,screenRadius:4}},tablet:{thin:{bezel:{x:12,top:12,bottom:12},frameRadius:34,screenRadius:22},standard:{bezel:{x:20,top:20,bottom:20},frameRadius:42,screenRadius:22},thick:{bezel:{x:28,top:74,bottom:74},frameRadius:36,screenRadius:4}},desktop:{thin:{bezel:{x:8,top:8,bottom:8},frameRadius:12,screenRadius:4},standard:{bezel:{x:13,top:13,bottom:30},frameRadius:16,screenRadius:4},thick:{bezel:{x:22,top:22,bottom:62},frameRadius:18,screenRadius:3}}},s={mobile:42,tablet:24,desktop:8};export function mockupMetrics(e){const{device:t,size:i,resolution:r,orientation:d,bezel:h,hardware:n}=e,o=r??resolutions[t][i],l="desktop"!==t&&"landscape"===d,c=l?{width:o.height,height:o.width}:o;if("none"===h)return{screen:c,bezel:{x:0,top:0,bottom:0},body:{...c},frame:{...c},frameRadius:s[t],screenRadius:s[t],stand:null,base:null};const u=a[t][h],p=l?{x:u.bezel.top,top:u.bezel.x,bottom:u.bezel.x}:u.bezel,g="desktop"===t&&"laptop"===n,m=g?{...p,bottom:p.top}:p,x={width:c.width+2*m.x,height:c.height+m.top+m.bottom};if("desktop"!==t)return{screen:c,bezel:m,body:x,frame:{...x},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:null,base:null};if(g){const e={width:Math.round(1.075*x.width),height:Math.round(.035*x.height),lipWidth:Math.round(.12*x.width)};return{screen:c,bezel:m,body:x,frame:{width:e.width,height:x.height+e.height},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:null,base:e}}const f={neckWidth:Math.round(.11*x.width),neckHeight:Math.round(.09*x.height),footWidth:Math.round(.28*x.width),footHeight:Math.round(.018*x.height)};return{screen:c,bezel:m,body:x,frame:{width:x.width,height:x.height+f.neckHeight+f.footHeight},frameRadius:u.frameRadius,screenRadius:u.screenRadius,stand:f,base:null}}export const finishSlots={graphite:{"--p-shell":"#2b2f38","--p-shell-edge":"rgb(255 255 255 / 0.16)","--p-shell-shade":"#181b22"},silver:{"--p-shell":"#cfd2d7","--p-shell-edge":"rgb(255 255 255 / 0.75)","--p-shell-shade":"#9ca1a9"},white:{"--p-shell":"#f3f4f6","--p-shell-edge":"rgb(255 255 255 / 0.9)","--p-shell-shade":"#c1c4ca"}};export const shellClasses="bg-(--p-shell) [box-shadow:inset_0_1px_0_var(--p-shell-edge),inset_0_0_0_1px_var(--p-shell-shade)]";export const elevationFilters=["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))"];export function PlMockupCutout({notch:t,screen:i,landscape:a}){if("none"===t)return null;const s=a?i.height:i.width,r={position:"absolute",background:"oklch(12% 0.006 262)",pointerEvents:"none",zIndex:20},d="plass-mockup-cutout";if("punch-hole"===t){const t=Math.max(16,Math.round(.07*s)),i=Math.round(.55*t);return e("div",{"aria-hidden":"true",className:d,style:{...r,width:t,height:t,borderRadius:"50%",...a?{left:i,top:"50%",marginTop:-t/2}:{top:i,left:"50%",marginLeft:-t/2}}})}if("dynamic-island"===t){const t=Math.max(96,Math.round(.32*s)),i=Math.round(.29*t),h=Math.round(.32*i);return e("div",{"aria-hidden":"true",className:d,style:{...r,borderRadius:i,...a?{left:h,top:"50%",width:i,height:t,marginTop:-t/2}:{top:h,left:"50%",width:t,height:i,marginLeft:-t/2}}})}const h=Math.max(120,Math.round(.42*s)),n=Math.round(.23*h),o=Math.round(.6*n);return e("div",{"aria-hidden":"true",className:d,style:{...r,...a?{left:0,top:"50%",width:n,height:h,marginTop:-h/2,borderRadius:`0 ${o}px ${o}px 0`}:{top:0,left:"50%",width:h,height:n,marginLeft:-h/2,borderRadius:`0 0 ${o}px ${o}px`}}})}const r="relative z-10 flex shrink-0 items-center [background:color-mix(in_oklab,var(--plass-surface)_88%,transparent)]",d="font-medium text-(--plass-fg) tabular-nums";function Tile({width:t,height:i,radius:a,tone:s="muted"}){return e("div",{style:{width:t,height:i??t,borderRadius:a,background:"accent"===s?"var(--p-accent)":"faint"===s?"color-mix(in oklab, var(--plass-fg) 12%, transparent)":"color-mix(in oklab, var(--plass-fg) 26%, transparent)"}})}function Tiles({count:t,size:i,radius:a,gap:s,accent:r=!1}){return e("div",{className:"flex items-center",style:{gap:s},children:Array.from({length:t},(t,s)=>e(Tile,{width:i,radius:a,tone:r&&0===s?"accent":"muted"},s))})}function SignalGlyph({height:i}){return t("svg",{viewBox:"0 0 17 11",height:i,width:17*i/11,fill:"currentColor","aria-hidden":"true",children:[e("rect",{y:"7.5",width:"3",height:"3.5",rx:"1"}),e("rect",{x:"4.7",y:"5",width:"3",height:"6",rx:"1"}),e("rect",{x:"9.4",y:"2.5",width:"3",height:"8.5",rx:"1"}),e("rect",{x:"14",width:"3",height:"11",rx:"1",opacity:"0.35"})]})}function WifiGlyph({height:i}){return t("svg",{viewBox:"0 0 16 12",height:i,width:16*i/12,fill:"none","aria-hidden":"true",children:[e("path",{d:"M1 4.2a10.5 10.5 0 0 1 14 0",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),e("path",{d:"M3.6 7a6.8 6.8 0 0 1 8.8 0",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"}),e("circle",{cx:"8",cy:"10.2",r:"1.6",fill:"currentColor"})]})}function BatteryGlyph({height:i}){return t("svg",{viewBox:"0 0 25 12",height:i,width:25*i/12,fill:"none","aria-hidden":"true",children:[e("rect",{x:"0.7",y:"0.7",width:"20.6",height:"10.6",rx:"3.2",stroke:"currentColor",strokeWidth:"1.3",opacity:"0.45"}),e("rect",{x:"2.6",y:"2.6",width:"12.8",height:"6.8",rx:"1.8",fill:"currentColor"}),e("rect",{x:"22.8",y:"4",width:"1.8",height:"4",rx:"0.9",fill:"currentColor",opacity:"0.45"})]})}function StatusGlyphs({height:i,gap:a}){return t("div",{className:"flex items-center text-(--plass-fg)",style:{gap:a},children:[e(SignalGlyph,{height:i}),e(WifiGlyph,{height:i}),e(BatteryGlyph,{height:i})]})}function NavGlyphs({size:i,gap:a}){return t("div",{className:"flex items-center justify-center text-(--plass-fg)",style:{gap:a,opacity:.72},children:[e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("path",{d:"M10 3 5 8l5 5",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round"})}),e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor",strokeWidth:"1.6"})}),e("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"none","aria-hidden":"true",children:e("rect",{x:"3.5",y:"3.5",width:"9",height:"9",rx:"1.6",stroke:"currentColor",strokeWidth:"1.6"})})]})}function StartGlyph({size:i}){return t("svg",{viewBox:"0 0 16 16",width:i,height:i,fill:"currentColor","aria-hidden":"true",children:[e("rect",{x:"1",y:"1",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"9",y:"1",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"1",y:"9",width:"6",height:"6",rx:"1.4"}),e("rect",{x:"9",y:"9",width:"6",height:"6",rx:"1.4"})]})}export function mockupChrome(i){const{os:a,notch:s,landscape:h,time:n}=i;if("ios"===a||"ipados"===a){const i="ipados"===a,o=i?30:i||h||"none"===s||"punch-hole"===s?44:54;return{top:{size:o,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:o,paddingInline:i?22:26},children:[e("span",{className:`${d} text-[15px]`,children:n}),e(StatusGlyphs,{height:i?11:12,gap:6})]})},bottom:{size:i?22:34,node:e("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:i?22:34,background:"transparent"},children:e("div",{style:{width:i?220:140,height:5,borderRadius:3,background:"color-mix(in oklab, var(--plass-fg) 55%, transparent)"}})})}}}return"android"===a?{top:{size:34,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:34,paddingInline:18},children:[e("span",{className:`${d} text-[13px]`,children:n}),e(StatusGlyphs,{height:11,gap:5})]})},bottom:{size:48,node:e("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:48},children:e(NavGlyphs,{size:20,gap:72})})}}:"macos"===a?{top:{size:28,node:t("div",{"aria-hidden":"true",className:`${r} justify-between`,style:{height:28,paddingInline:16},children:[t("div",{className:"flex items-center",style:{gap:16},children:[e(Tile,{width:13,radius:4}),e(Tile,{width:34,height:7,radius:4}),e(Tile,{width:26,height:7,radius:4,tone:"faint"}),e(Tile,{width:30,height:7,radius:4,tone:"faint"}),e(Tile,{width:22,height:7,radius:4,tone:"faint"})]}),t("div",{className:"flex items-center",style:{gap:14},children:[e(Tile,{width:11,radius:3,tone:"faint"}),e(Tile,{width:11,radius:3,tone:"faint"}),e("span",{className:`${d} text-[13px]`,children:n})]})]})},bottom:{size:78,node:e("div",{"aria-hidden":"true",className:"flex shrink-0 items-end justify-center",style:{height:78},children:t("div",{className:`${r} [box-shadow:var(--plass-shadow-2),var(--plass-gloss-glass)]`,style:{gap:10,padding:8,marginBottom:10,borderRadius:22},children:[e(Tiles,{count:5,size:52,radius:14,gap:10,accent:!0}),e("div",{style:{width:1,height:44,background:"color-mix(in oklab, var(--plass-fg) 16%, transparent)"}}),e(Tiles,{count:2,size:52,radius:14,gap:10})]})})}}:"windows"===a?{bottom:{size:52,node:t("div",{"aria-hidden":"true",className:`${r} justify-center [border-block-start:1px_solid_var(--plass-border)]`,style:{height:52,paddingInline:16},children:[t("div",{className:"flex items-center",style:{gap:10},children:[e("div",{className:"text-(--plass-fg)",style:{opacity:.7},children:e(StartGlyph,{size:22})}),e(Tiles,{count:6,size:30,radius:8,gap:10,accent:!0})]}),t("div",{className:"absolute flex items-center",style:{insetInlineEnd:16,gap:12},children:[e(Tile,{width:11,radius:3,tone:"faint"}),e(Tile,{width:11,radius:3,tone:"faint"}),e("span",{className:`${d} text-[12px]`,children:n})]})]})}}:{top:{size:34,node:t("div",{"aria-hidden":"true",className:`${r} justify-center`,style:{height:34,paddingInline:14},children:[e("div",{className:"absolute",style:{insetInlineStart:14},children:e(Tile,{width:52,height:9,radius:5})}),e("span",{className:`${d} text-[13px]`,children:n}),t("div",{className:"absolute flex items-center",style:{insetInlineEnd:14,gap:10},children:[e(Tile,{width:10,radius:3,tone:"faint"}),e(Tile,{width:10,radius:3,tone:"faint"}),e(Tile,{width:10,radius:3,tone:"faint"})]})]})},start:{size:66,node:t("div",{"aria-hidden":"true",className:`${r} flex-col justify-start [border-inline-end:1px_solid_var(--plass-border)]`,style:{width:66,height:"100%",gap:10,paddingBlock:12},children:[e(Tile,{width:44,radius:12,tone:"accent"}),e(Tile,{width:44,radius:12}),e(Tile,{width:44,radius:12}),e(Tile,{width:44,radius:12})]})}}}