plass-ui 1.2.0 → 1.4.0

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

@@ -0,0 +1,26 @@
+/**
+ * The one query the library asks on its own behalf rather than the caller's.
+ *
+ * Named here rather than in `internal/animate.ts` because it is not only the
+ * animations' business: a loading indicator answers it the other way round —
+ * slowing rather than stopping, since a spinner that stopped would be lying
+ * about whether anything is happening.
+ */
+export declare const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+/**
+ * Whether the window matches `query` right now, re-rendering when it stops.
+ *
+ * `null` is a query that cannot be asked — the `xs` rung of a ladder whose
+ * floor is zero — and is always `false` rather than being a second code path at
+ * every call site.
+ */
+export declare function useMediaQuery(query: string | null): boolean;
+/**
+ * Whether the reader has asked their platform for less movement.
+ *
+ * A server has no reader and so no preference, which is the store's own answer
+ * and is the right one here: the markup that ships is the one with the motion
+ * in it, and a reader who asked for less gets it in the render after hydration
+ * — before any of these animations has had a frame to run in.
+ */
+export declare function usePrefersReducedMotion(): boolean;

package/dist/internal/media.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";const n=new Map;function listFor(e){if("undefined"==typeof window||!window.matchMedia)return null;let r=n.get(e);return r||(r=window.matchMedia(e),n.set(e,r)),r}function onServer(){return!1}export const reducedMotionQuery="(prefers-reduced-motion: reduce)";export function useMediaQuery(n){const r=e.useCallback(e=>{const r=null===n?null:listFor(n);return r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{}},[n]),t=e.useCallback(()=>null!==n&&(listFor(n)?.matches??!1),[n]);return e.useSyncExternalStore(r,t,onServer)}export function usePrefersReducedMotion(){return useMediaQuery(reducedMotionQuery)}

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})]})}}}

package/dist/internal/page-layout.d.ts

@@ -114,12 +114,12 @@ export declare const expandedOnlyClasses: Record<PlPageLayoutCollapse, string>;
  * Whether the window is currently narrower than the breakpoint a sidebar
  * collapses at.
  *
- * `useSyncExternalStore` rather than an effect and a `useState`, for the one
- * reason that matters here: it has a server snapshot, and the server's answer
- * has to be "not collapsed". A collapsed sidebar is a `PlDrawer`, a drawer is a
- * portal, and a portal rendered into `document.body` on the server is not a
- * thing — so the markup that ships is the column, and the classes above are
- * what keep that column off a narrow screen until this hook can say otherwise.
+ * The store behind it is `internal/media.ts`, and the one reason that matters
+ * here is its server snapshot: the server's answer has to be "not collapsed". A
+ * collapsed sidebar is a `PlDrawer`, a drawer is a portal, and a portal
+ * rendered into `document.body` on the server is not a thing — so the markup
+ * that ships is the column, and the classes above are what keep that column off
+ * a narrow screen until this hook can say otherwise.
  */
 export declare function useCollapsed(breakpoint: PlPageLayoutCollapse): boolean;
 /**

package/dist/internal/page-layout.js

@@ -1 +1 @@
-"use client";import*as e from"react";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);const n={xs:null,sm:"(width < 40rem)",md:"(width < 48rem)",lg:"(width < 64rem)",xl:"(width < 80rem)"};export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(t){const d="none"===t?null:n[t],o=e.useCallback(e=>{if(!d||"undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(d);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)},[d]),i=e.useCallback(()=>!(!d||"undefined"==typeof window||!window.matchMedia)&&window.matchMedia(d).matches,[d]);return e.useSyncExternalStore(o,i,()=>!1)}export function drawerSide(e){const n="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}
+"use client";import*as e from"react";import{belowQuery as n}from"./breakpoints.js";import{useMediaQuery as t}from"./media.js";export const PlPageLayoutContext=/* @__PURE__ */e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const PlassSidebarSideContext=/* @__PURE__ */e.createContext(null);export const collapsedOnlyClasses={none:"hidden",xs:"hidden",sm:"sm:hidden",md:"md:hidden",lg:"lg:hidden",xl:"xl:hidden"};export const expandedOnlyClasses={none:"",xs:"",sm:"max-sm:hidden",md:"max-md:hidden",lg:"max-lg:hidden",xl:"max-xl:hidden"};export function useCollapsed(e){return t("none"===e?null:function collapseQuery(e){return"xs"===e?null:n(e)}(e))}export function drawerSide(e){const n="undefined"!=typeof document&&"rtl"===getComputedStyle(document.documentElement).direction;return"start"===e?n?"right":"left":n?"left":"right"}

