@trypattern/sdk 0.1.29 → 0.1.31

package/dist/components/Card.d.ts

@@ -11,7 +11,9 @@ type CardProps = {
     to?: AppPath;
     href?: string;
     onClick?: () => void;
+    hover?: 'zoom' | 'outline';
+    isPressable?: boolean;
     style?: Placement;
 };
-export declare function Card({ children, surface, padding, paddingBlock, to, href, onClick, style }: CardProps): import("react").JSX.Element;
+export declare function Card({ children, surface, padding, paddingBlock, to, href, onClick, hover, isPressable, style }: CardProps): import("react").JSX.Element;
 export {};

package/dist/components/Card.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as BaseButton } from '@base-ui/react/button';
 import * as stylex from '@stylexjs/stylex';
 import { Link as RouterLink } from 'react-router';
-import { colors, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { borders, breakpoints, colors, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
-export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, to, href, onClick, style }) {
+export function Card({ children, surface = 'subtle', padding = 'lg', paddingBlock, to, href, onClick, hover, isPressable = false, style }) {
     const isInteractive = to !== undefined || href !== undefined || onClick !== undefined;
-    const className = stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], isInteractive && styles.interactive, isInteractive && focusRing.visible, style).className;
+    const className = stylex.props(styles.card, surfaces[surface], paddings[padding], paddingBlock !== undefined && paddingBlocks[paddingBlock], isInteractive && styles.interactive, isInteractive && focusRing.visible, isInteractive && hover === 'zoom' && stylex.defaultMarker(), isInteractive && hover === 'outline' && styles.outline, isInteractive && isPressable && styles.pressable, style).className;
     const report = (event) => {
         interact({
             primitive: 'Card',
@@ -40,6 +40,30 @@ const styles = stylex.create({
         textAlign: 'start',
         textDecoration: 'none',
         outlineOffset: 0
+    },
+    outline: {
+        boxShadow: {
+            default: shadows.default,
+            [breakpoints.canHover]: {
+                default: shadows.default,
+                ':hover': `0 0 0 ${borders.thin} ${colors.borderStrong}`
+            }
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'box-shadow, transform'
+    },
+    pressable: {
+        transform: {
+            default: null,
+            ':active': {
+                default: 'scale(0.98)',
+                [breakpoints.reducedMotion]: 'none'
+            }
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'box-shadow, transform'
     }
 });
 const surfaces = stylex.create({

package/dist/components/Dialog.d.ts

@@ -3,7 +3,7 @@ type DialogProps = {
     label: string;
     isOpen: boolean;
     onOpenChange: (isOpen: boolean) => void;
-    placement?: 'center' | 'top';
+    placement?: 'center' | 'top' | 'sheet';
     size?: 'sm' | 'md' | 'lg' | 'xl';
     children: ReactNode;
 };

package/dist/components/Dialog.js

@@ -1,9 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import * as stylex from '@stylexjs/stylex';
-import { colors, layers, motion, radii, shadows } from "../theme/tokens.stylex.js";
+import { useRef, useState } from 'react';
+import { breakpoints, colors, layers, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
 import { interact } from "./interaction.js";
 export function Dialog({ label, isOpen, onOpenChange, placement = 'center', size = 'md', children }) {
+    const start = useRef(null);
+    const [drag, setDrag] = useState(0);
+    const isSheet = placement === 'sheet';
+    const close = () => {
+        interact({ primitive: 'Dialog', event: 'close', label });
+        onOpenChange(false);
+    };
+    const dragged = useRef(0);
+    const handle = (element) => {
+        if (element === null)
+            return undefined;
+        const grab = (event) => {
+            start.current = event.clientY;
+            element.setPointerCapture(event.pointerId);
+        };
+        const move = (event) => {
+            if (start.current === null)
+                return;
+            dragged.current = Math.max(0, event.clientY - start.current);
+            setDrag(dragged.current);
+        };
+        const release = () => {
+            if (start.current === null)
+                return;
+            start.current = null;
+            if (dragged.current > DRAG_TO_CLOSE)
+                close();
+            dragged.current = 0;
+            setDrag(0);
+        };
+        element.addEventListener('pointerdown', grab);
+        element.addEventListener('pointermove', move);
+        element.addEventListener('pointerup', release);
+        element.addEventListener('pointercancel', release);
+        return () => {
+            element.removeEventListener('pointerdown', grab);
+            element.removeEventListener('pointermove', move);
+            element.removeEventListener('pointerup', release);
+            element.removeEventListener('pointercancel', release);
+        };
+    };
     return (_jsx(BaseDialog.Root, { open: isOpen, onOpenChange: (next) => {
             interact({
                 primitive: 'Dialog',
@@ -11,9 +53,9 @@ export function Dialog({ label, isOpen, onOpenChange, placement = 'center', size
                 label
             });
             onOpenChange(next);
-        }, children: _jsxs(BaseDialog.Portal, { children: [placement === 'center' ? (_jsx(BaseDialog.Backdrop, { className: (state) => stylex.props(styles.backdrop, (!state.open || state.transitionStatus === 'starting') &&
-                        styles.backdropHidden).className })) : null, _jsx(BaseDialog.Popup, { "aria-label": label, className: (state) => stylex.props(styles.popup, placements[placement], widths[size], (!state.open || state.transitionStatus === 'starting') &&
-                        hiddenPlacements[placement], !state.open && styles.exiting).className, children: _jsx("div", { ...stylex.props(styles.frame), children: children }) })] }) }));
+        }, children: _jsxs(BaseDialog.Portal, { children: [placement === 'center' || isSheet ? (_jsx(BaseDialog.Backdrop, { className: (state) => stylex.props(styles.backdrop, (!state.open || state.transitionStatus === 'starting') &&
+                        styles.backdropHidden).className })) : null, _jsx(BaseDialog.Popup, { "aria-label": label, className: (state) => stylex.props(styles.popup, placements[placement], isSheet ? sheetWidths[size] : widths[size], (!state.open || state.transitionStatus === 'starting') &&
+                        hiddenPlacements[placement], !state.open && styles.exiting, isSheet && drag > 0 && styles.dragged(drag)).className, children: _jsxs("div", { ...stylex.props(styles.frame, isSheet && styles.sheetFrame), children: [isSheet ? (_jsx("div", { "aria-hidden": "true", ref: handle, ...stylex.props(styles.handle), children: _jsx("span", { ...stylex.props(styles.grip) }) })) : null, children] }) })] }) }));
 }
 const styles = stylex.create({
     backdrop: {
@@ -42,6 +84,42 @@ const styles = stylex.create({
         transitionTimingFunction: motion.easeOut,
         transitionDuration: motion.exit
     },
+    dragged: (y) => ({
+        transform: `translateY(${y}px)`,
+        transitionDuration: '0s'
+    }),
+    sheetFrame: {
+        maxHeight: {
+            default: 'calc(100dvh - 2rem)',
+            [breakpoints.compact]: `calc(100dvh - ${space.xxxl} * 2)`
+        },
+        borderRadius: {
+            default: radii.xxxl,
+            [breakpoints.compact]: `${radii.xxxxl} ${radii.xxxxl} 0 0`
+        },
+        boxShadow: {
+            default: shadows.extraLarge,
+            [breakpoints.compact]: `0 -8px 32px ${colors.borderStrong}`
+        }
+    },
+    handle: {
+        display: {
+            default: 'none',
+            [breakpoints.compact]: 'flex'
+        },
+        flexShrink: 0,
+        justifyContent: 'center',
+        paddingTop: space.sm,
+        paddingBottom: space.xs,
+        touchAction: 'none',
+        cursor: 'grab'
+    },
+    grip: {
+        width: `calc(${space.xxl} + ${space.xs})`,
+        height: `calc(${space.xs} + 1px)`,
+        backgroundColor: colors.borderStrong,
+        borderRadius: radii.full
+    },
     frame: {
         display: 'flex',
         flexDirection: 'column',
@@ -54,6 +132,24 @@ const styles = stylex.create({
     }
 });
 const placements = stylex.create({
+    sheet: {
+        top: {
+            default: '50%',
+            [breakpoints.compact]: 'auto'
+        },
+        bottom: {
+            default: 'auto',
+            [breakpoints.compact]: 0
+        },
+        left: {
+            default: '50%',
+            [breakpoints.compact]: 0
+        },
+        transform: {
+            default: 'translate(-50%, -50%)',
+            [breakpoints.compact]: 'none'
+        }
+    },
     top: {
         top: '20vh',
         transform: 'translateX(-50%)'
@@ -64,6 +160,17 @@ const placements = stylex.create({
     }
 });
 const hiddenPlacements = stylex.create({
+    sheet: {
+        pointerEvents: 'none',
+        opacity: {
+            default: 0,
+            [breakpoints.compact]: 1
+        },
+        transform: {
+            default: 'translate(-50%, -50%) scale(0.95)',
+            [breakpoints.compact]: 'translateY(100%)'
+        }
+    },
     top: {
         pointerEvents: 'none',
         opacity: 0,
@@ -81,3 +188,30 @@ const widths = stylex.create({
     lg: { maxWidth: 'min(720px, calc(100% - 2rem))' },
     xl: { maxWidth: 'min(800px, calc(100% - 2rem))' }
 });
+const sheetWidths = stylex.create({
+    sm: {
+        maxWidth: {
+            default: 'min(400px, calc(100% - 2rem))',
+            [breakpoints.compact]: '100%'
+        }
+    },
+    md: {
+        maxWidth: {
+            default: 'min(560px, calc(100% - 2rem))',
+            [breakpoints.compact]: '100%'
+        }
+    },
+    lg: {
+        maxWidth: {
+            default: 'min(720px, calc(100% - 2rem))',
+            [breakpoints.compact]: '100%'
+        }
+    },
+    xl: {
+        maxWidth: {
+            default: 'min(800px, calc(100% - 2rem))',
+            [breakpoints.compact]: '100%'
+        }
+    }
+});
+const DRAG_TO_CLOSE = 96;

package/dist/components/Gallery.d.ts

@@ -0,0 +1,17 @@
+import type { MediaImage } from '../media.ts';
+import type { Placement } from './Placement.ts';
+type GalleryPhoto = MediaImage & {
+    readonly id: string;
+};
+type GalleryProps = {
+    label: string;
+    photos: readonly GalleryPhoto[];
+    value: string | null;
+    onChange: (id: string) => void;
+    sizes: string;
+    aspect?: number;
+    priority?: boolean;
+    style?: Placement;
+};
+export declare function Gallery({ label, photos, value, onChange, sizes, aspect, priority, style }: GalleryProps): import("react").JSX.Element;
+export {};

package/dist/components/Gallery.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useRef } from 'react';
+import { breakpoints, colors, galleryMarker, motion, radii, space } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
+import { Icon } from "./Icon.js";
+import { Image } from "./Image.js";
+import { interact } from "./interaction.js";
+import { Text } from "./Text.js";
+export function Gallery({ label, photos, value, onChange, sizes, aspect, priority = false, style }) {
+    const track = useRef(null);
+    const shown = useRef(null);
+    const latest = useRef(onChange);
+    latest.current = onChange;
+    const index = Math.max(0, photos.findIndex((photo) => photo.id === value));
+    const current = photos[index];
+    useEffect(() => {
+        const element = track.current;
+        if (element === null)
+            return undefined;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                const id = entry.target.getAttribute('data-photo');
+                if (entry.intersectionRatio < SHOWN || id === null)
+                    continue;
+                if (shown.current === id)
+                    continue;
+                shown.current = id;
+                latest.current(id);
+            }
+        }, { root: element, threshold: [SHOWN] });
+        for (const slide of element.children)
+            observer.observe(slide);
+        return () => observer.disconnect();
+    }, [photos]);
+    useEffect(() => {
+        const element = track.current;
+        if (element === null || current === undefined)
+            return;
+        if (shown.current === current.id)
+            return;
+        shown.current = current.id;
+        const slide = element.children[index];
+        if (!(slide instanceof HTMLElement))
+            return;
+        element.scrollTo({
+            left: slide.offsetLeft -
+                Number.parseFloat(getComputedStyle(element).paddingLeft),
+            behavior: prefersReducedMotion() ? 'auto' : 'smooth'
+        });
+    }, [current, index]);
+    const go = (next) => {
+        const photo = photos[(next + photos.length) % photos.length];
+        if (photo === undefined)
+            return;
+        interact({ primitive: 'Gallery', event: 'change', label });
+        onChange(photo.id);
+    };
+    const hasMany = photos.length > 1;
+    return (_jsxs("section", { "aria-roledescription": "carousel", "aria-label": label, ...stylex.props(styles.gallery, style), children: [_jsxs("div", { ...stylex.props(styles.stage, galleryMarker), children: [_jsx("div", { ref: track, tabIndex: hasMany ? 0 : undefined, ...stylex.props(styles.track, focusRing.visible, focusRing.inside), children: photos.map((photo, at) => (_jsx("div", { "data-photo": photo.id, role: "group", "aria-roledescription": "slide", "aria-label": `${at + 1} of ${photos.length}`, ...stylex.props(styles.slide, hasMany && styles.peeking), children: _jsx(Image, { image: photo, sizes: sizes, ...(aspect === undefined ? {} : { aspect }), priority: priority && at === 0 }) }, photo.id))) }), hasMany ? (_jsxs(_Fragment, { children: [_jsx(BaseButton, { "aria-label": "Previous photo", onClick: () => go(index - 1), className: stylex.props(styles.arrow, styles.previous, focusRing.visible)
+                                    .className, children: _jsx(Icon, { name: "chevronLeft" }) }), _jsx(BaseButton, { "aria-label": "Next photo", onClick: () => go(index + 1), className: stylex.props(styles.arrow, styles.next, focusRing.visible)
+                                    .className, children: _jsx(Icon, { name: "chevronRight" }) }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.count), children: _jsx(Text, { variant: "caption", weight: "medium", tone: "inherit", children: `${index + 1} of ${photos.length}` }) })] })) : null] }), hasMany ? (_jsx("div", { ...stylex.props(styles.dots), children: photos.map((photo, at) => (_jsx(BaseButton, { "aria-label": `Show photo ${at + 1} of ${photos.length}`, "aria-current": at === index ? 'true' : undefined, onClick: () => go(at), className: stylex.props(styles.dotTarget, focusRing.visible).className, children: _jsx("span", { ...stylex.props(styles.dot, at === index && styles.dotShown) }) }, photo.id))) })) : null] }));
+}
+const SHOWN = 0.6;
+function prefersReducedMotion() {
+    return (typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+}
+const styles = stylex.create({
+    gallery: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: {
+            default: space.lg,
+            [breakpoints.compact]: space.sm
+        },
+        minWidth: 0
+    },
+    stage: {
+        position: 'relative'
+    },
+    track: {
+        position: 'relative',
+        display: 'flex',
+        gap: space.sm,
+        paddingInline: {
+            default: 0,
+            [breakpoints.compact]: space.lg
+        },
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        overscrollBehaviorX: 'contain',
+        outlineOffset: 0,
+        scrollSnapType: 'x mandatory',
+        scrollPaddingInline: {
+            default: 0,
+            [breakpoints.compact]: space.lg
+        },
+        scrollbarWidth: 'none',
+        borderRadius: {
+            default: radii.lg,
+            [breakpoints.compact]: 0
+        }
+    },
+    slide: {
+        flexShrink: 0,
+        width: '100%',
+        overflow: 'hidden',
+        scrollSnapAlign: 'start',
+        scrollSnapStop: 'always',
+        borderRadius: radii.lg
+    },
+    peeking: {
+        width: {
+            default: '100%',
+            [breakpoints.compact]: `calc(100% - ${space.xxxl})`
+        }
+    },
+    arrow: {
+        position: 'absolute',
+        top: '50%',
+        display: {
+            default: 'none',
+            [breakpoints.canHover]: 'flex'
+        },
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: `calc(${space.xxl} + ${space.sm})`,
+        height: `calc(${space.xxl} + ${space.sm})`,
+        padding: 0,
+        color: colors.primaryForeground,
+        backgroundColor: colors.container,
+        borderStyle: 'none',
+        borderRadius: radii.full,
+        boxShadow: `0 0 0 .5px ${colors.borderDefault}, 0 1px 2px ${colors.borderStrong}, 0 4px 12px -4px ${colors.borderStrong}`,
+        opacity: {
+            default: 0,
+            [stylex.when.ancestor(':hover', galleryMarker)]: 1,
+            ':focus-visible': 1
+        },
+        transform: 'translateY(-50%)',
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'opacity'
+    },
+    previous: {
+        left: space.lg
+    },
+    next: {
+        right: space.lg
+    },
+    count: {
+        position: 'absolute',
+        right: {
+            default: space.lg,
+            [breakpoints.compact]: `calc(${space.xxl} + ${space.md})`
+        },
+        bottom: {
+            default: space.lg,
+            [breakpoints.compact]: space.md
+        },
+        display: 'flex',
+        alignItems: 'center',
+        height: space.xl,
+        paddingInline: `calc(${space.sm} + ${space.xxs})`,
+        color: colors.whiteFill,
+        pointerEvents: 'none',
+        backgroundColor: colors.overlay,
+        borderRadius: radii.full
+    },
+    dots: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: space.xl
+    },
+    dotTarget: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: space.xl,
+        height: space.xl,
+        padding: 0,
+        backgroundColor: 'transparent',
+        borderStyle: 'none',
+        borderRadius: radii.full
+    },
+    dot: {
+        width: `calc(${space.xs} + ${space.xxs})`,
+        height: `calc(${space.xs} + ${space.xxs})`,
+        backgroundColor: colors.borderStrong,
+        borderRadius: radii.full
+    },
+    dotShown: {
+        backgroundColor: colors.primaryForeground
+    }
+});

package/dist/components/Header.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type HeaderProps = {
+    children: ReactNode;
+};
+export declare function Header({ children }: HeaderProps): import("react").JSX.Element;
+export {};

package/dist/components/Header.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useRef, useState } from 'react';
+import { borders, colors, layers, motion } from "../theme/tokens.stylex.js";
+export function Header({ children }) {
+    const top = useRef(null);
+    const [isScrolled, setScrolled] = useState(false);
+    useEffect(() => {
+        const element = top.current;
+        if (element === null)
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => setScrolled(entry !== undefined && !entry.isIntersecting));
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: top, "aria-hidden": "true", ...stylex.props(styles.top) }), _jsx("header", { ...stylex.props(styles.header, isScrolled && styles.scrolled), children: children })] }));
+}
+const styles = stylex.create({
+    top: {
+        display: 'block',
+        height: borders.thin
+    },
+    header: {
+        position: 'sticky',
+        top: 0,
+        zIndex: layers.header,
+        flexShrink: 0,
+        marginTop: `calc(-1 * ${borders.thin})`,
+        backgroundColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: borders.thin,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, border-color'
+    },
+    scrolled: {
+        backgroundImage: `linear-gradient(color-mix(in oklab, ${colors.page} 80%, transparent))`,
+        borderBottomColor: colors.borderDefault,
+        backdropFilter: 'blur(16px)'
+    }
+});

