@trypattern/sdk 0.1.11 → 0.1.13

package/dist/components/ChoiceGroup.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 import * as stylex from '@stylexjs/stylex';
 import { Children, isValidElement } from 'react';
-import { space } from "../theme/tokens.stylex.js";
 import { ChoiceContext } from "./choiceContext.js";
 import { interact, textOf } from "./interaction.js";
-export function ChoiceGroup({ label, value, onChange, children, style }) {
+import { gaps } from "./spacing.js";
+export function ChoiceGroup({ label, value, onChange, children, gap = 'sm', style }) {
     return (_jsx(ChoiceContext, { value: { value }, children: _jsx(BaseRadioGroup, { "aria-label": label, value: value, onValueChange: (next) => {
                 if (typeof next !== 'string')
                     return;
@@ -15,7 +15,7 @@ export function ChoiceGroup({ label, value, onChange, children, style }) {
                     label: labelOf(children, next)
                 });
                 onChange(next);
-            }, className: stylex.props(styles.group, style).className, children: children }) }));
+            }, className: stylex.props(styles.group, gaps[gap], style).className, children: children }) }));
 }
 function labelOf(children, value) {
     for (const child of Children.toArray(children)) {
@@ -37,7 +37,6 @@ const styles = stylex.create({
     group: {
         display: 'flex',
         flexWrap: 'wrap',
-        gap: space.sm,
         alignItems: 'stretch',
         minWidth: 0
     }

package/dist/components/ContinueWithGoogle.d.ts

@@ -0,0 +1,11 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+type ContinueWithGoogleProps = {
+    onClick: () => void;
+    size?: Size;
+    disabled?: boolean;
+    isPending?: boolean;
+    style?: Placement;
+};
+export declare function ContinueWithGoogle({ onClick, size, disabled, isPending, style }: ContinueWithGoogleProps): import("react").JSX.Element;
+export {};

package/dist/components/ContinueWithGoogle.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonBody } from "./ButtonBody.js";
+export function ContinueWithGoogle({ onClick, size = 'md', disabled = false, isPending = false, style }) {
+    return (_jsx(ButtonBody, { variant: "secondary", icon: "google", isIconPinned: true, size: size, disabled: disabled, isPending: isPending, onClick: onClick, ...(style === undefined ? {} : { style }), children: "Continue with Google" }));
+}

package/dist/components/Dialog.d.ts

@@ -4,7 +4,7 @@ type DialogProps = {
     isOpen: boolean;
     onOpenChange: (isOpen: boolean) => void;
     placement?: 'center' | 'top';
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     children: ReactNode;
 };
 export declare function Dialog({ label, isOpen, onOpenChange, placement, size, children }: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -45,6 +45,7 @@ const styles = stylex.create({
     frame: {
         display: 'flex',
         flexDirection: 'column',
+        maxHeight: 'calc(100dvh - 2rem)',
         overflow: 'hidden',
         color: colors.primaryForeground,
         backgroundColor: colors.componentOnSunken,
@@ -77,5 +78,6 @@ const hiddenPlacements = stylex.create({
 const widths = stylex.create({
     sm: { maxWidth: 'min(400px, calc(100% - 2rem))' },
     md: { maxWidth: 'min(560px, calc(100% - 2rem))' },
-    lg: { maxWidth: 'min(720px, calc(100% - 2rem))' }
+    lg: { maxWidth: 'min(720px, calc(100% - 2rem))' },
+    xl: { maxWidth: 'min(800px, calc(100% - 2rem))' }
 });

package/dist/components/Icon.js

@@ -5,7 +5,7 @@ import { shapeOf } from "./icons.js";
 import { tones } from "./tones.js";
 export function Icon({ name, size = 'md', tone = 'inherit', weight = 'regular' }) {
     const shape = shapeOf(name);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: weight === 'light' ? '1.5' : '2', strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.paths.map((path) => (_jsx("path", { d: path }, path))) }));
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: weight === 'light' ? '1.5' : '2', strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.paths.map((path, index) => (_jsx("path", { d: path, fill: shape.colors?.[index] }, path))) }));
 }
 const styles = stylex.create({
     icon: {

package/dist/components/ListRow.js

@@ -7,7 +7,8 @@ import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
 export function ListRow({ to, href, onClick, isMuted = false, isCurrent = false, size = 'md', leading, trailing, children }) {
     const content = (_jsxs(_Fragment, { children: [leading, _jsx("span", { ...stylex.props(styles.main), children: children }), trailing === undefined ? null : (_jsx("span", { ...stylex.props(styles.trailing), children: trailing }))] }));
-    const look = stylex.props(styles.row, (to !== undefined || href !== undefined || onClick !== undefined) &&
+    const look = stylex.props(styles.row, size === 'sm' &&
+        (to !== undefined || href !== undefined || onClick !== undefined) &&
         styles.interactive, isMuted && styles.muted, isCurrent && styles.current, size === 'sm' && styles.small, size === 'lg' && styles.large, focusRing.visible, focusRing.inside);
     const report = () => {
         interact({

package/dist/components/RadioGroup.d.ts

@@ -12,7 +12,8 @@ type RadioGroupProps<Value extends string> = {
     value: Value | null;
     options: readonly RadioOption<Value>[];
     onChange: (value: Value) => void;
+    size?: 'md' | 'lg';
     style?: Placement;
 };
-export declare function RadioGroup<Value extends string>({ label, value, options, onChange, style }: RadioGroupProps<Value>): import("react").JSX.Element;
+export declare function RadioGroup<Value extends string>({ label, value, options, onChange, size, style }: RadioGroupProps<Value>): import("react").JSX.Element;
 export {};

package/dist/components/RadioGroup.js

@@ -6,7 +6,7 @@ import { borders, colors, iconSizes, motion, radii, shadows, space } from "../th
 import { focusRing } from "./controlLook.js";
 import { interact } from "./interaction.js";
 import { Text } from "./Text.js";
-export function RadioGroup({ label, value, options, onChange, style }) {
+export function RadioGroup({ label, value, options, onChange, size = 'md', style }) {
     return (_jsx(BaseRadioGroup, { "aria-label": label, value: value, onValueChange: (next) => {
             const chosen = options.find((option) => option.value === next);
             if (chosen === undefined)
@@ -17,7 +17,8 @@ export function RadioGroup({ label, value, options, onChange, style }) {
                 label: chosen.label
             });
             onChange(chosen.value);
-        }, className: stylex.props(styles.group, style).className, children: options.map((option) => (_jsxs("label", { ...stylex.props(styles.row, option.isDisabled === true && styles.rowDisabled), children: [_jsx(BaseRadio.Root, { value: option.value, disabled: option.isDisabled === true, "aria-label": option.label, className: (state) => stylex.props(styles.dot, state.checked ? styles.dotOn : styles.dotOff, focusRing.visible).className, children: _jsx(BaseRadio.Indicator, { className: stylex.props(styles.mark).className }) }), _jsx("span", { ...stylex.props(styles.content), children: option.content ?? (_jsx(Text, { tone: option.isDisabled === true ? 'tertiary' : 'primary', isTruncated: true, children: option.label })) }), option.trailing === undefined ? null : (_jsx("span", { ...stylex.props(styles.trailing), children: option.trailing }))] }, option.value))) }));
+        }, className: stylex.props(styles.group, size === 'lg' && styles.groupLarge, style)
+            .className, children: options.map((option) => (_jsxs("label", { ...stylex.props(styles.row, size === 'lg' && styles.rowLarge, option.isDisabled === true && styles.rowDisabled), children: [_jsx(BaseRadio.Root, { value: option.value, disabled: option.isDisabled === true, "aria-label": option.label, className: (state) => stylex.props(styles.dot, state.checked ? styles.dotOn : styles.dotOff, focusRing.visible).className, children: _jsx(BaseRadio.Indicator, { className: stylex.props(styles.mark).className }) }), _jsx("span", { ...stylex.props(styles.content), children: option.content ?? (_jsx(Text, { variant: size === 'lg' ? 'lead' : 'body', tone: option.isDisabled === true ? 'tertiary' : 'primary', isTruncated: true, children: option.label })) }), option.trailing === undefined ? null : (_jsx("span", { ...stylex.props(styles.trailing), children: option.trailing }))] }, option.value))) }));
 }
 const styles = stylex.create({
     group: {
@@ -42,6 +43,13 @@ const styles = stylex.create({
         },
         borderTopWidth: borders.hairline
     },
+    groupLarge: {
+        borderRadius: radii.xxl
+    },
+    rowLarge: {
+        paddingBlock: space.lg,
+        paddingInline: `calc(${space.md} + ${space.xxs})`
+    },
     rowDisabled: {
         color: colors.tertiaryForeground
     },

package/dist/components/Text.d.ts

@@ -3,7 +3,7 @@ import type { Placement } from './Placement.ts';
 import type { Tone } from './tones.ts';
 type TextProps = {
     children: ReactNode;
-    variant?: 'heading' | 'subheading' | 'title' | 'lead' | 'label' | 'body' | 'caption' | 'code';
+    variant?: 'hero' | 'display' | 'section' | 'heading' | 'subheading' | 'title' | 'lead' | 'intro' | 'label' | 'body' | 'caption' | 'code';
     tone?: Tone;
     align?: 'start' | 'center' | 'end';
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3';

package/dist/components/Text.js

@@ -1,6 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 import { createElement } from 'react';
-import { breakpoints, fontSizes, fontWeights, fonts, lineHeights } from "../theme/tokens.stylex.js";
+import { breakpoints, fontSizes, fontWeights, fonts, lineHeights, trackings } from "../theme/tokens.stylex.js";
 import { tones } from "./tones.js";
 export function Text({ children, variant = 'body', tone = 'inherit', align, as = 'span', isTruncated = false, isSelectable = false, style }) {
     return createElement(as, stylex.props(as !== 'span' && styles.block, variants[variant], tones[tone], align !== undefined && alignments[align], isTruncated && styles.truncated, isSelectable && styles.selectable, style), children);
@@ -21,11 +21,47 @@ const styles = stylex.create({
     }
 });
 const variants = stylex.create({
+    hero: {
+        fontSize: {
+            default: fontSizes.heading1,
+            [breakpoints.compact]: fontSizes.heading2
+        },
+        fontWeight: fontWeights.medium,
+        lineHeight: {
+            default: lineHeights.heading1,
+            [breakpoints.compact]: lineHeights.heading2
+        },
+        letterSpacing: trackings.hero
+    },
+    display: {
+        fontSize: {
+            default: fontSizes.heading2,
+            [breakpoints.compact]: fontSizes.heading3
+        },
+        fontWeight: fontWeights.medium,
+        lineHeight: {
+            default: lineHeights.heading2,
+            [breakpoints.compact]: lineHeights.heading3
+        },
+        letterSpacing: trackings.display
+    },
+    section: {
+        fontSize: {
+            default: fontSizes.heading3,
+            [breakpoints.compact]: fontSizes.heading5
+        },
+        fontWeight: fontWeights.medium,
+        lineHeight: {
+            default: lineHeights.heading3,
+            [breakpoints.compact]: lineHeights.heading5
+        },
+        letterSpacing: trackings.section
+    },
     heading: {
         fontSize: fontSizes.heading5,
         fontWeight: fontWeights.medium,
         lineHeight: lineHeights.heading5,
-        letterSpacing: '-0.01em'
+        letterSpacing: trackings.heading
     },
     subheading: {
         fontSize: fontSizes.heading6,
@@ -42,6 +78,11 @@ const variants = stylex.create({
         fontWeight: fontWeights.normal,
         lineHeight: lineHeights.body
     },
+    intro: {
+        fontSize: fontSizes.bodyLg,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.bodyLg
+    },
     label: {
         fontSize: {
             default: fontSizes.bodySm,

package/dist/components/calendarDates.d.ts

@@ -0,0 +1,14 @@
+export declare function monthOf(date: string): string;
+export declare function addDays(date: string, days: number): string;
+export declare function addMonths(date: string, months: number): string;
+export declare function daysIn(month: string): number;
+export declare function weekdayIndex(date: string): number;
+export declare function weeksOf(month: string): readonly (readonly (string | null)[])[];
+export declare function localToday(): string;
+export declare function monthTitle(month: string, locale: string | undefined): string;
+export declare function dayLabel(date: string, locale: string | undefined): string;
+export declare function dayNumber(date: string, locale: string | undefined): string;
+export declare function weekdayNames(locale: string | undefined): readonly {
+    short: string;
+    long: string;
+}[];

package/dist/components/calendarDates.js

@@ -0,0 +1,84 @@
+const DAY_MS = 24 * 60 * 60 * 1000;
+function utc(date) {
+    return new Date(`${date}T00:00:00Z`);
+}
+function isoDate(time) {
+    return new Date(time).toISOString().slice(0, 10);
+}
+export function monthOf(date) {
+    return date.slice(0, 7);
+}
+export function addDays(date, days) {
+    return isoDate(utc(date).getTime() + days * DAY_MS);
+}
+export function addMonths(date, months) {
+    const start = utc(date);
+    const year = start.getUTCFullYear();
+    const month = start.getUTCMonth() + months;
+    const last = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+    return isoDate(Date.UTC(year, month, Math.min(start.getUTCDate(), last)));
+}
+export function daysIn(month) {
+    const start = utc(`${month}-01`);
+    return new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth() + 1, 0)).getUTCDate();
+}
+export function weekdayIndex(date) {
+    return (utc(date).getUTCDay() + 6) % 7;
+}
+export function weeksOf(month) {
+    const first = `${month}-01`;
+    const cells = [
+        ...Array.from({ length: weekdayIndex(first) }, () => null),
+        ...Array.from({ length: daysIn(month) }, (_, index) => addDays(first, index))
+    ];
+    const weeks = [];
+    for (let index = 0; index < cells.length; index += 7) {
+        weeks.push(cells.slice(index, index + 7));
+    }
+    return weeks;
+}
+export function localToday() {
+    const now = new Date();
+    return [
+        String(now.getFullYear()).padStart(4, '0'),
+        String(now.getMonth() + 1).padStart(2, '0'),
+        String(now.getDate()).padStart(2, '0')
+    ].join('-');
+}
+export function monthTitle(month, locale) {
+    return new Intl.DateTimeFormat(locale, {
+        month: 'long',
+        year: 'numeric',
+        timeZone: 'UTC'
+    }).format(utc(`${month}-01`));
+}
+export function dayLabel(date, locale) {
+    return new Intl.DateTimeFormat(locale, {
+        dateStyle: 'full',
+        timeZone: 'UTC'
+    }).format(utc(date));
+}
+export function dayNumber(date, locale) {
+    return new Intl.DateTimeFormat(locale, {
+        day: 'numeric',
+        timeZone: 'UTC'
+    }).format(utc(date));
+}
+export function weekdayNames(locale) {
+    const monday = '2024-01-01';
+    const short = new Intl.DateTimeFormat(locale, {
+        weekday: 'short',
+        timeZone: 'UTC'
+    });
+    const long = new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+        timeZone: 'UTC'
+    });
+    return Array.from({ length: 7 }, (_, index) => {
+        const day = utc(addDays(monday, index));
+        return {
+            short: [...short.format(day)].slice(0, 2).join(''),
+            long: long.format(day)
+        };
+    });
+}

package/dist/components/controlLook.js

@@ -1,44 +1,44 @@
 import * as stylex from '@stylexjs/stylex';
-import { borders, colors, controls, fontSizes, lineHeights, motion, radii } from "../theme/tokens.stylex.js";
+import { borders, colors, controls, motion, radii } from "../theme/tokens.stylex.js";
 export const controlSizes = stylex.create({
     xs: {
         gap: controls.gapXs,
         height: controls.heightXs,
         paddingInline: controls.paddingXs,
-        fontSize: fontSizes.captionLg,
-        lineHeight: lineHeights.caption,
+        fontSize: controls.fontSizeXs,
+        lineHeight: controls.lineHeightXs,
         borderRadius: radii.sm
     },
     sm: {
         gap: controls.gapSm,
         height: controls.heightSm,
         paddingInline: controls.paddingSm,
-        fontSize: fontSizes.bodySm,
-        lineHeight: lineHeights.bodySm,
+        fontSize: controls.fontSizeSm,
+        lineHeight: controls.lineHeightSm,
         borderRadius: radii.md
     },
     md: {
         gap: controls.gapMd,
         height: controls.heightMd,
         paddingInline: controls.paddingMd,
-        fontSize: fontSizes.bodySm,
-        lineHeight: lineHeights.bodySm,
+        fontSize: controls.fontSizeMd,
+        lineHeight: controls.lineHeightMd,
         borderRadius: radii.md
     },
     lg: {
         gap: controls.gapLg,
         height: controls.heightLg,
         paddingInline: controls.paddingLg,
-        fontSize: fontSizes.bodySm,
-        lineHeight: lineHeights.bodySm,
+        fontSize: controls.fontSizeLg,
+        lineHeight: controls.lineHeightLg,
         borderRadius: radii.lg
     },
     xl: {
         gap: controls.gapXl,
         height: controls.heightXl,
         paddingInline: controls.paddingXl,
-        fontSize: fontSizes.bodySm,
-        lineHeight: lineHeights.bodySm,
+        fontSize: controls.fontSizeXl,
+        lineHeight: controls.lineHeightXl,
         borderRadius: radii.lg
     }
 });

package/dist/components/icons.d.ts

@@ -2,6 +2,7 @@ import type { AppIconName } from '../registered.ts';
 type FilledDrawing = {
     readonly fill: string | readonly string[];
     readonly rule?: 'evenodd';
+    readonly colors?: readonly string[];
 };
 export type IconDrawing = string | readonly string[] | FilledDrawing;
 export type IconName = keyof typeof builtInIcons | AppIconName;
@@ -12,6 +13,10 @@ declare const builtInIcons: {
     sun: {
         fill: string[];
     };
+    google: {
+        fill: string[];
+        colors: string[];
+    };
     moon: {
         fill: string;
     };
@@ -28,6 +33,8 @@ declare const builtInIcons: {
     alertCircle: string[];
     chevronDown: string;
     chevronRight: string;
+    previous: string;
+    next: string;
     search: string[];
     panelLeft: string[];
     more: {
@@ -54,9 +61,11 @@ export declare function shapeOf(name: IconName): {
     paths: readonly string[];
     isFilled: boolean;
     rule?: never;
+    colors?: never;
 } | {
     paths: string[];
     isFilled: boolean;
     rule: "evenodd" | undefined;
+    colors: readonly string[] | undefined;
 };
 export {};

package/dist/components/icons.js

@@ -23,6 +23,15 @@ const builtInIcons = {
             'M7.75736 7.75736C10.1005 5.41421 13.8995 5.41421 16.2426 7.75736C18.5858 10.1005 18.5858 13.8995 16.2426 16.2426C13.8995 18.5858 10.1005 18.5858 7.75736 16.2426C5.41421 13.8995 5.41421 10.1005 7.75736 7.75736Z'
         ]
     },
+    google: {
+        fill: [
+            'M22.5 12.3c0-.8-.1-1.5-.2-2.2H12v4.2h5.9a5 5 0 0 1-2.2 3.3v2.7h3.5c2.1-1.9 3.3-4.7 3.3-8z',
+            'M12 23c3 0 5.5-1 7.3-2.7l-3.5-2.7c-1 .7-2.3 1.1-3.8 1.1-2.9 0-5.4-2-6.3-4.7H2.1v2.8A11 11 0 0 0 12 23z',
+            'M5.7 14c-.2-.7-.4-1.4-.4-2s.1-1.4.4-2V7.2H2.1a11 11 0 0 0 0 9.7L5.7 14z',
+            'M12 5.4c1.6 0 3.1.6 4.2 1.7l3.1-3.1A11 11 0 0 0 2.1 7.2L5.7 10c.9-2.7 3.4-4.6 6.3-4.6z'
+        ],
+        colors: ['#4285F4', '#34A853', '#FBBC05', '#EA4335']
+    },
     moon: {
         fill: 'M12.0517 3.59971C12.2712 3.28123 12.2873 2.86472 12.0931 2.53021C11.8989 2.19569 11.5292 2.00315 11.1438 2.03581C6.0214 2.46985 2 6.76372 2 11.9979C2 17.5197 6.47632 21.996 11.9981 21.996C17.2324 21.996 21.5264 17.9745 21.9602 12.8519C21.9929 12.4664 21.8003 12.0968 21.4658 11.9026C21.1313 11.7084 20.7148 11.7246 20.3963 11.9441C19.4302 12.61 18.2602 12.9998 16.9961 12.9998C13.6824 12.9998 10.9961 10.3135 10.9961 6.99976C10.9961 5.73577 11.3858 4.56582 12.0517 3.59971Z'
     },
@@ -53,6 +62,8 @@ const builtInIcons = {
     ],
     chevronDown: 'M7 10l5 5 5-5',
     chevronRight: 'M10 7l5 5-5 5',
+    previous: 'M15 18l-6-6 6-6',
+    next: 'M9 18l6-6-6-6',
     search: ['M4.5 11a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0 -13 0', 'M16 16l4 4'],
     panelLeft: [
         'M6.5 4.5h11a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3h-11a3 3 0 0 1 -3 -3v-9a3 3 0 0 1 3 -3Z',
@@ -107,7 +118,12 @@ export function shapeOf(name) {
         return { paths: [drawing], isFilled: false };
     if (isPathList(drawing))
         return { paths: drawing, isFilled: false };
-    return { paths: [drawing.fill].flat(), isFilled: true, rule: drawing.rule };
+    return {
+        paths: [drawing.fill].flat(),
+        isFilled: true,
+        rule: drawing.rule,
+        colors: drawing.colors
+    };
 }
 function isPathList(drawing) {
     return Array.isArray(drawing);

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';
+    primitive: 'AppFrame' | 'Button' | 'Card' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'Checkbox' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup' | 'ChoiceGroup' | 'Calendar';
     event: 'click' | 'change' | 'select' | 'open' | 'close' | 'submit' | 'navigate';
     label: string;
     page: string | null;

package/dist/flows/browser.d.ts

@@ -31,4 +31,10 @@ export type AppPage = {
     captureAt: (viewport: ViewportName) => Promise<string>;
     close: () => Promise<void>;
 };
-export declare function openApp(browser: Browser, baseUrl: string, path: string, viewport: ViewportName, signedInAs: string | null, seed?: object, admins?: readonly string[], world?: unknown): Promise<AppPage>;
+export type MemoryRun = {
+    seed: object;
+    admins: readonly string[];
+    title: string;
+    world: unknown;
+};
+export declare function openApp(browser: Browser, baseUrl: string, path: string, viewport: ViewportName, signedInAs: string | null, memory?: MemoryRun): Promise<AppPage>;

package/dist/flows/browser.js

@@ -59,15 +59,27 @@ function watchNetwork(page) {
         }
     };
 }
+function isMissingPage(response, page) {
+    const request = response.request();
+    return (request.isNavigationRequest() &&
+        request.frame() === page.mainFrame() &&
+        response.status() >= 400 &&
+        response.status() < 500);
+}
 function recordProblems(page, problems) {
+    const missingPages = new Set();
     const record = (problem) => {
         if (!problems.includes(problem))
             problems.push(problem);
     };
     page.on('console', (message) => {
-        if (message.type() === 'error') {
-            record(`console error: ${message.text()}`);
+        if (message.type() !== 'error')
+            return;
+        if (missingPages.has(message.location().url) &&
+            message.text().startsWith('Failed to load resource')) {
+            return;
         }
+        record(`console error: ${message.text()}`);
     });
     page.on('pageerror', (error) => {
         record(`uncaught page error: ${error.message}`);
@@ -76,12 +88,16 @@ function recordProblems(page, problems) {
         record(`request failed: ${request.method()} ${request.url()} (${request.failure()?.errorText ?? 'unknown'})`);
     });
     page.on('response', (response) => {
+        if (isMissingPage(response, page)) {
+            missingPages.add(response.url());
+            return;
+        }
         if (response.status() >= 400) {
             record(`request failed: ${response.request().method()} ${response.url()} (HTTP ${response.status()})`);
         }
     });
 }
-export async function openApp(browser, baseUrl, path, viewport, signedInAs, seed, admins = [], world = {}) {
+export async function openApp(browser, baseUrl, path, viewport, signedInAs, memory) {
     const { width, height, deviceScaleFactor } = viewports[viewport];
     const context = await browser.newContext({
         viewport: { width, height },
@@ -89,20 +105,22 @@ export async function openApp(browser, baseUrl, path, viewport, signedInAs, seed
         reducedMotion: 'reduce',
         colorScheme: 'light'
     });
-    if (signedInAs !== null) {
+    if (memory === undefined && signedInAs !== null) {
         const signIn = await context.request.post(new URL('/api/auth/dev-sign-in', baseUrl).href, { data: { email: signedInAs } });
         if (!signIn.ok()) {
             throw new Error(`Dev sign-in as ${signedInAs} failed (HTTP ${signIn.status()}): ${await signIn.text()}`);
         }
     }
-    if (seed !== undefined) {
+    if (memory !== undefined) {
         await context.addInitScript((value) => {
             Object.assign(globalThis, {
                 patternSeed: value.seed,
                 patternAdmins: value.admins,
-                patternWorld: value.world
+                patternTitle: value.title,
+                patternWorld: value.world,
+                patternSignedInAs: value.signedInAs
             });
-        }, { seed, admins, world });
+        }, { ...memory, signedInAs });
     }
     const page = await context.newPage();
     const problems = [];

package/dist/flows/flowBrowser.d.ts

@@ -1,4 +1,4 @@
-import type { ViewportName } from './browser.ts';
+import type { MemoryRun, ViewportName } from './browser.ts';
 export type VisualFlowSettings = {
     url: string;
     wsEndpoint: string;
@@ -11,7 +11,7 @@ declare module 'vitest' {
     }
 }
 export declare function closeFlowBrowser(): Promise<void>;
-export declare function openFlowPage(settings: VisualFlowSettings, viewport: ViewportName, startAt: string, signedInAs: string | null, seed: object, admins: readonly string[], world: unknown): Promise<{
+export declare function openFlowPage(settings: VisualFlowSettings, viewport: ViewportName, startAt: string, signedInAs: string | null, memory: MemoryRun): Promise<{
     send: (command: unknown) => Promise<void>;
     snapshot: () => Promise<unknown>;
     hold: (call: string) => Promise<void>;

package/dist/flows/flowBrowser.js

@@ -5,9 +5,9 @@ export async function closeFlowBrowser() {
     browser = undefined;
     await (await connected)?.close();
 }
-export async function openFlowPage(settings, viewport, startAt, signedInAs, seed, admins, world) {
+export async function openFlowPage(settings, viewport, startAt, signedInAs, memory) {
     browser ??= connectChrome(settings.wsEndpoint);
-    const app = await openApp(await browser, settings.url, startAt, viewport, signedInAs, seed, admins, world);
+    const app = await openApp(await browser, settings.url, startAt, viewport, signedInAs, memory);
     return {
         send: app.dispatch,
         snapshot: app.snapshot,

package/dist/flows/flows.js

@@ -59,6 +59,12 @@ async function runSteps(name, steps, run) {
         }
     }
 }
+function leadingHolds(steps) {
+    const firstOther = steps.findIndex((step) => !('hold' in step));
+    return steps
+        .slice(0, firstOther === -1 ? steps.length : firstOther)
+        .flatMap((step) => ('hold' in step ? [step.hold] : []));
+}
 function withTestParams(path, failing, held) {
     const params = new URLSearchParams([
         ['memory', ''],
@@ -133,8 +139,8 @@ export function defineFlow({ App }) {
         for (const viewport of visual.viewports) {
             test(`${name} [${viewport}]`, async () => {
                 const { openFlowPage } = await import("./flowBrowser.js");
-                const held = new Set();
-                const page = await openFlowPage(visual, viewport, withTestParams(startAt, failing, held), signedInAs, seed, admins, startingWorld);
+                const held = new Set(leadingHolds(steps));
+                const page = await openFlowPage(visual, viewport, withTestParams(startAt, failing, held), signedInAs, { seed, admins, title, world: startingWorld });
                 let stepFailure;
                 try {
                     await runSteps(name, steps, {

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export { defineApp } from './app.ts';
+export { Bookings, bookings } from './bookingsStore.ts';
+export type { BookingsWorld } from './bookingsMemory.ts';
+export type { AppBlock } from './blocks.ts';
 export { ActionsStore, bindActions, rankActions } from './actions.ts';
 export type { Action, ActionsBuilder } from './actions.ts';
 export { startApp } from './start.ts';
@@ -16,7 +19,7 @@ export { HttpSessionApi, MemorySessionApi } from './auth/sessionApi.ts';
 export type { EmailCodeOutcome, SessionApi, SessionCall } from './auth/sessionApi.ts';
 export { userSchema } from './auth/user.ts';
 export type { User } from './auth/user.ts';
-export type { AppClass, AppDefinition, AppDependencies, AppSnapshotShape, DataRouter, ModelServicesOf, NavigateCommand, PressKeyCommand, PublicStores, PlainJsonModel, RunningApp, StoreClasses, StoreInstances, StoresOf, TableStores } from './app.ts';
+export type { AppClass, AppDefinition, AppDependencies, AppSnapshotShape, BlockStores, CheckedBlocks, DataRouter, ModelServicesOf, NavigateCommand, PressKeyCommand, PublicStores, PlainJsonModel, RunningApp, StoreClasses, StoreInstances, StoresOf, TableStores } from './app.ts';
 export { defineRoutes } from './routes.ts';
 export { ServiceRefused, refused } from './services.ts';
 export type { ServiceClient, ServiceMemory } from './services.ts';

package/dist/index.js

@@ -1,4 +1,5 @@
 export { defineApp } from "./app.js";
+export { Bookings, bookings } from "./bookingsStore.js";
 export { ActionsStore, bindActions, rankActions } from "./actions.js";
 export { startApp } from "./start.js";
 export { appearance } from "./appearance.js";