package/dist/internal/progress.d.ts

@@ -8,6 +8,12 @@
  *
  * What is left in each component is the shape, which is the point: it is the
  * only thing that genuinely differs.
+ *
+ * `PlMeter` borrows the groove, the thickness ladder, the fill slots and the
+ * clamp from here without being one of the three. It is the same channel cut
+ * into the same surface; what it reports is a quantity that is already known
+ * rather than something advancing, which is why it keeps its own props and its
+ * own role.
  */
 import type * as React from 'react';
 import type { PlassColor, PlassSize } from '../types.js';

package/dist/internal/responsive.d.ts

@@ -0,0 +1,108 @@
+/**
+ * The one shape a value takes when it changes with the width of the window, and
+ * the one way it reaches CSS.
+ *
+ * It started as `PlGrid`'s private arithmetic and is here because a second
+ * component wanted it — and because the *rule* is the interesting part, not the
+ * code: a bare value applies everywhere, a map applies each entry from its own
+ * breakpoint up, and a rung that was not named inherits the one below it.
+ * `usePlBreakpointValue` resolves the same shape in JavaScript, so a caller who
+ * has learned it once has learned all of it.
+ *
+ * ## Where the resolving happens, and why it is two places
+ *
+ * A responsive value that only decides **style** is resolved in **CSS**:
+ * `responsiveSlots` writes one `--p-{name}-{rung}` per rung the caller named,
+ * and the `@variant` blocks in `styles.css` cascade each slot down from the
+ * rung above. That is what `PlGrid` and `PlContainer` use, and what makes them
+ * free: no resize listener, no re-render, and a server render that is already
+ * correct at every width because the browser resolves it.
+ *
+ * A responsive value that decides **structure** cannot be: an orientation
+ * changes which DOM a component builds, which ARIA it claims, and which way its
+ * arrow keys go, and no stylesheet can do that. Those resolve in JavaScript
+ * through `usePlBreakpointValue`, and pay what that costs — the server renders
+ * the `xs` entry and the browser corrects it on hydration.
+ *
+ * The split is not a compromise between the two; it is the honest line. A
+ * component should reach for the CSS half whenever it can.
+ */
+import type * as React from 'react';
+import type { PlassBreakpoint, PlassResponsive, PlassSize } 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>>;
+/** Whether a value is a per-breakpoint map rather than one answer for all of them. */
+export declare function isResponsiveMap<T>(value: PlassResponsive<T> | undefined): boolean;
+/**
+ * A responsive value at one rung of the ladder.
+ *
+ * Walks **down** from that rung rather than up from `xs`: the nearest entry at
+ * or below the window is the one that applies, and walking down finds it
+ * without having to know which rungs were named.
+ *
+ * `undefined` when the map named no rung at or below — `{ lg: 3 }` on a phone
+ * is not `3`, and guessing a value the caller did not write would be worse than
+ * saying so.
+ */
+export declare function resolveAt<T>(value: PlassResponsive<T> | undefined, at: PlassBreakpoint): T | undefined;
+/**
+ * A responsive prop a component has to resolve **itself**, with its own default
+ * behind it.
+ *
+ * For the props CSS cannot decide: an orientation changes which DOM a component
+ * builds, which ARIA it claims and which way its arrow keys go, and no
+ * stylesheet can do any of that. The cost is the one every JavaScript answer
+ * about width pays — a server renders the `xs` entry and the browser corrects
+ * it on hydration — which is why a prop that only decides *style* should use
+ * `responsiveSlots` instead and never come here.
+ *
+ * **A bare value subscribes to nothing.** `useMediaQuery(null)` is a hook that
+ * adds no listener, so a component whose orientation is one word costs exactly
+ * what it cost before this existed: the four queries are only asked when there
+ * is a map to answer with. Twenty tab bars on a page that never change shape
+ * install no listeners between them.
+ */
+export declare function useResponsiveValue<T>(value: PlassResponsive<T> | undefined, fallback: T): 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>;
+/**
+ * How wide content is allowed to get, and the three components that ask.
+ *
+ * A rung of the ladder, `none`, a number of pixels, or any CSS length. The
+ * `string & {}` half is what keeps the five rungs autocompleting: a bare
+ * `string` in the union would swallow them and the ladder would be five names a
+ * caller has to remember rather than five an editor offers.
+ */
+export type PlassMeasure = PlassSize | 'none' | number | (string & {});
+/** A rung if it is one of the five, `none` as itself, anything else a length. */
+export declare function measureValue(value: PlassMeasure): string;
+/**
+ * The class and the slots a measure is carried by, or nothing at all.
+ *
+ * `PlContainer`, `PlHeader` and `PlFooter` each hold their content to a measure
+ * and each used to carry a copy of the ladder. One implementation, because they
+ * are one decision written three times — a header whose measure did not line up
+ * with the container under it is the defect this prevents.
+ */
+export declare function measureSlots(value: PlassResponsive<PlassMeasure> | undefined): {
+    className: string;
+    style: React.CSSProperties | undefined;
+};

