@trypattern/sdk 0.1.32 → 0.1.33

package/dist/components/FilePreview.d.ts

@@ -0,0 +1,10 @@
+import type { PickedFile } from '../files.ts';
+import type { Placement } from './Placement.ts';
+type FilePreviewProps = {
+    file: PickedFile;
+    alt: string;
+    aspect?: number;
+    style?: Placement;
+};
+export declare function FilePreview({ file, alt, aspect, style }: FilePreviewProps): import("react").JSX.Element;
+export {};

package/dist/components/FilePreview.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useState } from 'react';
+import { pickedFileOf } from "../files.js";
+import { colors } from "../theme/tokens.stylex.js";
+export function FilePreview({ file, alt, aspect = 1, style }) {
+    const [shown, setShown] = useState(null);
+    useEffect(() => {
+        const picked = pickedFileOf(file.id);
+        if (picked === undefined || !picked.type.startsWith('image/'))
+            return;
+        const url = URL.createObjectURL(picked);
+        setShown({ id: file.id, url });
+        return () => URL.revokeObjectURL(url);
+    }, [file.id]);
+    const url = shown?.id === file.id ? shown.url : null;
+    return (_jsx("span", { ...stylex.props(styles.frame, styles.ratio(aspect), style), children: url === null ? null : (_jsx("img", { alt: alt, src: url, ...stylex.props(styles.image) })) }));
+}
+const styles = stylex.create({
+    frame: {
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        overflow: 'hidden',
+        backgroundColor: colors.component
+    },
+    ratio: (ratio) => ({
+        aspectRatio: String(ratio)
+    }),
+    image: {
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+    }
+});

package/dist/components/Image.d.ts

@@ -5,7 +5,8 @@ type ImageProps = {
     sizes: string;
     priority?: boolean;
     aspect?: number;
+    origin?: string;
     style?: Placement;
 };
-export declare function Image({ image, sizes, priority, aspect, style }: ImageProps): import("react").JSX.Element;
+export declare function Image({ image, sizes, priority, aspect, origin, style }: ImageProps): import("react").JSX.Element;
 export {};

package/dist/components/Image.js

@@ -3,7 +3,7 @@ import * as stylex from '@stylexjs/stylex';
 import { useState } from 'react';
 import { imageSources, transformsOn } from "../media.js";
 import { breakpoints, colors, motion } from "../theme/tokens.stylex.js";
-export function Image({ image, sizes, priority = false, aspect, style }) {
+export function Image({ image, sizes, priority = false, aspect, origin, style }) {
     const key = image?.key ?? null;
     const [seen, setSeen] = useState({
         key,
@@ -19,7 +19,10 @@ export function Image({ image, sizes, priority = false, aspect, style }) {
     }
     const sources = imageSources(image, {
         aspect,
-        transforms: servedWithTransforms()
+        transforms: origin === undefined
+            ? servedWithTransforms()
+            : transformsOn(new URL(origin).hostname),
+        ...(origin === undefined ? {} : { origin: new URL(origin).origin })
     });
     return (_jsxs("span", { ...stylex.props(styles.frame, styles.ratio(ratio), style), children: [image.placeholder === null ? null : (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.placeholder(image.placeholder)) })), _jsx("img", { ref: (element) => {
                     if (status === 'loading' &&

package/dist/components/Menu.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import * as stylex from '@stylexjs/stylex';
 import { colors, controls, layers, space } from "../theme/tokens.stylex.js";
-import { controlSizes, focusRing, transparentLook } from "./controlLook.js";
+import { buttonCorners, controlSizes, focusRing, transparentLook } from "./controlLook.js";
 import { MenuItems } from "./MenuItems.js";
 import { Popup } from "./Popup.js";
 export function Menu({ trigger, items, size = 'md', style }) {
-    return (_jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { className: (state) => stylex.props(styles.trigger, controlSizes[size], triggerPaddings[size], transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.triggerText, focusRing.visible, style).className, children: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseMenu.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "menu", isOpen: state.open, transitionStatus: state.transitionStatus })), children: _jsx(MenuItems, { items: items, primitive: "Menu" }) }) }) })] }));
+    return (_jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { className: (state) => stylex.props(styles.trigger, controlSizes[size], buttonCorners[size], triggerPaddings[size], transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.triggerText, focusRing.visible, style).className, children: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseMenu.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "menu", isOpen: state.open, transitionStatus: state.transitionStatus })), children: _jsx(MenuItems, { items: items, primitive: "Menu" }) }) }) })] }));
 }
 const styles = stylex.create({
     trigger: {

package/dist/components/SegmentedControl.js

@@ -4,13 +4,13 @@ import { RadioGroup } from '@base-ui/react/radio-group';
 import * as stylex from '@stylexjs/stylex';
 import { borders, colors, fontWeights, motion, radii } from "../theme/tokens.stylex.js";
 import { interact } from "./interaction.js";
-import { controlSizes, focusRing } from "./controlLook.js";
+import { buttonCorners, controlSizes, focusRing } from "./controlLook.js";
 export function SegmentedControl({ label, value, options, size = 'md', disabled = false, onChange, style }) {
     const index = Math.max(0, options.findIndex((option) => option.value === value));
     return (_jsxs(RadioGroup, { "aria-label": label, value: value, disabled: disabled, onValueChange: (next) => {
             interact({ primitive: 'SegmentedControl', event: 'change', label });
             onChange(next);
-        }, className: stylex.props(styles.group, style).className, children: [_jsx("span", { ...stylex.props(styles.indicator(index, options.length)) }), options.map((option) => (_jsx(Radio.Root, { value: option.value, className: (state) => stylex.props(styles.option, controlSizes[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled, focusRing.visible).className, children: option.label }, option.value)))] }));
+        }, className: stylex.props(styles.group, style).className, children: [_jsx("span", { ...stylex.props(styles.indicator(index, options.length)) }), options.map((option) => (_jsx(Radio.Root, { value: option.value, className: (state) => stylex.props(styles.option, controlSizes[size], buttonCorners[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled, focusRing.visible).className, children: option.label }, option.value)))] }));
 }
 const styles = stylex.create({
     group: {

package/dist/flows/browser.js

@@ -4,6 +4,7 @@ export const viewports = {
     compact: { width: 390, height: 844, deviceScaleFactor: 2 }
 };
 export const viewportNames = ['desktop', 'compact'];
+const STAND_IN_PHOTO = '<svg xmlns="http://www.w3.org/2000/svg" width="4" height="3"><rect width="4" height="3" fill="#d9d4c8"/></svg>';
 const QUIET_NETWORK_MS = 250;
 const SETTLE_TIMEOUT_MS = 10_000;
 const HOOK_TIMEOUT_MS = 10_000;
@@ -122,6 +123,12 @@ export async function openApp(browser, baseUrl, path, viewport, signedInAs, memo
             });
         }, { ...memory, signedInAs });
     }