package/dist/components/Image.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
 import { useState } from 'react';
 import { imageSources, transformsOn } from "../media.js";
-import { colors, motion } from "../theme/tokens.stylex.js";
+import { breakpoints, colors, motion } from "../theme/tokens.stylex.js";
 export function Image({ image, sizes, priority = false, aspect, style }) {
     const key = image?.key ?? null;
     const [seen, setSeen] = useState({
@@ -30,7 +30,7 @@ export function Image({ image, sizes, priority = false, aspect, style }) {
                     }
                 }, alt: image.alt, width: sources.width, height: sources.height, loading: priority ? 'eager' : 'lazy', decoding: priority ? 'auto' : 'async', fetchPriority: priority ? 'high' : 'auto', sizes: sizes, srcSet: sources.srcSet, src: sources.src, onLoad: () => setSeen((current) => current.key === key && current.status === 'shown'
                     ? current
-                    : { key, status: 'fading' }), onError: () => setSeen({ key, status: 'failed' }), ...stylex.props(styles.image, status === 'fading' && styles.fading, status === 'shown' && styles.shown) })] }));
+                    : { key, status: 'fading' }), onError: () => setSeen({ key, status: 'failed' }), ...stylex.props(styles.image, styles.zoomable, status === 'fading' && styles.fading, status === 'shown' && styles.shown) })] }));
 }
 const MISSING_ASPECT = 4 / 3;
 function servedWithTransforms() {
@@ -68,9 +68,24 @@ const styles = stylex.create({
         opacity: 1,
         transitionTimingFunction: motion.easeOut,
         transitionDuration: motion.base,
-        transitionProperty: 'opacity'
+        transitionProperty: 'opacity, transform'
     },
     shown: {
         opacity: 1
+    },
+    zoomable: {
+        transform: {
+            default: null,
+            [breakpoints.canHover]: {
+                default: null,
+                [stylex.when.ancestor(':hover')]: {
+                    default: 'scale(1.04)',
+                    [breakpoints.reducedMotion]: 'none'
+                }
+            }
+        },
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.slide,
+        transitionProperty: 'transform'
     }
 });