package/dist/internal/responsive.js

@@ -0,0 +1 @@
+import{fromQuery as e}from"./breakpoints.js";import{useMediaQuery as o}from"./media.js";import{toLength as t}from"./styles.js";export const breakpoints=["xs","sm","md","lg","xl"];export function breakpointMap(e){return null==e?{}:"object"==typeof e?e:{xs:e}}export function isResponsiveMap(e){return null!=e&&"object"==typeof e}export function resolveAt(e,o){const t=breakpointMap(e);for(let e=breakpoints.indexOf(o);e>=0;e-=1){const o=t[breakpoints[e]];if(void 0!==o)return o}}export function useResponsiveValue(t,n){const s=isResponsiveMap(t),r=o(s?e("sm"):null),i=o(s?e("md"):null),l=o(s?e("lg"):null),p=o(s?e("xl"):null);return s?resolveAt(t,p?"xl":l?"lg":i?"md":r?"sm":"xs")??n:t??n}export function responsiveSlots(e,o,t){const n=breakpointMap(o),s={};for(const o of breakpoints){const r=n[o];void 0!==r&&(s[`--p-${e}-${o}`]=t(r))}return s}export function withBaseline(e,o){return null==e?o:"object"==typeof e?{xs:o,...e}:e}const n={xs:"30rem",sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"};export function measureValue(e){return"none"===e?"none":"string"==typeof e&&e in n?n[e]:t(e)}export function measureSlots(e){return void 0===e?{className:"",style:void 0}:{className:"plass-container",style:responsiveSlots("maxw",e,measureValue)}}

package/dist/internal/scramble.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The arithmetic behind `PlAnimateScramble`, and the one decision in it worth
+ * writing down.
+ *
+ * **The pool a character is drawn from is the text's own characters**, not a
+ * table of Latin letters. Every scrambler that ships with a default alphabet
+ * ships an English one, and English noise over a Korean, Greek or Arabic
+ * headline is not a word resolving — it is a different script flickering where
+ * a word is about to be. Shuffling the string's own glyphs is script-agnostic
+ * for nothing, and it also keeps the line's colour and width steady, because
+ * every frame is drawn out of exactly the characters the finished line is made
+ * of.
+ *
+ * `characters` overrides it for the caller who genuinely wants a terminal look.
+ */
+/** Everything in the text that is worth scrambling: no spaces, no repeats. */
+export declare function poolOf(text: string): string;
+/**
+ * The line as it looks part of the way through.
+ *
+ * `progress` is `0`…`1`, and what it decides is **how many characters have
+ * settled**, counted from the start. Resolving left to right rather than at
+ * random is what makes it read as a word arriving rather than as a slot
+ * machine: a reader can follow it, and a reader who looks away and back has not
+ * lost their place.
+ *
+ * Whitespace is never scrambled. The gaps between words are what makes a line
+ * of noise still look like a sentence, and a space that flickers into a letter
+ * changes the word count on every frame.
+ */
+export declare function scrambleAt(text: string, pool: string, progress: number, seed: number): string;

package/dist/internal/scramble.js

@@ -0,0 +1 @@
+export function poolOf(t){const o=new Set;for(const r of t)""!==r.trim()&&o.add(r);return Array.from(o).join("")}export function scrambleAt(t,o,r,n){const e=Array.from(t),a=Math.floor(e.length*Math.max(0,Math.min(1,r)));return 0===o.length?t:e.map((t,r)=>r<a||""===t.trim()?t:o[(31*r+17*n)%o.length]).join("")}