plass-ui 1.3.0 → 1.4.0

package/dist/components/window-pane/PlWindowPane.d.ts

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlWindowControl, PlWindowOffset, PlWindowOs } from '../../internal/window.js';
+import type { PlassColor, PlassElevation, PlassSize } from '../../types.js';
+export type { PlWindowControl, PlWindowOffset, PlWindowOs } from '../../internal/window.js';
+/** The three CSS positions a window can be laid out with. */
+export type PlWindowPanePosition = 'static' | 'absolute' | 'fixed';
+/** What a resize reports: the window's size in pixels. */
+export interface PlWindowPaneSize {
+    width: number;
+    height: number;
+}
+export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'onResize'> {
+    /**
+     * Whose window this is a picture of. Decides where the controls sit, how they
+     * are drawn, how tall the title bar is and how its corners are cut.
+     * @default 'macos'
+     */
+    os?: PlWindowOs;
+    /** The window's name, in the title bar. Also what names the window itself. */
+    title?: React.ReactNode;
+    /** A glyph beside the title — the app's mark. */
+    icon?: React.ReactNode;
+    /** Anything else the title bar carries, set beside the controls. */
+    actions?: React.ReactNode;
+    /**
+     * Which of the three buttons the title bar has. `true` is all of them,
+     * `false` is none, and an array is exactly the ones named — a window that can
+     * be closed but not minimized is `['close']`.
+     *
+     * The order is the system's rather than the array's: macOS puts close first
+     * and Windows puts it last, and that is not something a caller should have to
+     * remember.
+     * @default true
+     */
+    controls?: boolean | readonly PlWindowControl[];
+    /**
+     * The scale of the chrome — the title bar's height, its buttons and its type.
+     * It does not touch the content, which is the caller's and is laid out at its
+     * own scale, exactly as it would be on a desktop where the title bar does not
+     * grow with the document.
+     * @default 'md'
+     */
+    size?: PlassSize;
+    /** The colour family the focus rings and an `accent` title bar take. @default 'primary' */
+    color?: PlassColor;
+    /**
+     * Dyes the title bar with the colour family, the way Windows offers to. Off,
+     * the bar is the neutral shade the system draws by default.
+     * @default false
+     */
+    accent?: boolean;
+    /**
+     * How much of what is behind the window shows through its chrome, from `0` to
+     * `1`. It applies to the title bar, the body's own fill and the border —
+     * never to the content on it, which stays exactly as legible as it was.
+     *
+     * Anything above `0` also turns the acrylic on, so the page underneath is
+     * blurred rather than merely visible. `1` is a window that is nothing but its
+     * edge and its chrome.
+     * @default 0
+     */
+    transparency?: number;
+    /**
+     * Whether this is the window in front.
+     *
+     * Left out, the window works it out for itself: it is in front until another
+     * `PlWindowPane` on the page is pressed or takes the focus, exactly as windows on
+     * a desktop behave. A click on the page *around* the windows changes nothing
+     * — a paragraph is not a desktop.
+     *
+     * Pass it to drive that yourself, which is what a caller keeping its own
+     * z-order wants.
+     *
+     * What being in front looks like is the system's: coloured traffic lights on
+     * macOS against grey ones, an accent title bar and an accent border on
+     * Windows 10, a tinted header bar on GNOME — and, on all four, a window one
+     * step further off the page than the ones behind it.
+     */
+    active?: boolean;
+    /**
+     * The shadow around the window. `2` here, against the `0` everything else
+     * defaults to, for the reason `PlPill`'s is `2`: a window is by definition not
+     * part of the page it is on.
+     * @default 2
+     */
+    elevation?: PlassElevation;
+    /**
+     * How the window is laid out. `static` leaves it in the flow (as a
+     * relatively positioned box, so `offset` can move it without disturbing
+     * anything around it); `absolute` pins it inside the nearest positioned
+     * ancestor, which is what a desktop full of windows wants; `fixed` pins it to
+     * the viewport.
+     * @default 'static'
+     */
+    position?: PlWindowPanePosition;
+    /** Lets the title bar be dragged. @default false */
+    draggable?: boolean;
+    /** Lets the edges and corners be dragged. @default false */
+    resizable?: boolean;
+    /** The window's width — a number in pixels or any CSS length. */
+    width?: number | string;
+    /** And its height. Left out, the window is as tall as what is in it. */
+    height?: number | string;
+    /** How small it may be dragged, in pixels. @default 180 */
+    minWidth?: number;
+    /** The same downward. Defaults to the title bar's own height. */
+    minHeight?: number;
+    /** How far it has been dragged from where the layout put it. */
+    offset?: PlWindowOffset;
+    /** Where an uncontrolled window starts. @default { x: 0, y: 0 } */
+    defaultOffset?: PlWindowOffset;
+    onOffsetChange?: (offset: PlWindowOffset) => void;
+    /** Fires with the window's size, in pixels, while an edge is dragged. */
+    onResize?: (size: PlWindowPaneSize) => void;
+    /** Whether the window is on screen at all. Closing it renders nothing. */
+    open?: boolean;
+    /** @default true */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the window is rolled up to its title bar. This is what minimizing
+     * means for a window that is part of a page rather than of a desktop: there
+     * is no dock for it to go to, so it stays where it is with nothing under the
+     * bar.
+     */
+    minimized?: boolean;
+    /** @default false */
+    defaultMinimized?: boolean;
+    onMinimizedChange?: (minimized: boolean) => void;
+    /**
+     * Whether the window fills whatever is holding it. Its corners go square
+     * while it does, as they do on every system.
+     */
+    maximized?: boolean;
+    /** @default false */
+    defaultMaximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** Whether content taller than the window scrolls. @default true */
+    scroll?: boolean;
+    /**
+     * Overrides the buttons' own names.
+     *
+     * There is no `locale` here: the words come from `PlassProvider`'s `labels`,
+     * which is where every other component in the library gets its own, and these
+     * four are the narrower override for one window.
+     */
+    minimizeLabel?: string;
+    maximizeLabel?: string;
+    restoreLabel?: string;
+    closeLabel?: string;
+    resizeLabel?: string;
+    /** Renders something other than a `<div>`: `render={<section />}`. */
+    render?: useRender.RenderProp;
+    /** What is in the window. */
+    children?: React.ReactNode;
+}
+/**
+ * A window, drawn the way one of four systems draws it, with anything at all
+ * inside it.
+ *
+ * It is not a real window and does not pretend to be one: there is no desktop,
+ * no z-order and no dock. What it is is a *frame that behaves* — the title bar
+ * drags, the corners resize, the three buttons are real buttons with real names
+ * — so a screenshot of an app, a demo of a feature or a piece of a landing page
+ * can be shown as the thing it will be rather than as a picture of it.
+ *
+ * Nothing here is transformed. A dragged window moves on `left` and `top` and a
+ * resized one changes `width` and `height`, which is what keeps the text inside
+ * it at whole pixels through both gestures — a `translate()` would resample
+ * every glyph in the window for the length of the drag, which is exactly what
+ * the house rule against transforming a surface exists to prevent.
+ *
+ * `minimize` rolls the window up to its title bar rather than sending it
+ * anywhere, because a page has nowhere to send it to. `maximize` fills whatever
+ * is holding the window, which is the container for `position="absolute"` and
+ * the viewport for `fixed`.
+ */
+export declare const PlWindowPane: React.ForwardRefExoticComponent<PlWindowPaneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/window-pane/PlWindowPane.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as d,iconClasses as c}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as g,windowSlots as f}from"../../internal/window.js";import{useDefaults as w}from"../../internal/defaults.js";function useLatched(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const p=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(b,v){const{os:x="macos",title:z,icon:y,actions:N,controls:M=!0,size:C,color:E,accent:L=!1,transparency:S=0,active:k,elevation:R=2,position:j="static",draggable:I=!1,resizable:T=!1,width:D,height:P,minWidth:B=180,minHeight:W,offset:A,defaultOffset:H,onOffsetChange:O,onResize:X,open:$,defaultOpen:G=!0,onOpenChange:F,minimized:U,defaultMinimized:Y=!1,onMinimizedChange:_,maximized:q,defaultMaximized:K=!1,onMaximizedChange:J,scroll:Q=!0,minimizeLabel:V,maximizeLabel:Z,restoreLabel:ee,closeLabel:te,resizeLabel:ne,render:ie,className:oe,style:re,children:se,...ae}=b,le=w(),de=C??le.size??"md",ce=E??le.color??"primary",ue=s(),me=h(x),he=g(x,de),ge=i.useId(),[fe,we]=useLatched($,G,F),[pe,be]=useLatched(U,Y,_),[ve,xe]=useLatched(q,K,J),[ze,ye]=useLatched(A,H??{x:0,y:0},O),[Ne,Me]=i.useState(null),[Ce,Ee]=i.useState(!0),Le=k??Ce,[Se,ke]=i.useState(null),[Re,je]=i.useState(null),[Ie,Te]=i.useState(!1),[De,Pe]=i.useState(!1),[Be,We]=i.useState(fe);Be!==fe&&(We(fe),Pe(!fe)),i.useEffect(()=>{if(!De)return;const e=window.setTimeout(()=>Pe(!1),260);return()=>window.clearTimeout(e)},[De]);const Ae=i.useRef(null),He=i.useCallback(e=>{Ae.current=e,"function"==typeof v?v(e):v&&(v.current=e)},[v]);i.useEffect(()=>{if(void 0!==k)return;const e=Ae.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void Ee(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Ee(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[k]);const Oe=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;Oe.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;Te(!0);const finish=()=>{Oe.current=null,Te(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});Oe.current=()=>{s(),finish()}}i.useEffect(()=>()=>Oe.current?.(),[]);const Xe={width:Math.max(0,B),height:Math.max(he.bar,W??he.bar)};function resizeTo(e){Me(e),X?.(e)}const $e=m(x,!0===M?["minimize","maximize","close"]:!1===M?[]:M),Ge=$e.includes("maximize");i.useEffect(()=>{if(pe||null===Re)return;const e=window.setTimeout(()=>je(null),400);return()=>window.clearTimeout(e)},[pe,Re]);const Fe={minimize:V??ue.minimize,maximize:Z??ue.maximize,restore:ee??ue.restore,close:te??ue.close},Ue=e(u,{os:x,metrics:he,controls:$e,maximized:ve,active:Le,labels:Fe,onCommand:function command(e){"close"===e?we(!1):"minimize"===e?function rollUp(e){const t=Ae.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&ke(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(Ne?.height??P)&&t)return je(t.getBoundingClientRect().height),void requestAnimationFrame(()=>be(!0));be(e)}(!pe):xe(!ve)}}),Ye=d(z)?e("span",{id:ge,className:"min-w-0 truncate",children:z}):null,_e=d(y)?e("span",{className:"flex shrink-0 items-center",children:y}):null,qe=t("div",{className:a("relative flex shrink-0 items-center select-none",c,I&&!ve?"cursor-grab active:cursor-grabbing":""),style:{height:he.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:he.weight,paddingInlineStart:he.padX,paddingInlineEnd:he.padEnd,gap:Math.round(.7*he.title),fontSize:he.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:me.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!I||ve)return;const t={...ze};beginGesture(e,(e,n)=>ye({x:t.x+e,y:t.y+n}))},onDoubleClick:Ge?()=>xe(!ve):void 0,children:["start"===me.controlsSide?Ue:null,"center"===me.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:he.controlsWidth($e.length)+2*he.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*he.title)},children:[_e,Ye]})}):t(n,{children:[_e,Ye]}),e("span",{className:"flex-1"}),d(N)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*he.title)},onPointerDown:e=>e.stopPropagation(),children:N}):null,"end"===me.controlsSide?Ue:null]}),Ke=ve?{left:0,top:0,width:"100%",height:"100%"}:{left:ze.x,top:ze.y,width:Ne?.width??D,height:pe?Se??he.bar:Ne?.height??P??Re??void 0},Je=o({render:ie,ref:He,props:{role:"group","aria-labelledby":Ye?ge:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",S>0?l:"",me.glass&&0===S?"[backdrop-filter:var(--plass-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",oe),"data-gesture":Ie?"":void 0,inert:!fe||void 0,style:{opacity:fe?void 0:0,...f({os:x,color:ce,accent:L,transparency:S,active:Le,elevation:R}),position:"static"===j?"relative":j,...Ke,borderRadius:ve?0:`${he.radius}px ${he.radius}px ${he.radiusBottom}px ${he.radiusBottom}px`,borderStyle:"solid",borderWidth:he.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...re},children:t(n,{children:[qe,e("div",{className:a("min-h-0 flex-1",Q?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:he.band.side,marginBottom:he.band.bottom,boxShadow:he.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},inert:pe,children:se}),!T||ve||pe?null:p.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?ne??ue.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:a("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=Ae.current;if(!n||ve)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:ze.x,y:ze.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:i}=o,{x:d,y:c}=o;r&&(n=Math.max(Xe.width,o.width+e)),l&&(i=Math.max(Xe.height,o.height+t)),s&&(n=Math.max(Xe.width,o.width-e),d=o.x+(o.width-n)),a&&(i=Math.max(Xe.height,o.height-t),c=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&ye({x:d,y:c})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=Ae.current;if(!n)return;const i=n.getBoundingClientRect();resizeTo({width:Math.max(Xe.width,i.width+e),height:Math.max(Xe.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...ae}});return fe||De?Je:null});

package/dist/components/window-pane/index.d.ts

@@ -0,0 +1,2 @@
+export { PlWindowPane } from './PlWindowPane.js';
+export type { PlWindowControl, PlWindowOffset, PlWindowOs, PlWindowPanePosition, PlWindowPaneProps, PlWindowPaneSize } from './PlWindowPane.js';

package/dist/components/window-pane/index.js

@@ -0,0 +1 @@
+export{PlWindowPane}from"./PlWindowPane.js";

package/dist/css/anchor.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <anchor>. Needs `plass-ui/css/base.css` first. */
+@source '../components/anchor';

package/dist/css/animate-counter.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-counter>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-counter';

package/dist/css/animate-float.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-float>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-float';

package/dist/css/animate-reveal.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-reveal>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-reveal';

package/dist/css/animate-scramble.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-scramble>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-scramble';

package/dist/css/animate-shake.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-shake>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-shake';

package/dist/css/animate-split.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <animate-split>. Needs `plass-ui/css/base.css` first. */
+@source '../components/animate-split';

package/dist/css/app-logo.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <app-logo>. Needs `plass-ui/css/base.css` first. */
+@source '../components/app-logo';

package/dist/css/area-chart.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <area-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/area-chart';

package/dist/css/bar-chart.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <bar-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/bar-chart';

package/dist/css/code-block.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <code-block>. Needs `plass-ui/css/base.css` first. */
+@source '../components/code-block';

package/dist/css/data-list.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <data-list>. Needs `plass-ui/css/base.css` first. */
+@source '../components/data-list';

package/dist/css/data-table.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <data-table>. Needs `plass-ui/css/base.css` first. */
+@source '../components/data-table';

package/dist/css/flex.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <flex>. Needs `plass-ui/css/base.css` first. */
+@source '../components/flex';

package/dist/css/floating-action-button.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <floating-action-button>. Needs `plass-ui/css/base.css` first. */
+@source '../components/floating-action-button';

package/dist/css/gallery.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <gallery>. Needs `plass-ui/css/base.css` first. */
+@source '../components/gallery';

package/dist/css/gauge-chart.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <gauge-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/gauge-chart';

package/dist/css/heatmap-chart.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <heatmap-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/heatmap-chart';

package/dist/css/hover-card.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <hover-card>. Needs `plass-ui/css/base.css` first. */
+@source '../components/hover-card';

package/dist/css/how-to-steps.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <how-to-steps>. Needs `plass-ui/css/base.css` first. */
+@source '../components/how-to-steps';

package/dist/css/line-chart.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <line-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/line-chart';

package/dist/css/meter.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <meter>. Needs `plass-ui/css/base.css` first. */
+@source '../components/meter';

package/dist/css/mockup.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <mockup>. Needs `plass-ui/css/base.css` first. */
+@source '../components/mockup';

package/dist/css/pie-chart.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <pie-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/pie-chart';

package/dist/css/portal.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <portal>. Needs `plass-ui/css/base.css` first. */
+@source '../components/portal';

package/dist/css/scatter-chart.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <scatter-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/scatter-chart';

package/dist/css/scroll-area.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <scroll-area>. Needs `plass-ui/css/base.css` first. */
+@source '../components/scroll-area';

package/dist/css/show.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <show>. Needs `plass-ui/css/base.css` first. */
+@source '../components/show';

package/dist/css/sparkline.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <sparkline>. Needs `plass-ui/css/base.css` first. */
+@source '../components/sparkline';

package/dist/css/stack.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <stack>. Needs `plass-ui/css/base.css` first. */
+@source '../components/stack';

package/dist/css/timeline-chart.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <timeline-chart>. Needs `plass-ui/css/base.css` first. */
+@source '../components/timeline-chart';

package/dist/css/tour.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <tour>. Needs `plass-ui/css/base.css` first. */
+@source '../components/tour';

package/dist/css/tree-select.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <tree-select>. Needs `plass-ui/css/base.css` first. */
+@source '../components/tree-select';

package/dist/css/window-pane.css

@@ -0,0 +1,2 @@
+/* Scan manifest for <window-pane>. Needs `plass-ui/css/base.css` first. */
+@source '../components/window-pane';

package/dist/hooks/index.d.ts

@@ -1,7 +1,13 @@
 export { usePlBreakpoint, usePlBreakpointValue } from './usePlBreakpoint.js';
 export { usePlColorScheme } from './usePlColorScheme.js';
 export type { PlColorScheme, PlColorSchemeOptions, PlColorSchemeResult, PlResolvedColorScheme } from './usePlColorScheme.js';
+export { usePlDisclosure } from './usePlDisclosure.js';
+export type { PlDisclosureResult } from './usePlDisclosure.js';
+export { usePlElementSize } from './usePlElementSize.js';
+export type { PlElementSize } from './usePlElementSize.js';
 export { usePlHotKeys } from './usePlHotKeys.js';
 export type { PlHotKeysOptions, PlHotKeysTarget } from './usePlHotKeys.js';
 export { usePlMediaQuery } from './usePlMediaQuery.js';
+export { usePlOnScreen } from './usePlOnScreen.js';
+export type { PlOnScreenOptions } from './usePlOnScreen.js';
 export { usePlReducedMotion } from './usePlReducedMotion.js';

package/dist/hooks/index.js

@@ -1 +1 @@
-export{usePlBreakpoint,usePlBreakpointValue}from"./usePlBreakpoint.js";export{usePlColorScheme}from"./usePlColorScheme.js";export{usePlHotKeys}from"./usePlHotKeys.js";export{usePlMediaQuery}from"./usePlMediaQuery.js";export{usePlReducedMotion}from"./usePlReducedMotion.js";
+export{usePlBreakpoint,usePlBreakpointValue}from"./usePlBreakpoint.js";export{usePlColorScheme}from"./usePlColorScheme.js";export{usePlDisclosure}from"./usePlDisclosure.js";export{usePlElementSize}from"./usePlElementSize.js";export{usePlHotKeys}from"./usePlHotKeys.js";export{usePlMediaQuery}from"./usePlMediaQuery.js";export{usePlOnScreen}from"./usePlOnScreen.js";export{usePlReducedMotion}from"./usePlReducedMotion.js";

package/dist/hooks/usePlBreakpoint.d.ts

@@ -9,6 +9,9 @@ import type { PlassBreakpoint, PlassResponsive } from '../types.js';
  * `md` here switches with the `md:` utilities beside it rather than a few
  * pixels away from them.
  *
+ * The widths come off the document — see `internal/breakpoints.ts` — so a
+ * project that moves a breakpoint in its Tailwind theme moves this too.
+ *
  * **`xs` is the server's answer**, and the first one a browser renders. See
  * `usePlMediaQuery` for what follows from that.
  */

package/dist/hooks/usePlBreakpoint.js

@@ -1 +1 @@
-"use client";import{breakpointMap as e,breakpoints as t}from"../internal/grid.js";import{useMediaQuery as r}from"../internal/media.js";export function usePlBreakpoint(){const e=r("(width >= 40rem)"),t=r("(width >= 48rem)"),i=r("(width >= 64rem)");return r("(width >= 80rem)")?"xl":i?"lg":t?"md":e?"sm":"xs"}export function usePlBreakpointValue(r){const i=usePlBreakpoint(),n=e(r);for(let e=t.indexOf(i);e>=0;e-=1){const r=n[t[e]];if(void 0!==r)return r}}
+"use client";import{fromQuery as e}from"../internal/breakpoints.js";import{resolveAt as r}from"../internal/responsive.js";import{useMediaQuery as n}from"../internal/media.js";export function usePlBreakpoint(){const r=n(e("sm")),t=n(e("md")),o=n(e("lg"));return n(e("xl"))?"xl":o?"lg":t?"md":r?"sm":"xs"}export function usePlBreakpointValue(e){return r(e,usePlBreakpoint())}

package/dist/hooks/usePlDisclosure.d.ts

@@ -0,0 +1,44 @@
+/** What a caller gets back: the answer, and the four ways to change it. */
+export interface PlDisclosureResult {
+    /** Whether the thing is open. */
+    open: boolean;
+    /** Opens it. */
+    onOpen: () => void;
+    /** Closes it. */
+    onClose: () => void;
+    /** Turns it round. */
+    onToggle: () => void;
+    /** Sets it to a value, for the caller who already has one. */
+    setOpen: (open: boolean) => void;
+}
+/**
+ * One boolean and the four callbacks that change it.
+ *
+ * The smallest hook in the library and the one that saves the most typing: a
+ * dialog, a drawer, a popover and a menu each need exactly this, and written by
+ * hand it is a `useState` plus three arrow functions **that are new on every
+ * render**. That last part is the reason it is worth a hook rather than a
+ * snippet — an inline `() => setOpen(false)` handed to a memoised trigger
+ * defeats the memo, and every one of the callbacks here is stable for the life
+ * of the component.
+ *
+ * The names are the props they are handed to. `onOpenChange` is the one shape
+ * every openable component in this library takes, and `setOpen` fits it
+ * exactly, so the ordinary use is a spread:
+ *
+ * ```tsx
+ * const dialog = usePlDisclosure();
+ *
+ * <PlButton onClick={dialog.onOpen}>Delete</PlButton>
+ * <PlModal open={dialog.open} onOpenChange={dialog.setOpen} title="Delete this?">
+ *   <PlButton onClick={dialog.onClose}>Cancel</PlButton>
+ * </PlModal>
+ * ```
+ *
+ * It holds no DOM, watches nothing and has no effect in it, so it costs the
+ * same on a server as it does in a browser.
+ *
+ * @example
+ * const drawer = usePlDisclosure(true);
+ */
+export declare function usePlDisclosure(initial?: boolean): PlDisclosureResult;

package/dist/hooks/usePlDisclosure.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export function usePlDisclosure(o=!1){const[s,l]=e.useState(o),n=e.useCallback(()=>l(!0),[]),t=e.useCallback(()=>l(!1),[]),u=e.useCallback(()=>l(e=>!e),[]);return e.useMemo(()=>({open:s,onOpen:n,onClose:t,onToggle:u,setOpen:l}),[s,n,t,u])}

package/dist/hooks/usePlElementSize.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+/** The box an element is laid out at, in pixels. */
+export interface PlElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * How big an element is, kept up to date as it changes.
+ *
+ * A `ResizeObserver` and the two things a hook has to add. The first is
+ * **when**: the size is read in a layout effect as well as from the observer,
+ * because an observer's first callback arrives after a frame has been painted
+ * and a component that laid itself out from `0 × 0` for one frame flashes.
+ *
+ * The second is what it reports: the **content box**, the room actually left
+ * inside the element once its own padding has been taken off. A hand-written
+ * version nearly always reports `getBoundingClientRect` or `borderBoxSize`
+ * instead, which is a different number — and the wrong one for the question
+ * that made somebody measure the element.
+ *
+ * `null` until there is an element to measure, which is the honest answer on a
+ * server and on the first render: guessing `0` there would let a caller divide
+ * by it.
+ *
+ * @example
+ * const box = React.useRef<HTMLDivElement>(null);
+ * const size = usePlElementSize(box);
+ *
+ * <div ref={box}>{size ? `${Math.round(size.width)}px` : null}</div>
+ */
+export declare function usePlElementSize(target: React.RefObject<HTMLElement | null>): PlElementSize | null;

package/dist/hooks/usePlElementSize.js

@@ -0,0 +1 @@
+"use client";import*as t from"react";export function usePlElementSize(e){const[n,i]=t.useState(null);return t.useLayoutEffect(()=>{const t=e.current;if(!t)return;const read=()=>{const e=function contentBoxOf(t){const e=getComputedStyle(t),n=parseFloat(e.paddingInlineStart)+parseFloat(e.paddingInlineEnd),i=parseFloat(e.paddingBlockStart)+parseFloat(e.paddingBlockEnd);return{width:Math.max(0,t.clientWidth-n),height:Math.max(0,t.clientHeight-i)}}(t);i(t=>t?.width===e.width&&t.height===e.height?t:e)};if(read(),"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(read);return n.observe(t),()=>n.disconnect()},[e]),n}

package/dist/hooks/usePlOnScreen.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+export interface PlOnScreenOptions {
+    /**
+     * How much of the element has to be showing before it counts, from `0` to
+     * `1`.
+     * @default 0
+     */
+    threshold?: number;
+    /**
+     * How far outside the viewport still counts, as a CSS margin — `'200px'`
+     * starts a fetch a screen early.
+     */
+    rootMargin?: string;
+    /**
+     * What it is measured against. The viewport when it is not given; a scrolling
+     * panel otherwise.
+     */
+    root?: React.RefObject<Element | null>;
+    /**
+     * Stops watching the first time it appears.
+     *
+     * On by default, because the question a caller almost always has is "has this
+     * been seen yet" rather than "is it on screen right now" — a lazily loaded
+     * picture, a section that animates once, a page that fetches the next batch.
+     * Turn it off for the answer that keeps changing.
+     * @default true
+     */
+    once?: boolean;
+}
+/**
+ * Whether an element is on screen.
+ *
+ * An `IntersectionObserver` with the three things a hook has to decide, and
+ * the interesting one is `once`. It is **on** by default: the question a caller
+ * almost always has is "has this been seen yet", not "is it on screen right
+ * now", and a hook that kept answering the second one would re-render a page of
+ * lazily loaded pictures every time the reader scrolled past any of them.
+ *
+ * `false` on a server and on the first render, which is the safe answer for
+ * both of the things this is used for: nothing is fetched that did not need to
+ * be, and nothing is played before a reader could see it.
+ *
+ * A browser with no observer is told **yes** rather than no. There is no way to
+ * find out, and a picture that never loads is worse than one that loads early.
+ *
+ * @example
+ * const section = React.useRef<HTMLDivElement>(null);
+ * const seen = usePlOnScreen(section, { rootMargin: '200px' });
+ */
+export declare function usePlOnScreen(target: React.RefObject<Element | null>, { threshold, rootMargin, root, once }?: PlOnScreenOptions): boolean;

package/dist/hooks/usePlOnScreen.js

@@ -0,0 +1 @@
+"use client";import*as e from"react";export function usePlOnScreen(r,{threshold:t=0,rootMargin:n,root:o,once:s=!0}={}){const[c,i]=e.useState(!1);return e.useEffect(()=>{const e=r.current;if(!e)return;if("undefined"==typeof IntersectionObserver)return void i(!0);const c=new IntersectionObserver(([e])=>{e.isIntersecting?(i(!0),s&&c.disconnect()):s||i(!1)},{threshold:t,rootMargin:n,root:o?.current??null});return c.observe(e),()=>c.disconnect()},[r,t,n,o,s]),c}