package/dist/components/icons.d.ts

@@ -32,6 +32,7 @@ declare const builtInIcons: {
     checkCircle: string[];
     alertCircle: string[];
     chevronDown: string;
+    chevronLeft: string;
     chevronRight: string;
     previous: string;
     next: string;

package/dist/components/icons.js

@@ -61,6 +61,7 @@ const builtInIcons = {
         'M11.5 15.75a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0'
     ],
     chevronDown: 'M7 10l5 5 5-5',
+    chevronLeft: 'M14 7l-5 5 5 5',
     chevronRight: 'M10 7l5 5-5 5',
     previous: 'M15 18l-6-6 6-6',
     next: 'M9 18l6-6-6-6',

package/dist/components/interaction.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 export type Interaction = {
-    primitive: 'AppFrame' | 'Button' | 'Card' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'Checkbox' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup' | 'ChoiceGroup' | 'Calendar';
+    primitive: 'AppFrame' | 'Button' | 'Card' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'Checkbox' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup' | 'ChoiceGroup' | 'Calendar' | 'Gallery';
     event: 'click' | 'change' | 'select' | 'open' | 'close' | 'submit' | 'navigate';
     label: string;
     page: string | null;

package/dist/publishWire.d.ts

@@ -176,6 +176,8 @@ export declare const domainSummary: z.ZodObject<{
     }>;
     error: z.ZodNullable<z.ZodString>;
     startedAt: z.ZodString;
+    registeredAt: z.ZodNullable<z.ZodString>;
+    expiresAt: z.ZodNullable<z.ZodString>;
     checkedAt: z.ZodNullable<z.ZodString>;
     finishedAt: z.ZodNullable<z.ZodString>;
 }, z.core.$strip>;
@@ -615,6 +617,8 @@ export declare const publishServices: {
             }>;
             error: z.ZodNullable<z.ZodString>;
             startedAt: z.ZodString;
+            registeredAt: z.ZodNullable<z.ZodString>;
+            expiresAt: z.ZodNullable<z.ZodString>;
             checkedAt: z.ZodNullable<z.ZodString>;
             finishedAt: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>>>>;
@@ -637,6 +641,8 @@ export declare const publishServices: {
             }>;
             error: z.ZodNullable<z.ZodString>;
             startedAt: z.ZodString;
+            registeredAt: z.ZodNullable<z.ZodString>;
+            expiresAt: z.ZodNullable<z.ZodString>;
             checkedAt: z.ZodNullable<z.ZodString>;
             finishedAt: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>>>;
@@ -656,6 +662,8 @@ export declare const publishServices: {
             }>;
             error: z.ZodNullable<z.ZodString>;
             startedAt: z.ZodString;
+            registeredAt: z.ZodNullable<z.ZodString>;
+            expiresAt: z.ZodNullable<z.ZodString>;
             checkedAt: z.ZodNullable<z.ZodString>;
             finishedAt: z.ZodNullable<z.ZodString>;
         }, z.core.$strip>>>;