+    await context.route((url) => url.origin !== new URL(baseUrl).origin, (route) => route.request().resourceType() === 'image'
+        ? route.fulfill({
+            contentType: 'image/svg+xml',
+            body: STAND_IN_PHOTO
+        })
+        : route.continue());
     const page = await context.newPage();
     const problems = [];
     recordProblems(page, problems);

package/dist/media.d.ts

@@ -40,7 +40,8 @@ export type ImageSources = {
     width: number;
     height: number;
 };
-export declare function imageSources(image: MediaImage, { aspect, transforms }: {
+export declare function imageSources(image: MediaImage, { aspect, transforms, origin }: {
     aspect?: number | undefined;
     transforms: boolean;
+    origin?: string;
 }): ImageSources;

package/dist/media.js

@@ -46,14 +46,14 @@ function transformed(key, width, aspect) {
     ];
     return `/cdn-cgi/image/${options.join(',')}${mediaPath(key)}`;
 }
-export function imageSources(image, { aspect, transforms }) {
+export function imageSources(image, { aspect, transforms, origin = '' }) {
     const largest = largestWidth(image, aspect);
     const height = aspect === undefined
         ? image.height
         : Math.max(1, Math.round(largest / aspect));
     if (!transforms) {
         return {
-            src: mediaPath(image.key),
+            src: `${origin}${mediaPath(image.key)}`,
             srcSet: undefined,
             width: largest,
             height
@@ -64,9 +64,9 @@ export function imageSources(image, { aspect, transforms }) {
         largest
     ].filter((width, index, all) => all.indexOf(width) === index);
     return {
-        src: transformed(image.key, Math.min(FALLBACK_WIDTH, largest), aspect),
+        src: `${origin}${transformed(image.key, Math.min(FALLBACK_WIDTH, largest), aspect)}`,
         srcSet: widths
-            .map((width) => `${transformed(image.key, width, aspect)} ${width}w`)
+            .map((width) => `${origin}${transformed(image.key, width, aspect)} ${width}w`)
             .join(', '),
         width: largest,
         height

package/dist/react.d.ts

@@ -25,6 +25,7 @@ export { Form } from './components/Form.tsx';
 export { Icon } from './components/Icon.tsx';
 export { IconButton } from './components/IconButton.tsx';
 export { FilePicker } from './components/FilePicker.tsx';
+export { FilePreview } from './components/FilePreview.tsx';
 export { Gallery } from './components/Gallery.tsx';
 export { Header } from './components/Header.tsx';
 export { Image } from './components/Image.tsx';

package/dist/react.js

@@ -23,6 +23,7 @@ export { Form } from "./components/Form.js";
 export { Icon } from "./components/Icon.js";
 export { IconButton } from "./components/IconButton.js";
 export { FilePicker } from "./components/FilePicker.js";
+export { FilePreview } from "./components/FilePreview.js";
 export { Gallery } from "./components/Gallery.js";
 export { Header } from "./components/Header.js";
 export { Image } from "./components/Image.js";

package/dist/rules/lintPlugin.js

@@ -66,6 +66,7 @@ const PRIMITIVES = new Set([
     'CopyButton',
     'EmptyState',
     'FilePicker',
+    'FilePreview',
     'Form',
     'Gallery',
     'Header',

package/dist/server/tables.js

@@ -100,6 +100,9 @@ export function seedSql(tables, seed) {
     });
     return [...users, ...rowsSql].join('\n');
 }
+function startedAt(secondsAgo) {
+    return `strftime('%Y-%m-%dT%H:%M:%fZ', 'now', '-${secondsAgo} seconds')`;
+}
 export function starterSql(tables, rows) {
     return Object.values(tables)
         .flatMap((table) => {
@@ -108,7 +111,11 @@ export function starterSql(tables, rows) {
             return [];
         const keys = ['id', 'createdAt', ...Object.keys(table.columns)];
         const values = listed
-            .map((row) => `(${keys.map((key) => sqlLiteral((row[key] ?? null))).join(', ')})`)
+            .map((row, index) => `(${keys
+            .map((key) => key === 'createdAt'
+            ? startedAt(listed.length - 1 - index)
+            : sqlLiteral((row[key] ?? null)))
+            .join(', ')})`)
             .join(',\n  ');
         return [
             `INSERT OR IGNORE INTO ${snakeCase(table.name)} (${keys.map(snakeCase).join(', ')}) VALUES\n  ${values};`

package/package.json

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