panelui-web 0.7.0 → 0.8.0

package/dist/components/prompt/index.js

@@ -32,6 +32,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * and closes with its `open` prop, folding under the card, so a band can come
  * and go without the page jumping by more than its own height.
  *
+ * ## Modes
+ *
+ * A prompt that changes with what the app is doing names its states with
+ * `mode`, and each band says which of them it belongs to with its own
+ * `mode`. The bands that match open and the others fold, in one movement,
+ * so the card moves once, by the difference between them. A band's own
+ * `open` still wins over its mode.
+ *
  * ## Sending
  *
  * Enter sends and Shift+Enter starts a new line; Enter while a character is
@@ -120,8 +128,10 @@ const promptVariants = tv({
         submitRing: 'pointer-events-none absolute -inset-[3px] size-[calc(100%+6px)] text-primary transition-opacity duration-200',
         statusText: 'min-w-0 truncate bg-[linear-gradient(90deg,var(--muted-foreground)_35%,var(--foreground)_50%,var(--muted-foreground)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent',
         statusSpinner: 'ms-auto size-4 animate-spin text-muted-foreground motion-reduce:animate-none',
+        // The strip folds like a band: its tuck under the card moves with it.
+        contextFold: 'mx-4 grid transition-[grid-template-rows,margin,opacity] duration-300 ease-[cubic-bezier(0.2,0,0,1)] motion-reduce:transition-none',
         context: [
-            'relative mx-4 -mt-5 flex items-center gap-x-4 gap-y-1 rounded-b-[1rem] border bg-muted px-3.5 pb-2 pt-6.5 text-xs text-muted-foreground',
+            'relative flex items-center gap-x-4 gap-y-1 rounded-b-[1rem] border bg-muted px-3.5 pb-2 pt-6.5 text-xs text-muted-foreground',
             'flex-wrap [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3.5',
         ],
         contextItem: 'inline-flex min-w-0 items-center gap-1.5 whitespace-nowrap',
@@ -209,7 +219,7 @@ function attach(file) {
         preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
     };
 }
-function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange, onSubmit, status = 'idle', onStop, disabled = false, defaultFiles, accept, maxFiles, onReject, className, children, ...props }) {
+function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange, onSubmit, status = 'idle', onStop, disabled = false, defaultFiles, accept, maxFiles, onReject, mode, className, children, ...props }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = controlledValue ?? internalValue;
     const [attachments, setAttachments] = useState(() => (defaultFiles ?? []).map(attach));
@@ -274,6 +284,7 @@ function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange,
         removeAttachment,
         openFileDialog,
         status,
+        mode,
         busy,
         disabled,
         empty,
@@ -287,12 +298,12 @@ function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange,
         keyHandler,
         listbox,
         setListbox,
-    }), [value, setValue, attachments, addFiles, removeAttachment, openFileDialog, status, busy, disabled, empty, submit, stop, onStop, dragging, fieldId, listbox]);
+    }), [value, setValue, attachments, addFiles, removeAttachment, openFileDialog, status, mode, busy, disabled, empty, submit, stop, onStop, dragging, fieldId, listbox]);
     const send = (event) => {
         event.preventDefault();
         submit();
     };