package/dist/publishWire.js

@@ -217,6 +217,8 @@ export const domainSummary = z.object({
     step: z.enum(domainSteps),
     error: z.string().nullable(),
     startedAt: z.string(),
+    registeredAt: z.string().nullable(),
+    expiresAt: z.string().nullable(),
     checkedAt: z.string().nullable(),
     finishedAt: z.string().nullable()
 });

package/dist/react.d.ts

@@ -24,6 +24,8 @@ export { EmptyState } from './components/EmptyState.tsx';
 export { Form } from './components/Form.tsx';
 export { Icon } from './components/Icon.tsx';
 export { IconButton } from './components/IconButton.tsx';
+export { Gallery } from './components/Gallery.tsx';
+export { Header } from './components/Header.tsx';
 export { Image } from './components/Image.tsx';
 export type { IconName } from './components/icons.ts';
 export { Kbd } from './components/Kbd.tsx';

package/dist/react.js

@@ -22,6 +22,8 @@ export { EmptyState } from "./components/EmptyState.js";
 export { Form } from "./components/Form.js";
 export { Icon } from "./components/Icon.js";
 export { IconButton } from "./components/IconButton.js";
+export { Gallery } from "./components/Gallery.js";
+export { Header } from "./components/Header.js";
 export { Image } from "./components/Image.js";
 export { Kbd } from "./components/Kbd.js";
 export { Link } from "./components/Link.js";

