@trypattern/sdk 0.1.30 → 0.1.32

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

@@ -0,0 +1,8 @@
+import type { Placement } from './Placement.ts';
+type ProgressBarProps = {
+    label: string;
+    value: number;
+    style?: Placement;
+};
+export declare function ProgressBar({ label, value, style }: ProgressBarProps): import("react").JSX.Element;
+export {};

package/dist/components/ProgressBar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { colors, motion, radii, space } from "../theme/tokens.stylex.js";
+export function ProgressBar({ label, value, style }) {
+    const percent = Math.round(Math.min(1, Math.max(0, value)) * 100);
+    return (_jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, ...stylex.props(styles.track, style), children: _jsx("div", { ...stylex.props(styles.fill, fills.width(`${percent}%`)) }) }));
+}
+const styles = stylex.create({
+    track: {
+        display: 'flex',
+        flexShrink: 0,
+        width: '100%',
+        height: space.xs,
+        overflow: 'clip',
+        backgroundColor: colors.component,
+        borderRadius: radii.full
+    },
+    fill: {
+        height: '100%',
+        backgroundColor: colors.brandSolid,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'width'
+    }
+});
+const fills = stylex.create({
+    width: (width) => ({ width })
+});

package/dist/components/TableRow.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type TableRowProps = {
+    label: string;
+    isCurrent?: boolean;
+    onClick: () => void;
+    children: ReactNode;
+};
+export declare function TableRow({ label, isCurrent, onClick, children }: TableRowProps): import("react").JSX.Element;
+export {};

package/dist/components/TableRow.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, space } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
+import { interact } from "./interaction.js";
+export function TableRow({ label, isCurrent = false, onClick, children }) {
+    return (_jsx(BaseButton, { "aria-label": label, "aria-pressed": isCurrent, onClick: () => {
+            interact({ primitive: 'TableRow', event: 'click', label });
+            onClick();
+        }, className: stylex.props(styles.row, isCurrent && styles.current, focusRing.visible, focusRing.inside).className, children: children }));
+}
+const styles = stylex.create({
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: `calc(${space.xxl} + ${space.xs})`,
+        paddingInline: space.xs,
+        color: colors.primaryForeground,
+        textAlign: 'start',
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        },
+        borderBottomColor: {
+            default: colors.borderDefault,
+            ':last-child': colors.transparent
+        },
+        borderBottomStyle: 'solid',
+        borderBottomWidth: borders.thin
+    },
+    current: {
+        backgroundColor: colors.transparentHover
+    }
+});

package/dist/components/icons.d.ts