-    return (_jsx(PromptStore.Provider, { value: context, children: _jsxs("form", { "data-slot": "prompt", "data-status": status, "aria-busy": busy || undefined, className: promptVariants().root({ className }), onSubmit: send, ...props, children: [children, _jsx("input", { ref: fileInput, type: "file", multiple: maxFiles !== 1, accept: accept, tabIndex: -1, "aria-hidden": "true", className: "hidden", onChange: (event) => {
+    return (_jsx(PromptStore.Provider, { value: context, children: _jsxs("form", { "data-slot": "prompt", "data-status": status, "data-mode": mode, "aria-busy": busy || undefined, className: promptVariants().root({ className }), onSubmit: send, ...props, children: [children, _jsx("input", { ref: fileInput, type: "file", multiple: maxFiles !== 1, accept: accept, tabIndex: -1, "aria-hidden": "true", className: "hidden", onChange: (event) => {
                         if (event.target.files)
                             addFiles(event.target.files);
                         // Cleared, so choosing the same file again still counts as a change.
@@ -311,9 +322,22 @@ function Band({ edge, open, slot, className, children, ...props }) {
     }, [open]);
     return (_jsx("div", { "data-slot": slot, "data-open": open ? '' : undefined, className: slots.band(), children: _jsx("div", { ref: clip, className: slots.bandClip(), children: _jsx("div", { className: slots.bandInner({ className }), ...props, children: children }) }) }));
 }
+/**
+ * Whether a band is open: its own `open` if given, else whether the
+ * prompt's mode is one of the band's, else what the band does by default.
+ */
+function useBandOpen(part, open, mode, fallback) {
+    const prompt = usePrompt(part);
+    if (open !== undefined)
+        return open;
+    if (mode !== undefined)
+        return prompt.mode !== undefined && (Array.isArray(mode) ? mode : [mode]).includes(prompt.mode);
+    return fallback(prompt);
+}
 /** A band above the field, for something to do before or while writing: connect an account, pick a project. */
-function PromptBanner({ open = true, ...props }) {
-    return _jsx(Band, { edge: "top", open: open, slot: "prompt-banner", ...props });
+function PromptBanner({ open, mode, ...props }) {
+    const shown = useBandOpen('Prompt.Banner', open, mode, () => true);
+    return _jsx(Band, { edge: "top", open: shown, slot: "prompt-banner", ...props });
 }
 PromptBanner.displayName = 'Prompt.Banner';
 /** The banner's button, at its end. */
@@ -340,17 +364,22 @@ function useShimmer(active) {
     return ref;
 }
 /** A band under the field saying what the answer is doing, with the words lit by a moving sweep. */
-function PromptStatus({ open, icon, spinner = true, children, ...props }) {
-    const prompt = usePrompt('Prompt.Status');
-    const shown = open ?? prompt.busy;
+function PromptStatus({ open, mode, icon, spinner = true, children, ...props }) {
+    const shown = useBandOpen('Prompt.Status', open, mode, (prompt) => prompt.busy);
     const slots = promptVariants();
     const text = useShimmer(shown);
     return (_jsxs(Band, { edge: "bottom", open: shown, slot: "prompt-status", role: "status", ...props, children: [icon, _jsx("span", { ref: text, className: slots.statusText(), children: children }), spinner ? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", className: slots.statusSpinner(), children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) })) : null] }));
 }
 PromptStatus.displayName = 'Prompt.Status';
 /** A strip under the field, inset from its edges, for where the message is going: a branch, a folder, a ticket. */
-function PromptContext({ className, ...props }) {
-    return _jsx("div", { "data-slot": "prompt-context", className: promptVariants().context({ className }), ...props });
+function PromptContext({ open, mode, className, ...props }) {
+    const shown = useBandOpen('Prompt.Context', open, mode, () => true);
+    const slots = promptVariants();
+    const clip = useRef(null);
+    useEffect(() => {
+        clip.current?.toggleAttribute('inert', !shown);
+    }, [shown]);
+    return (_jsx("div", { "data-slot": "prompt-context", "data-open": shown ? '' : undefined, className: slots.contextFold({ className: shown ? '-mt-5 grid-rows-[1fr] opacity-100' : 'mt-0 grid-rows-[0fr] opacity-0' }), children: _jsx("div", { ref: clip, className: "min-h-0 overflow-hidden", children: _jsx("div", { className: slots.context({ className }), ...props }) }) }));
 }
 PromptContext.displayName = 'Prompt.Context';
 /** One fact in the context strip, with an icon before it. */
@@ -567,7 +596,8 @@ function ProgressRing({ done, total }) {
  * fills as they are done, opening into the list. The list scrolls past
  * `maxHeight`, and keeps the task in progress in view.
  */
-function PromptTasks({ open = true, title, expanded, defaultExpanded = false, onExpandedChange, maxHeight = '10rem', className, children, ...props }) {
+function PromptTasks({ open, mode, title, expanded, defaultExpanded = false, onExpandedChange, maxHeight = '10rem', className, children, ...props }) {
+    const shown = useBandOpen('Prompt.Tasks', open, mode, () => true);
     const slots = promptVariants();
     const [inner, setInner] = useState(defaultExpanded);
     const isExpanded = expanded ?? inner;
@@ -593,7 +623,7 @@ function PromptTasks({ open = true, title, expanded, defaultExpanded = false, on
             setInner(!isExpanded);
         onExpandedChange?.(!isExpanded);
     };
-    return (_jsxs(Band, { edge: "top", open: open, slot: "prompt-tasks", className: ['flex-col items-stretch gap-0 px-0 pt-0.5', className].filter(Boolean).join(' '), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, className: slots.tasksHeader(), children: [_jsx(ProgressRing, { done: done, total: tasks.length }), _jsx("span", { className: slots.tasksTitle(), children: title }), _jsxs("span", { className: slots.tasksCount(), children: [done, "/", tasks.length] }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.tasksChevron({ className: isExpanded ? 'rotate-180' : undefined }), children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: slots.tasksBody({ className: isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]' }), children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("ol", { ref: list, id: listId, "aria-label": "Tasks", className: slots.tasksList(), style: { maxHeight }, children: children }) }) })] }));
+    return (_jsxs(Band, { edge: "top", open: shown, slot: "prompt-tasks", className: ['flex-col items-stretch gap-0 px-0 pt-0.5', className].filter(Boolean).join(' '), ...props, children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, className: slots.tasksHeader(), children: [_jsx(ProgressRing, { done: done, total: tasks.length }), _jsx("span", { className: slots.tasksTitle(), children: title }), _jsxs("span", { className: slots.tasksCount(), children: [done, "/", tasks.length] }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: slots.tasksChevron({ className: isExpanded ? 'rotate-180' : undefined }), children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), _jsx("div", { className: slots.tasksBody({ className: isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]' }), children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("ol", { ref: list, id: listId, "aria-label": "Tasks", className: slots.tasksList(), style: { maxHeight }, children: children }) }) })] }));
 }
 PromptTasks.displayName = 'Prompt.Tasks';
 /** One task in `Prompt.Tasks`. */

package/dist/components/sheet/index.d.ts

@@ -161,6 +161,50 @@ declare function SheetClose({ render, icon, children, ...props }: SheetCloseProp
 declare namespace SheetClose {
     var displayName: string;
 }
+export interface SheetSlidesProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * `true` makes it a deck: each slide fills the height, and a scroll
+     * glides to the next one. `false` makes it a numbered column of smaller
+     * slides that scrolls freely. Default `true`.
+     */
+    snap?: boolean;
+    /** The current slide, counted from 0, when the caller holds it. Setting it scrolls that slide into view. */
+    index?: number;
+    /** The slide to start on, when the caller does not hold it. Default `0`. */
+    defaultIndex?: number;
+    /**
+     * Called with the new index when the current slide changes: scrolled to
+     * in a deck, pressed in a column. In a column, passing it makes each
+     * slide a button.
+     */
+    onIndexChange?: (index: number) => void;
+    /** Show "3 / 8" under the current slide. Default: on in a deck. */
+    counter?: boolean;
+    /** The shape of a slide in a column, as a CSS aspect ratio. Default `16 / 9`. */
+    aspect?: string;
+}
+/**
+ * A column of rounded slides in place of `Sheet.Body`: a deck that moves one
+ * slide at a time, or with `snap={false}`, a numbered column to choose from.
+ */
+declare function SheetSlides({ snap, index, defaultIndex, onIndexChange, counter, aspect, className, style, children, 'aria-label': label, ...props }: SheetSlidesProps): import("react").JSX.Element;
+declare namespace SheetSlides {
+    var displayName: string;
+}
+export interface SheetSlideProps extends ComponentProps<'div'> {
+    /**
+     * What a screen reader calls it, after its place: "3 of 8, Harbour at
+     * dawn". An image's `alt` usually says it already.
+     */
+    label?: string;
+    /** Its shape in a column, overriding `Sheet.Slides`' `aspect`. */
+    aspect?: string;
+}
+/** One slide: a rounded frame that fills with an image, a video or anything drawn. */
+declare function SheetSlide({ label, aspect, className, style, children, ...props }: SheetSlideProps): import("react").JSX.Element;
+declare namespace SheetSlide {
+    var displayName: string;
+}
 export interface SheetStageProps extends ComponentProps<'div'> {
 }
 /**
@@ -183,5 +227,7 @@ export declare const Sheet: typeof SheetRoot & {
     Footer: typeof SheetFooter;
     Close: typeof SheetClose;
     Stage: typeof SheetStage;
+    Slides: typeof SheetSlides;
+    Slide: typeof SheetSlide;
 };
-export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, };

package/dist/components/sheet/index.js

@@ -45,10 +45,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * Every sheet follows a drag and leaves on a flick toward its own edge. The
  * grabber on a top or bottom sheet says so before anybody tries.
+ *
+ * ## Slides
+ *
+ * `Sheet.Slides` takes the place of the body with a column of rounded
+ * slides, for photos or a deck. By default it is a deck: each slide fills
+ * the sheet's height, a turn of the wheel or a swipe of the trackpad glides
+ * to the next slide, an arrow key moves one, and a counter under it says
+ * which. Without `snap` it is a numbered column of smaller slides that
+ * scrolls freely, the way a presentation's slide panel does, and pressing
+ * one chooses it.
  */
 import { Drawer } from '@base-ui/react/drawer';
 import { ScrollArea } from '@base-ui/react/scroll-area';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Children, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 /*
  * One curve for every movement: the sheet arriving, the one behind it stepping
@@ -120,6 +130,32 @@ const sheetVariants = tv({
         scrollbar: 'my-3 me-1 flex w-1.5 opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0',
         thumb: 'relative flex-1 rounded-full bg-foreground/20',
         footer: 'flex shrink-0 flex-col gap-2 px-6 pt-3 pb-6',
+        /*
+         * Slides. As a deck the viewport is a size container, so a slide can be
+         * exactly its height less the padding, which is what lets one flick land
+         * on one slide. The minimum height is for a sheet that sizes itself to
+         * its content, where a deck would otherwise have no height to fill.
+         */
+        slides: 'relative flex min-h-0 flex-1 flex-col',
+        // Focus is shown on the current slide, not as a square round the scroller.
+        slidesViewport: 'group/slides min-h-0 flex-1 overscroll-contain outline-none',
+        slidesContent: 'flex flex-col gap-3 px-3',
+        // 20px is the sheet's 32 less the 12px it is set in by: one corner, two curves.
+        slide: [
+            'relative shrink-0 overflow-hidden rounded-[20px] bg-muted',
+            '[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover',
+            // A hairline over the picture, so a photo keeps an edge on a sheet of its own colour.
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:ring-foreground/[0.08] after:content-['']",
+            'group-focus-visible/slides:data-current:ring-2 group-focus-visible/slides:data-current:ring-ring',
+        ],
+        slideRow: 'grid grid-cols-[1.25rem_minmax(0,1fr)] items-start gap-2.5',
+        slideNumber: 'pt-1 text-end text-xs font-medium tabular-nums text-muted-foreground',
+        slideButton: [
+            'group/slide block w-full cursor-pointer rounded-[14px] text-start outline-none transition-shadow duration-150',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover',
+        ],
+        // No blur behind it: a filter over a scrolling picture repaints on every frame.
+        counter: 'pointer-events-none absolute inset-x-0 bottom-5 mx-auto w-fit rounded-full bg-black/60 px-2.5 py-1 text-xs font-medium tabular-nums text-white',
         /*
          * The page behind steps back by 3%, not more: enough to read as a layer
          * underneath, not so much that the page looks like it shrank. It keeps its
@@ -414,6 +450,217 @@ function SheetClose({ render, icon = false, children, ...props }) {
     return (_jsx(Drawer.Close, { render: render, ...props, children: content }));
 }
 SheetClose.displayName = 'Sheet.Close';
+const SlidesContext = createContext(null);
+/** The rounded frame of a slide: the slide itself in a deck, inside its row in a column. */
+const frameOf = (slide) => slide.querySelector('[data-slide-frame]') ?? slide;
+const SlideIndexContext = createContext(0);
+function reduceMotion() {
+    return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * A column of rounded slides in place of `Sheet.Body`: a deck that moves one
+ * slide at a time, or with `snap={false}`, a numbered column to choose from.
+ */
+function SheetSlides({ snap = true, index, defaultIndex = 0, onIndexChange, counter, aspect = '16 / 9', className, style, children, 'aria-label': label = 'Slides', ...props }) {
+    const slots = sheetVariants();
+    const viewport = useRef(null);
+    const slides = Children.toArray(children);
+    const count = slides.length;
+    const [internal, setInternal] = useState(defaultIndex);
+    const current = Math.min(Math.max(index ?? internal, 0), Math.max(count - 1, 0));
+    const live = useRef({ current, onIndexChange, controlled: index !== undefined });
+    live.current = { current, onIndexChange, controlled: index !== undefined };
+    const slideAt = (at) => viewport.current?.querySelectorAll('[data-slot=sheet-slide]')[at] ?? null;
+    // Scrolls the slides alone. `scrollIntoView` would move every scroller
+    // above them too, the page included when a sheet is drawn inline.
+    const reveal = useCallback((at, smooth) => {
+        const root = viewport.current;
+        const slide = slideAt(at);
+        if (!root || !slide)
+            return;
+        const box = root.getBoundingClientRect();
+        const frame = frameOf(slide).getBoundingClientRect();
+        const above = frame.top - box.top;
+        const below = frame.bottom - box.bottom;
+        const by = snap ? above - (box.height - frame.height) / 2 : above < 0 ? above - 8 : below > 0 ? below + 8 : 0;
+        if (by === 0)
+            return;
+        const behavior = smooth && !reduceMotion() ? 'smooth' : 'auto';
+        if (!snap) {
+            root.scrollBy({ top: by, behavior });
+            return;
+        }
+        // A deck stops at every slide on the way, which is right for a hand
+        // and wrong for Home or End. Snapping is off for the length of a jump.
+        root.style.scrollSnapType = 'none';
+        root.scrollBy({ top: by, behavior });
+        let restored = false;
+        const restore = () => {
+            if (restored)
+                return;
+            restored = true;
+            root.style.scrollSnapType = '';
+        };
+        if (behavior === 'smooth' && 'onscrollend' in window) {
+            root.addEventListener('scrollend', restore, { once: true });
+            window.setTimeout(restore, 1200);
+        }
+        else {
+            requestAnimationFrame(restore);
+        }
+    }, [snap]);
+    // The slide last brought into view. One that became current by being
+    // scrolled to is already in view, and must not be scrolled to again: that
+    // would pull a deck back to it in the middle of a longer scroll.
+    const shown = useRef(null);
+    const settle = useCallback((next) => {
+        shown.current = next;
+        if (next === live.current.current)
+            return;
+        if (!live.current.controlled)
+            setInternal(next);
+        live.current.onIndexChange?.(next);
+    }, []);
+    // A deck's current slide is the one most in view.
+    useEffect(() => {
+        const root = viewport.current;
+        if (!snap || !root || typeof IntersectionObserver === 'undefined')
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    settle(Number(entry.target.dataset.index));
+            }
+        }, { root, threshold: 0.6 });
+        root.querySelectorAll('[data-slot=sheet-slide]').forEach((slide) => observer.observe(slide));
+        return () => observer.disconnect();
+    }, [snap, count, settle]);
+    // Opens on the current slide, and follows `index` when it is set from outside.
+    useEffect(() => {
+        const first = shown.current === null;
+        if (!first && shown.current === current)
+            return;
+        shown.current = current;
+        if (first && current === 0)
+            return;
+        const box = viewport.current?.getBoundingClientRect();
+        const slide = slideAt(current);
+        const frame = slide ? frameOf(slide).getBoundingClientRect() : undefined;
+        const visible = box && frame && frame.top >= box.top - 1 && frame.bottom <= box.bottom + 1;
+        // A deck that scrolled there by itself is already on it.
+        if (!visible || (first && snap))
+            reveal(current, !first);
+    }, [current, reveal, snap]);
+    const go = (next) => {
+        const at = Math.min(Math.max(next, 0), count - 1);
+        if (snap)
+            reveal(at, true);
+        else {
+            settle(at);
+            reveal(at, true);
+            slideAt(at)?.querySelector('button')?.focus();
+        }
+    };
+    const goNow = useRef(go);
+    goNow.current = go;
+    /*
+     * A wheel or a trackpad turns a deck one slide per gesture. Left to the
+     * browser, a slow scroll drifts part of the way, eases off and springs
+     * back, and a fast one runs past several slides. Here a deliberate scroll
+     * glides to the next slide, and the rest of the same gesture, the
+     * trackpad's momentum included, is absorbed rather than fought. A touch
+     * screen keeps the browser's own snapping, which follows the finger.
+     */
+    useEffect(() => {
+        const root = viewport.current;
+        if (!snap || !root)
+            return;
+        let pending = 0;
+        let lastWheel = 0;
+        let lockedUntil = 0;
+        const onWheel = (event) => {
+            // Sideways scrolling and pinch-zoom are not turns.
+            if (event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))
+                return;
+            event.preventDefault();
+            const now = performance.now();
+            const gap = now - lastWheel;
+            lastWheel = now;
+            if (now < lockedUntil) {
+                // Still the same gesture: keep it from turning a second slide.
+                lockedUntil = Math.max(lockedUntil, now + 140);
+                return;
+            }
+            if (gap > 200)
+                pending = 0;
+            pending += event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+            if (Math.abs(pending) < 24)
+                return;
+            const step = Math.sign(pending);
+            pending = 0;
+            lockedUntil = now + 500;
+            goNow.current(live.current.current + step);
+        };
+        root.addEventListener('wheel', onWheel, { passive: false });
+        return () => root.removeEventListener('wheel', onWheel);
+    }, [snap]);
+    const keys = (event) => {
+        const step = event.key === 'ArrowDown' || event.key === 'PageDown' || (event.key === ' ' && !event.shiftKey)
+            ? 1
+            : event.key === 'ArrowUp' || event.key === 'PageUp' || (event.key === ' ' && event.shiftKey)
+                ? -1
+                : 0;
+        if (step !== 0) {
+            event.preventDefault();
+            go(current + step);
+        }
+        else if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            go(event.key === 'Home' ? 0 : count - 1);
+        }
+    };
+    const context = useMemo(() => ({ snap, count, current, choose: settle, pressable: !snap && onIndexChange !== undefined }), [snap, count, current, settle, onIndexChange]);
+    return (_jsx(SlidesContext.Provider, { value: context, children: _jsxs(ScrollArea.Root, { "data-slot": "sheet-slides", "data-snap": snap ? '' : undefined, className: slots.slides({ className }), style: { ...style, ['--slide-aspect']: aspect }, ...props, children: [_jsx(ScrollArea.Viewport, { ref: viewport, tabIndex: 0, "aria-roledescription": "carousel", "aria-label": label, onKeyDown: keys, className: slots.slidesViewport({
+                        className: snap
+                            ? 'min-h-[min(60dvh,32rem)] snap-y snap-mandatory [container-type:size]'
+                            : undefined,
+                    }), children: _jsx(ScrollArea.Content, { className: slots.slidesContent({ className: snap ? 'py-1.5' : 'gap-2 pb-3 pt-1' }), children: slides.map((slide, at) => (_jsx(SlideIndexContext.Provider, { value: at, children: slide }, at))) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) }), (counter ?? snap) && count > 1 ? (_jsxs("div", { "data-slot": "sheet-slides-counter", "aria-hidden": "true", className: slots.counter(), children: [current + 1, " / ", count] })) : null] }) }));
+}
+SheetSlides.displayName = 'Sheet.Slides';
+/** One slide: a rounded frame that fills with an image, a video or anything drawn. */
+function SheetSlide({ label, aspect, className, style, children, ...props }) {
+    const slides = useContext(SlidesContext);
+    if (!slides)
+        throw new Error('Sheet.Slide must be used inside <Sheet.Slides>.');
+    const at = useContext(SlideIndexContext);
+    const slots = sheetVariants();
+    const place = `${at + 1} of ${slides.count}`;
+    const selected = at === slides.current;
+    const name = label ? `${place}, ${label}` : place;
+    const frameClass = slots.slide({
+        className: [
+            slides.snap
+                ? 'h-[calc(100cqh-0.75rem)] snap-center'
+                : // In a column a slide sits on the sheet's own colour, so it takes the
+                    // theme's border as a real edge, and a shadow to stand off the sheet.
+                    'aspect-(--slide-aspect) rounded-[14px] shadow-xs ring-1 ring-border transition-shadow duration-150 after:hidden',
+            !slides.snap && !selected && slides.pressable && 'group-hover/slide:ring-foreground/25',
+            // Chosen in a column: a ring in the info colour, the theme's colour for
+            // something switched on, clear of the slide's edge.
+            !slides.snap && selected && 'shadow-none ring-2 ring-[var(--info)] ring-offset-2 ring-offset-popover',
+            className,
+        ],
+    });
+    const frameStyle = aspect ? { ...style, aspectRatio: aspect } : style;
+    // In a deck the slide is the frame, so the observer that finds the current
+    // one has a box to watch.
+    if (slides.snap) {
+        return (_jsx("div", { "data-slot": "sheet-slide", "data-slide-frame": "", "data-index": at, "data-current": selected ? '' : undefined, role: "group", "aria-roledescription": "slide", "aria-label": name, className: frameClass, style: frameStyle, ...props, children: children }));
+    }
+    const frame = (_jsx("div", { "data-slide-frame": "", "data-current": selected ? '' : undefined, className: frameClass, style: frameStyle, children: children }));
+    return (_jsxs("div", { "data-slot": "sheet-slide", "data-index": at, "data-selected": selected ? '' : undefined, className: slots.slideRow(), ...props, children: [_jsx("span", { "aria-hidden": "true", className: slots.slideNumber({ className: selected ? 'text-[var(--info)]' : undefined }), children: at + 1 }), slides.pressable ? (_jsx("button", { type: "button", "aria-label": label ? name : `Slide ${place}`, "aria-current": selected ? 'true' : undefined, className: slots.slideButton(), onClick: () => slides.choose(at), children: frame })) : (_jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": name, children: frame }))] }));
+}
+SheetSlide.displayName = 'Sheet.Slide';
 /**
  * Wrap the app — or the part of the page a sheet belongs to — in this, and
  * the page steps back slightly while a sheet is open. Sheets opened anywhere
@@ -435,5 +682,7 @@ export const Sheet = Object.assign(SheetRoot, {
     Footer: SheetFooter,
     Close: SheetClose,
     Stage: SheetStage,
+    Slides: SheetSlides,
+    Slide: SheetSlide,
 });
-export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetLi
 export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackDescription, FeedbackMessage, FeedbackRating, FeedbackFooter, FeedbackCancel, FeedbackSubmit, type FeedbackProps, type FeedbackTriggerProps, type FeedbackContentProps, type FeedbackPanelProps, type FeedbackTitleProps, type FeedbackCloseProps, type FeedbackFieldProps, type FeedbackDescriptionProps, type FeedbackMessageProps, type FeedbackRatingProps, type FeedbackFooterProps, type FeedbackActionProps, type FeedbackSubmitProps, } from './components/feedback/index.js';
 export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardActionProps, type CardContentProps, type CardFooterProps, } from './components/card/index.js';
 export { Frame, FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, type FrameProps, type FrameVariant, type FrameHeaderProps, type FrameTitleProps, type FrameDescriptionProps, type FrameActionProps, type FramePanelProps, type FrameRowProps, type FrameMediaProps, type FrameContentProps, type FrameActionsProps, type FrameSectionProps, type FrameFooterProps, } from './components/frame/index.js';
-export { Sheet, SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, type SheetProps, type SheetSide, type SheetTriggerProps, type SheetNextProps, type SheetContentProps, type SheetHeaderProps, type SheetTitleProps, type SheetDescriptionProps, type SheetBodyProps, type SheetFooterProps, type SheetCloseProps, type SheetStageProps, } from './components/sheet/index.js';
+export { Sheet, SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, type SheetProps, type SheetSide, type SheetTriggerProps, type SheetNextProps, type SheetContentProps, type SheetHeaderProps, type SheetTitleProps, type SheetDescriptionProps, type SheetBodyProps, type SheetFooterProps, type SheetCloseProps, type SheetStageProps, type SheetSlidesProps, type SheetSlideProps, } from './components/sheet/index.js';
 export { DayGrid, DayGridLegend, DayGridWeekdays, DayGridCaption, DayGridTitle, DayGridDescription, type DayGridProps, type DayGridLegendProps, type DayGridWeekdaysProps, type DayGridCaptionProps, type DayGridTitleProps, type DayGridDescriptionProps, type DayGridColor, type DayCell, type DayLevel, } from './components/day-grid/index.js';
 export { RangeMeter, RangeMeterLabel, RangeMeterScale, type RangeMeterProps, type RangeMeterLabelProps, type RangeMeterScaleProps, type RangeMeterColor, } from './components/range-meter/index.js';
 export { BarPicker, type BarPickerProps, type BarPickerBar, type BarPickerColor, } from './components/bar-picker/index.js';
@@ -21,9 +21,13 @@ export { Textarea, type TextareaProps } from './components/textarea/index.js';
 export { Switch, type SwitchProps, type SwitchSize, type SwitchColor } from './components/switch/index.js';
 export { Label, LabelText, LabelHint, LabelAction, type LabelProps, type LabelTextProps, type LabelHintProps, type LabelActionProps, } from './components/label/index.js';
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator, type SelectProps, type SelectTriggerProps, type SelectValueProps, type SelectContentProps, type SelectItemProps, type SelectGroupProps, type SelectGroupLabelProps, type SelectSeparatorProps, } from './components/select/index.js';
-export { Prompt, PromptBanner, PromptBannerAction, PromptField, PromptAttachments, PromptTextarea, PromptFooter, PromptTools, PromptTool, PromptAttach, PromptMenu, PromptAttachItem, PromptModel, PromptSubmit, PromptStatus, PromptTasks, PromptTask, PromptCommands, PromptRecorder, PromptContext, PromptContextItem, PromptHint, type PromptProps, type PromptState, type PromptMessage, type PromptAttachment, type PromptRejectReason, type PromptBannerProps, type PromptBannerActionProps, type PromptFieldProps, type PromptAttachmentsProps, type PromptTextareaProps, type PromptFooterProps, type PromptToolsProps, type PromptToolProps, type PromptAttachProps, type PromptMenuProps, type PromptAttachItemProps, type PromptModelProps, type PromptModelItem, type PromptSubmitProps, type PromptStatusProps, type PromptTasksProps, type PromptTaskProps, type PromptTaskStatus, type PromptCommandsProps, type PromptCommandItem, type PromptRecorderProps, type PromptContextProps, type PromptContextItemProps, type PromptHintProps, } from './components/prompt/index.js';
+export { Prompt, PromptBanner, PromptBannerAction, PromptField, PromptAttachments, PromptTextarea, PromptFooter, PromptTools, PromptTool, PromptAttach, PromptMenu, PromptAttachItem, PromptModel, PromptSubmit, PromptStatus, PromptTasks, PromptTask, PromptCommands, PromptRecorder, PromptContext, PromptContextItem, PromptHint, type PromptProps, type PromptState, type PromptBandMode, type PromptMessage, type PromptAttachment, type PromptRejectReason, type PromptBannerProps, type PromptBannerActionProps, type PromptFieldProps, type PromptAttachmentsProps, type PromptTextareaProps, type PromptFooterProps, type PromptToolsProps, type PromptToolProps, type PromptAttachProps, type PromptMenuProps, type PromptAttachItemProps, type PromptModelProps, type PromptModelItem, type PromptSubmitProps, type PromptStatusProps, type PromptTasksProps, type PromptTaskProps, type PromptTaskStatus, type PromptCommandsProps, type PromptCommandItem, type PromptRecorderProps, type PromptContextProps, type PromptContextItemProps, type PromptHintProps, } from './components/prompt/index.js';
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, type MenuProps, type MenuTriggerProps, type MenuContentProps, type MenuItemProps, type MenuCheckboxItemProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuSubProps, type MenuSubTriggerProps, type MenuSubContentProps, type MenuGroupProps, type MenuGroupLabelProps, type MenuSeparatorProps, type MenuDescriptionProps, type MenuShortcutProps, type MenuBadgeProps, } from './components/menu/index.js';
 export { Avatar, AvatarBadge, AvatarGroup, type AvatarProps, type AvatarBadgeProps, type AvatarGroupProps, type AvatarSize, type AvatarShape, type AvatarColor, type AvatarStatus, } from './components/avatar/index.js';
 export { Tabs, TabsList, TabsTrigger, TabsBadge, TabsContent, type TabsProps, type TabsVariant, type TabsListProps, type TabsTriggerProps, type TabsBadgeProps, type TabsContentProps, } from './components/tabs/index.js';
 export { Message, MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageBubble, MessageBubbleContent, MessageFooter, MessageActions, MessageAction, MessageBranch, MessageStatus, MessageAttachments, MessageAttachment, type MessageFrom, type MessageProps, type MessageGroupProps, type MessageAvatarProps, type MessageContentProps, type MessageHeaderProps, type MessageBubbleProps, type MessageBubbleContentProps, type MessageFooterProps, type MessageActionsProps, type MessageActionProps, type MessageBranchProps, type MessageStatusProps, type MessageAttachmentsProps, type MessageAttachmentProps, } from './components/message/index.js';
 export { Soundwave, SoundwaveCenter, useAudioLevel, useMicrophone, type SoundwaveProps, type SoundwaveCenterProps, type SoundwaveVariant, type SoundwaveState, type SoundwaveColor, type SoundwaveSource, type AudioLevelOptions, type UseMicrophoneOptions, type MicrophoneControls, type MicrophoneStatus, } from './components/soundwave/index.js';
+export { Alert, AlertIcon, AlertTitle, AlertDescription, AlertActions, AlertClose, AlertDetails, AlertItem, type AlertProps, type AlertTone, type AlertVariant, type AlertIconProps, type AlertTitleProps, type AlertDescriptionProps, type AlertActionsProps, type AlertCloseProps, type AlertDetailsProps, type AlertItemProps, } from './components/alert/index.js';
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogMedia, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, type AlertDialogProps, type AlertDialogTone, type AlertDialogTriggerProps, type AlertDialogContentProps, type AlertDialogMediaProps, type AlertDialogTitleProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogCancelProps, type AlertDialogActionProps, } from './components/alert-dialog/index.js';
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, DialogList, DialogListGroup, DialogListItem, type DialogProps, type DialogTriggerProps, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps, type DialogListProps, type DialogListGroupProps, type DialogListItemProps, } from './components/dialog/index.js';
+export { Canvas, CanvasPattern, CanvasSpotlight, CanvasContent, type CanvasProps, type CanvasViewport, type CanvasPatternVariant, type CanvasFade, type CanvasPatternProps, type CanvasSpotlightProps, type CanvasContentProps, } from './components/canvas/index.js';

package/dist/index.js

@@ -4,7 +4,7 @@ export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetLi
 export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackDescription, FeedbackMessage, FeedbackRating, FeedbackFooter, FeedbackCancel, FeedbackSubmit, } from './components/feedback/index.js';
 export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, } from './components/card/index.js';
 export { Frame, FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, } from './components/frame/index.js';
-export { Sheet, SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, } from './components/sheet/index.js';
+export { Sheet, SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, } from './components/sheet/index.js';
 export { DayGrid, DayGridLegend, DayGridWeekdays, DayGridCaption, DayGridTitle, DayGridDescription, } from './components/day-grid/index.js';
 export { RangeMeter, RangeMeterLabel, RangeMeterScale, } from './components/range-meter/index.js';
 export { BarPicker, } from './components/bar-picker/index.js';
@@ -27,3 +27,7 @@ export { Avatar, AvatarBadge, AvatarGroup, } from './components/avatar/index.js'
 export { Tabs, TabsList, TabsTrigger, TabsBadge, TabsContent, } from './components/tabs/index.js';
 export { Message, MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageBubble, MessageBubbleContent, MessageFooter, MessageActions, MessageAction, MessageBranch, MessageStatus, MessageAttachments, MessageAttachment, } from './components/message/index.js';
 export { Soundwave, SoundwaveCenter, useAudioLevel, useMicrophone, } from './components/soundwave/index.js';
+export { Alert, AlertIcon, AlertTitle, AlertDescription, AlertActions, AlertClose, AlertDetails, AlertItem, } from './components/alert/index.js';
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogMedia, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, } from './components/alert-dialog/index.js';
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, DialogList, DialogListGroup, DialogListItem, } from './components/dialog/index.js';
+export { Canvas, CanvasPattern, CanvasSpotlight, CanvasContent, } from './components/canvas/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-web",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "PanelUI for the web: animated, data-rich React components styled with Tailwind CSS on shadcn tokens.",
   "type": "module",
   "sideEffects": false,