package/dist/rules/lintPlugin.js

@@ -3,6 +3,7 @@ const TOKENS_FILE = 'src/theme/tokens.stylex.ts';
 const APP_THEME_FILE = 'src/theme/theme.ts';
 const APP_COLORS_FILE = 'src/theme/colors.stylex.ts';
 const SCROLL_AREA_FILE = 'src/components/ScrollArea.tsx';
+const GALLERY_FILE = 'src/components/Gallery.tsx';
 const SELECTABLE_FILE = 'src/components/Text.tsx';
 const PRIMITIVE_ELEMENTS = new Set([
     'button',
@@ -65,6 +66,8 @@ const PRIMITIVES = new Set([
     'CopyButton',
     'EmptyState',
     'Form',
+    'Gallery',
+    'Header',
     'Icon',
     'IconButton',
     'Image',
@@ -374,8 +377,9 @@ const hoverUsesHighlight = styleRule((declarations) => declarations
     message: HOVER_USES_HIGHLIGHT_MESSAGE
 })));
 const scrollViewOnly = styleRule((declarations, context) => {
-    if (inFile(context, SCROLL_AREA_FILE))
+    if (inFile(context, SCROLL_AREA_FILE) || inFile(context, GALLERY_FILE)) {
         return [];
+    }
     return declarations
         .filter((d) => SCROLLING_OVERFLOW_PROPERTIES.has(d.property) &&
         ['auto', 'scroll'].includes(stringValue(d.value) ?? ''))

package/dist/theme/tokens.stylex.d.ts

@@ -1,6 +1,10 @@
 import * as stylex from '@stylexjs/stylex';
+export declare const galleryMarker: Readonly<{
+    readonly marker: stylex.StyleXClassNameFor<"marker", symbol>;
+}>;
 export declare const breakpoints: {
     compact: string;
+    canHover: string;
     reducedMotion: string;
     coarsePointer: string;
 };
@@ -147,6 +151,7 @@ export declare const widths: stylex.VarGroup<Readonly<{
     toast: string;
 }>, symbol>;
 export declare const layers: {
+    header: string;
     scrim: string;
     sidebar: string;
     menu: string;

package/dist/theme/tokens.stylex.js

@@ -1,6 +1,8 @@
 import * as stylex from '@stylexjs/stylex';
+export const galleryMarker = stylex.defineMarker();
 export const breakpoints = stylex.defineConsts({
     compact: '@media (max-width: 767px)',
+    canHover: '@media (hover: hover)',
     reducedMotion: '@media (prefers-reduced-motion: reduce)',
     coarsePointer: '@media (pointer: coarse)'
 });
@@ -147,6 +149,7 @@ export const widths = stylex.defineVars({
     toast: '356px'
 });
 export const layers = stylex.defineConsts({
+    header: '10',
     scrim: '15',
     sidebar: '20',
     menu: '20',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trypattern/sdk",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "type": "module",
   "files": [
     "dist",