@@ -28,10 +28,12 @@ declare const builtInIcons: {
     chevronUpDown: string;
     check: string;
     plus: string;
+    image: string[];
     trash: string[];
     checkCircle: string[];
     alertCircle: string[];
     chevronDown: string;
+    chevronLeft: string;
     chevronRight: string;
     previous: string;
     next: string;

package/dist/components/icons.js

@@ -46,6 +46,11 @@ const builtInIcons = {
     chevronUpDown: 'M8 9.5 12 5.5l4 4M8 14.5l4 4 4-4',
     check: 'M5 12.5 9.5 17 19 7.5',
     plus: 'M12 5v14M5 12h14',
+    image: [
+        'M6.25 4.75h11.5a2.5 2.5 0 0 1 2.5 2.5v9.5a2.5 2.5 0 0 1-2.5 2.5H6.25a2.5 2.5 0 0 1-2.5-2.5v-9.5a2.5 2.5 0 0 1 2.5-2.5z',
+        'M7.25 10a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 1 0 -3.5 0',
+        'M4.5 17.5l4.5-4.25 3 2.75 3.5-3.75 4 4'
+    ],
     trash: [
         'M4.75 6.75h14.5',
         'M9.75 6.75v-1a2 2 0 0 1 2-2h.5a2 2 0 0 1 2 2v1',
@@ -61,6 +66,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' | 'FilePicker' | 'TableRow';
     event: 'click' | 'change' | 'select' | 'open' | 'close' | 'submit' | 'navigate';
     label: string;
     page: string | null;

package/dist/files.d.ts

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+export declare const pickedFile: z.ZodObject<{
+    id: z.ZodString;
+    name: z.ZodString;
+    type: z.ZodString;
+    size: z.ZodNumber;
+}, z.core.$strip>;
+export type PickedFile = z.output<typeof pickedFile>;
+export declare function rememberFile(file: File): PickedFile;
+export declare function pickedFileOf(id: string): File | undefined;
+export declare function forgetFile(id: string): void;

package/dist/files.js

@@ -0,0 +1,19 @@
+import { z } from 'zod';
+export const pickedFile = z.object({
+    id: z.string(),
+    name: z.string(),
+    type: z.string(),
+    size: z.number()
+});
+const picked = new Map();
+export function rememberFile(file) {
+    const id = crypto.randomUUID();
+    picked.set(id, file);
+    return { id, name: file.name, type: file.type, size: file.size };
+}
+export function pickedFileOf(id) {
+    return picked.get(id);
+}
+export function forgetFile(id) {
+    picked.delete(id);
+}

package/dist/flows/flows.d.ts

@@ -1,6 +1,7 @@
 import { expect } from 'vitest';
 import type { ApiCall } from '../api.ts';
 import type { AppClass, RunningApp } from '../app.ts';
+import type { Services } from '../services.ts';
 import type { Seed, Tables } from '../table.ts';
 export { expect };
 export { accessFlows } from './accessFlows.ts';
@@ -39,9 +40,13 @@ export type FlowOptions<Call extends string> = {
 };
 export type FlowBinding<Group extends Tables, Command, Snapshot extends {
     readonly path: string;
-}> = {
+}, AppServices extends Services = Record<never, never>> = {
     App: AppClass<Group, RunningApp<Command, Snapshot>>;
+    services?: AppServices;
 };
+type ServiceCallName<Group extends Services> = {
+    [Name in keyof Group & string]: `${Name}.${keyof Group[Name] & string}`;
+}[keyof Group & string];
 export declare function defineFlow<Group extends Tables, Command, Snapshot extends {
     readonly path: string;
-}>({ App }: FlowBinding<Group, Command, Snapshot>): (name: string, steps: readonly FlowStep<Command, Snapshot, ApiCall<Group>>[], { startAt, failing, signedInAs }?: FlowOptions<ApiCall<Group>>) => void;
+}, AppServices extends Services = Record<never, never>>({ App }: FlowBinding<Group, Command, Snapshot, AppServices>): (name: string, steps: readonly FlowStep<Command, Snapshot, ApiCall<Group> | ServiceCallName<AppServices>>[], { startAt, failing, signedInAs }?: FlowOptions<ApiCall<Group> | ServiceCallName<AppServices>>) => void;

package/dist/index.d.ts

@@ -22,7 +22,9 @@ export type { User } from './auth/user.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';
+export type { ServiceClient, ServiceMemory, UploadOptions } from './services.ts';
+export { pickedFile } from './files.ts';
+export type { PickedFile } from './files.ts';
 export { manualClock, realClock } from './clock.ts';
 export type { Clock } from './clock.ts';
 export type { PageOf, PathOf, RouteDefinition } from './routes.ts';

package/dist/index.js

@@ -10,6 +10,7 @@ export { HttpSessionApi, MemorySessionApi } from "./auth/sessionApi.js";
 export { userSchema } from "./auth/user.js";
 export { defineRoutes } from "./routes.js";
 export { ServiceRefused, refused } from "./services.js";
+export { pickedFile } from "./files.js";
 export { manualClock, realClock } from "./clock.js";
 export { Model, Store, action, appPath, defineActions } from "./registered.js";
 export { Cache, Cached } from "./cache.js";