@trypattern/sdk 0.1.9 → 0.1.11

package/dist/components/ScrollArea.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
-export function ScrollArea({ children, style }) {
-    return _jsx("div", { ...stylex.props(styles.scroll, style), children: children });
+export function ScrollArea({ children, style, axis = 'vertical' }) {
+    return (_jsx("div", { ...stylex.props(styles.scroll, axis === 'horizontal' && styles.horizontal, style), children: children }));
 }
 const styles = stylex.create({
     scroll: {
@@ -9,5 +9,10 @@ const styles = stylex.create({
         minHeight: 0,
         overflowY: 'auto',
         overscrollBehavior: 'contain'
+    },
+    horizontal: {
+        height: 'auto',
+        overflowX: 'auto',
+        overflowY: 'hidden'
     }
 });

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' | 'label' | 'body' | 'caption' | 'code';
+    variant?: 'heading' | 'subheading' | 'title' | 'lead' | 'label' | 'body' | 'caption' | 'code';
     tone?: Tone;
     align?: 'start' | 'center' | 'end';
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3';

package/dist/components/Text.js

@@ -23,17 +23,23 @@ const styles = stylex.create({
 const variants = stylex.create({
     heading: {
         fontSize: fontSizes.heading5,
-        fontWeight: fontWeights.semibold,
-        lineHeight: lineHeights.heading5
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.heading5,
+        letterSpacing: '-0.01em'
     },
     subheading: {
         fontSize: fontSizes.heading6,
-        fontWeight: fontWeights.semibold,
+        fontWeight: fontWeights.medium,
         lineHeight: lineHeights.heading6
     },
     title: {
         fontSize: fontSizes.bodyBase,
-        fontWeight: fontWeights.semibold,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.body
+    },
+    lead: {
+        fontSize: fontSizes.bodyBase,
+        fontWeight: fontWeights.normal,
         lineHeight: lineHeights.body
     },
     label: {

package/dist/components/TextField.d.ts

@@ -1,3 +1,4 @@
+import type { IconName } from './icons.ts';
 import type { Placement } from './Placement.ts';
 import type { Size } from './Size.ts';
 type TextFieldProps = {
@@ -18,8 +19,11 @@ type TextFieldProps = {
     inputMode?: 'text' | 'email' | 'numeric' | 'decimal' | 'tel' | 'url' | 'search';
     maxLength?: number;
     pattern?: string;
+    multiline?: boolean;
+    rows?: number;
     size?: Size;
+    icon?: IconName;
     style?: Placement;
 };
-export declare function TextField({ label, isLabelHidden, description, error, onChange, size, style, ...input }: TextFieldProps): import("react").JSX.Element;
+export declare function TextField({ label, isLabelHidden, description, error, onChange, multiline, rows, size, icon, style, ...input }: TextFieldProps): import("react").JSX.Element;
 export {};

package/dist/components/TextField.js

@@ -2,19 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Field } from '@base-ui/react/field';
 import * as stylex from '@stylexjs/stylex';
 import { useRef } from 'react';
-import { borders, colors, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
+import { borders, colors, controls, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
+import { Icon } from "./Icon.js";
 import { controlSizes } from "./controlLook.js";
 import { interact } from "./interaction.js";
-export function TextField({ label, isLabelHidden = false, description, error, onChange, size = 'md', style, ...input }) {
+export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', icon, style, ...input }) {
     const isInvalid = error !== undefined;
     const valueOnFocus = useRef('');
-    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsx(Field.Control, { ...input, "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
-                    valueOnFocus.current = event.currentTarget.value;
-                }, onBlur: (event) => {
-                    if (event.currentTarget.value !== valueOnFocus.current) {
-                        interact({ primitive: 'TextField', event: 'change', label });
-                    }
-                }, className: stylex.props(styles.input, controlSizes[size], isInvalid && styles.invalid, input.disabled === true && styles.disabled).className }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
+    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsxs("div", { ...stylex.props(styles.control), children: [icon === undefined ? null : (_jsx("span", { ...stylex.props(styles.icon), children: _jsx(Icon, { name: icon, tone: "tertiary" }) })), _jsx(Field.Control, { ...input, ...(multiline ? { render: _jsx("textarea", { rows: rows }) } : {}), "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
+                            valueOnFocus.current = event.currentTarget.value;
+                        }, onBlur: (event) => {
+                            if (event.currentTarget.value !== valueOnFocus.current) {
+                                interact({ primitive: 'TextField', event: 'change', label });
+                            }
+                        }, className: stylex.props(styles.input, controlSizes[size], multiline && styles.multiline, multiline && multilinePaddings[size], icon !== undefined && styles.withIcon, isInvalid && styles.invalid, input.disabled === true && styles.disabled).className })] }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
 }
 const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
 const invalidRing = `inset 0 0 0 ${borders.hairline} ${colors.dangerBorderDefault}, 0 0 0 ${borders.thin} ${colors.dangerBorderDefault}, ${shadows.default}`;
@@ -25,6 +26,22 @@ const styles = stylex.create({
         gap: space.xs,
         minWidth: 0
     },
+    control: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    icon: {
+        position: 'absolute',
+        insetBlock: 0,
+        insetInlineStart: space.sm,
+        display: 'flex',
+        alignItems: 'center',
+        pointerEvents: 'none'
+    },
+    withIcon: {
+        paddingInlineStart: `calc(${space.xl} + ${space.xs})`
+    },
     label: {
         fontWeight: fontWeights.medium,
         color: colors.primaryForeground
@@ -49,6 +66,10 @@ const styles = stylex.create({
             color: colors.tertiaryForeground
         }
     },
+    multiline: {
+        height: 'auto',
+        resize: 'vertical'
+    },
     invalid: {
         boxShadow: {
             default: invalidRing,
@@ -75,3 +96,20 @@ const styles = stylex.create({
         color: colors.dangerText
     }
 });
+const multilinePaddings = stylex.create({
+    xs: {
+        paddingBlock: `calc((${controls.heightXs} - ${lineHeights.caption}) / 2)`
+    },
+    sm: {
+        paddingBlock: `calc((${controls.heightSm} - ${lineHeights.bodySm}) / 2)`
+    },
+    md: {
+        paddingBlock: `calc((${controls.heightMd} - ${lineHeights.bodySm}) / 2)`
+    },
+    lg: {
+        paddingBlock: `calc((${controls.heightLg} - ${lineHeights.bodySm}) / 2)`
+    },
+    xl: {
+        paddingBlock: `calc((${controls.heightXl} - ${lineHeights.bodySm}) / 2)`
+    }
+});

package/dist/components/choiceContext.d.ts

@@ -0,0 +1,4 @@
+export declare const ChoiceContext: import("react").Context<{
+    value: string | null;
+}>;
+export declare function useChosen(): string | null;

package/dist/components/choiceContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+export const ChoiceContext = createContext({
+    value: null
+});
+export function useChosen() {
+    return useContext(ChoiceContext).value;
+}

package/dist/components/frame.d.ts

@@ -1,4 +1,6 @@
+export type FrameLook = 'shell' | 'plain';
 export type Frame = {
+    look: FrameLook;
     onToggleSidebar: () => void;
 };
 export declare const FrameContext: import("react").Context<Frame | null>;

package/dist/components/icons.d.ts

@@ -43,6 +43,9 @@ declare const builtInIcons: {
     copy: string[];
     arrowDown: string;
     logOut: string[];
+    today: string;
+    checklist: string;
+    chart: string;
 };
 export declare const builtInIconNames: string[];
 export declare function defineIcons<const Icons extends Record<string, IconDrawing>>(icons: Icons): Icons;

package/dist/components/icons.js

@@ -87,7 +87,10 @@ const builtInIcons = {
     logOut: [
         'M14 4.5H7.5a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2H14',
         'M19.5 12H10M16 8.5l3.5 3.5-3.5 3.5'
-    ]
+    ],
+    today: 'M11.998 3.291V1.768M5.84 18.159L4.763 19.236M11.998 22.233V20.709M19.233 4.765L18.156 5.842M20.707 12H22.23M18.156 18.159L19.233 19.236M1.766 12H3.289M4.763 4.765L5.84 5.842M15.71 8.288C17.761 10.338 17.761 13.662 15.71 15.712C13.66 17.763 10.336 17.763 8.286 15.712C6.235 13.662 6.235 10.338 8.286 8.288C10.336 6.238 13.66 6.238 15.71 8.288Z',
+    checklist: 'M11.75 16.25H20.25M11.75 7.75H20.25M3.75 8.625L5.417 9.75L8.75 5.25M3.75 17.625L5.417 18.75L8.75 14.25',
+    chart: 'M2.75 4.75V17.25C2.75 18.355 3.645 19.25 4.75 19.25H21.25M6.75 15.25L10 12C10.552 11.448 11.448 11.448 12 12C12.552 12.552 13.448 12.552 14 12L18.75 7.25M14.75 6.75H19.25V11.25'
 };
 const builtIns = new Map(Object.entries(builtInIcons));
 let appIcons = new Map();

package/dist/components/interaction.d.ts

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

package/dist/entityStore.d.ts

@@ -30,6 +30,7 @@ export type EntityDeps<T extends Entity> = {
     api: EntityApi<T>;
     cache: Cached<readonly T[]>;
     writes: Writes;
+    initial?: readonly T[] | undefined;
 };
 export declare class WriteRefused extends Error {
     readonly outcome: Exclude<WriteOutcome, 'saved' | 'failed'>;

package/dist/entityStore.js

@@ -54,7 +54,7 @@ export class EntityStore extends StoreBase {
     #generation = 0;
     #loading;
     initialState() {
-        const cached = this.deps.cache.read();
+        const cached = this.deps.initial ?? this.deps.cache.read();
         return {
             status: cached === undefined ? 'idle' : 'ready',
             items: cached ?? [],

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export type { MemoryApiOptions } from './memoryApi.ts';
 export { StoreBase, keepEqualParts, snapshotsOf } from './store.ts';
 export type { Snapshots, StoreClass, StoreConfig } from './store.ts';
 export type { Json, Persisted, StateOf, StateSpec } from './state.ts';
+export { imageSources, media, mediaPath } from './media.ts';
+export type { ImageSources, Media, MediaImage } from './media.ts';
 export { defineTables } from './table.ts';
 export type { Access, Columns, Fields, Level, PublicRow, Row, Seed, Table, TableDefinition, TableOf, Tables, Value, Writes } from './table.ts';
 export { HttpTableApi, MemoryTableApi, PublicTableStore, TableStore, httpTables, memoryTables, publicStoreName, tableCalls } from './tables.ts';

package/dist/index.js

@@ -16,6 +16,7 @@ export { EntityStore, WriteRefused, entityCalls } from "./entityStore.js";
 export { Gate } from "./gate.js";
 export { MemoryEntityApi, MemoryServer } from "./memoryApi.js";
 export { StoreBase, keepEqualParts, snapshotsOf } from "./store.js";
+export { imageSources, media, mediaPath } from "./media.js";
 export { defineTables } from "./table.js";
 export { HttpTableApi, MemoryTableApi, PublicTableStore, TableStore, httpTables, memoryTables, publicStoreName, tableCalls } from "./tables.js";
 export { ModelBase, command, commandsOf, createModels, modelSnapshotsOf, parseMessage, sendMessage, splitType } from "./model.js";

package/dist/media.d.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod';
+import type { Row } from './table.ts';
+export declare const media: import("./table.ts").TableOf<"media", {
+    readonly columns: {
+        readonly key: z.ZodString;
+        readonly width: z.ZodNumber;
+        readonly height: z.ZodNumber;
+        readonly placeholder: z.ZodNullable<z.ZodString>;
+        readonly alt: z.ZodString;
+        readonly type: z.ZodString;
+        readonly bytes: z.ZodNumber;
+    };
+    readonly access: {
+        readonly read: "anyone";
+        readonly create: "server";
+        readonly update: "admin";
+        readonly delete: "admin";
+    };
+    readonly writes: "confirmed";
+}>;
+export type Media = Row<typeof media>;
+export type MediaImage = Pick<Media, 'key' | 'width' | 'height' | 'placeholder' | 'alt'>;
+export declare const MEDIA_LIMIT_BYTES: number;
+export declare const IMAGE_WIDTHS: readonly [320, 640, 960, 1280, 1920];
+export declare function mediaPath(key: string): string;
+export declare function transformsOn(hostname: string): boolean;
+export type ImageSources = {
+    src: string;
+    srcSet: string | undefined;
+    width: number;
+    height: number;
+};
+export declare function imageSources(image: MediaImage, { aspect, transforms }: {
+    aspect?: number | undefined;
+    transforms: boolean;
+}): ImageSources;

package/dist/media.js

@@ -0,0 +1,74 @@
+import { z } from 'zod';
+import { patternTable } from "./table.js";
+export const media = patternTable('media', {
+    columns: {
+        key: z.string(),
+        width: z.number().int(),
+        height: z.number().int(),
+        placeholder: z.string().nullable(),
+        alt: z.string().min(1),
+        type: z.string(),
+        bytes: z.number().int()
+    },
+    access: {
+        read: 'anyone',
+        create: 'server',
+        update: 'admin',
+        delete: 'admin'
+    },
+    writes: 'confirmed'
+});
+export const MEDIA_LIMIT_BYTES = 10 * 1024 * 1024;
+export const IMAGE_WIDTHS = [320, 640, 960, 1280, 1920];
+const QUALITY = 82;
+const FALLBACK_WIDTH = 960;
+const LOCAL_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]', '::1']);
+export function mediaPath(key) {
+    return `/media/${key}`;
+}
+export function transformsOn(hostname) {
+    return !LOCAL_HOSTS.has(hostname) && !hostname.endsWith('.localhost');
+}
+function largestWidth(image, aspect) {
+    return Math.max(1, Math.floor(aspect === undefined
+        ? image.width
+        : Math.min(image.width, image.height * aspect)));
+}
+function transformed(key, width, aspect) {
+    const options = [
+        `width=${width}`,
+        ...(aspect === undefined
+            ? []
+            : [`height=${Math.max(1, Math.round(width / aspect))}`]),
+        `quality=${QUALITY}`,
+        'format=auto',
+        `fit=${aspect === undefined ? 'scale-down' : 'cover'}`
+    ];
+    return `/cdn-cgi/image/${options.join(',')}${mediaPath(key)}`;
+}
+export function imageSources(image, { aspect, transforms }) {
+    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),
+            srcSet: undefined,
+            width: largest,
+            height
+        };
+    }
+    const widths = [
+        ...IMAGE_WIDTHS.filter((width) => width < largest),
+        largest
+    ].filter((width, index, all) => all.indexOf(width) === index);
+    return {
+        src: transformed(image.key, Math.min(FALLBACK_WIDTH, largest), aspect),
+        srcSet: widths
+            .map((width) => `${transformed(image.key, width, aspect)} ${width}w`)
+            .join(', '),
+        width: largest,
+        height
+    };
+}

package/dist/publishWire.d.ts

@@ -20,7 +20,9 @@ export declare const UPLOAD: {
     readonly compatibilityDate: "compatibilityDate";
     readonly sdkVersion: "sdkVersion";
     readonly message: "message";
+    readonly runWorkerFirst: "runWorkerFirst";
 };
+export declare function workerFirstPaths(text: string | undefined): readonly string[];
 export declare const PUBLISH_MESSAGE_LIMIT = 100;
 export declare function publishMessage(text: string): string | null;
 export declare const publishStep: z.ZodEnum<{

package/dist/publishWire.js

@@ -91,8 +91,28 @@ export const UPLOAD = {
     source: 'source/',
     compatibilityDate: 'compatibilityDate',
     sdkVersion: 'sdkVersion',
-    message: 'message'
+    message: 'message',
+    runWorkerFirst: 'runWorkerFirst'
 };
+const WORKER_FIRST_PATH = /^!?\/[\w.~\-/*]{0,100}$/;
+const WORKER_FIRST_LIMIT = 32;
+const ALWAYS_WORKER_FIRST = ['/api/*', '/media/*'];
+export function workerFirstPaths(text) {
+    let declared;
+    try {
+        declared = JSON.parse(text ?? '[]');
+    }
+    catch {
+        declared = [];
+    }
+    const listed = declared === true ? ['/*'] : declared;
+    const extra = (Array.isArray(listed) ? listed : [])
+        .slice(0, WORKER_FIRST_LIMIT)
+        .filter((path) => typeof path === 'string' &&
+        WORKER_FIRST_PATH.test(path) &&
+        !ALWAYS_WORKER_FIRST.some((kept) => path.startsWith(`!${kept.slice(0, -1)}`)));
+    return [...new Set([...ALWAYS_WORKER_FIRST, ...extra])];
+}
 export const PUBLISH_MESSAGE_LIMIT = 100;
 export function publishMessage(text) {
     const firstLine = (text.split('\n')[0] ?? '').replaceAll(/\s+/g, ' ').trim();

package/dist/react.d.ts

@@ -6,6 +6,9 @@ export { Avatar } from './components/Avatar.tsx';
 export { Badge } from './components/Badge.tsx';
 export { Button } from './components/Button.tsx';
 export { Card } from './components/Card.tsx';
+export { Checkbox } from './components/Checkbox.tsx';
+export { Choice } from './components/Choice.tsx';
+export { ChoiceGroup } from './components/ChoiceGroup.tsx';
 export { CommandMenu } from './components/CommandMenu.tsx';
 export { CommandPalette } from './components/CommandPalette.tsx';
 export type { CommandMenuItem } from './components/CommandMenu.tsx';
@@ -18,6 +21,7 @@ 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 { Image } from './components/Image.tsx';
 export type { IconName } from './components/icons.ts';
 export { Kbd } from './components/Kbd.tsx';
 export { Link } from './components/Link.tsx';
@@ -48,3 +52,4 @@ export { Text } from './components/Text.tsx';
 export { TextField } from './components/TextField.tsx';
 export { Toaster } from './components/Toaster.tsx';
 export { Tooltip } from './components/Tooltip.tsx';
+export type { MediaImage } from './media.ts';

package/dist/react.js

@@ -6,6 +6,9 @@ export { Avatar } from "./components/Avatar.js";
 export { Badge } from "./components/Badge.js";
 export { Button } from "./components/Button.js";
 export { Card } from "./components/Card.js";
+export { Checkbox } from "./components/Checkbox.js";
+export { Choice } from "./components/Choice.js";
+export { ChoiceGroup } from "./components/ChoiceGroup.js";
 export { CommandMenu } from "./components/CommandMenu.js";
 export { CommandPalette } from "./components/CommandPalette.js";
 export { Content } from "./components/Content.js";
@@ -17,6 +20,7 @@ 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 { Image } from "./components/Image.js";
 export { Kbd } from "./components/Kbd.js";
 export { Link } from "./components/Link.js";
 export { ListRow } from "./components/ListRow.js";

package/dist/rules/checkApiRouting.js

@@ -2,7 +2,7 @@ import { request } from 'node:http';
 import { createServer as createNetServer } from 'node:net';
 import { createServer, preview } from 'vite';
 const API_ROUTES_REACH_THE_WORKER = 'Browser navigations to /api/* (pasted links, OAuth callbacks) must reach the Hono worker, not the single-page app. Cloudflare serves index.html to navigations without running the worker unless wrangler.jsonc keeps "run_worker_first": ["/api/*"] under "assets". Without it, an OAuth callback lands on the app and loops.';
-const APP_ROUTES_SERVE_THE_APP = 'Browser navigations outside /api/ must serve the app (index.html) so deep links like /issues open the screen. Keep "not_found_handling": "single-page-application" in wrangler.jsonc and keep run_worker_first limited to /api/*.';
+const APP_ROUTES_SERVE_THE_APP = 'Browser navigations outside /api/ must serve the app (index.html) so deep links like /issues open the screen. Keep "not_found_handling": "single-page-application" in wrangler.jsonc and keep run_worker_first to /api/* (plus /media/*, and the public page paths, /sitemap.xml and /robots.txt for an app with pages).';
 const DEV_SIGN_IN_ONLY_IN_DEV = 'POST /api/auth/dev-sign-in signs anyone in without Google, so it must exist in the dev server (app sign-in, flows and screenshots use it) and must not exist in the production build. createServer in @trypattern/sdk mounts it only under import.meta.env.DEV.';
 const probes = [
     {

package/dist/rules/lintPlugin.js

@@ -1,4 +1,4 @@
-import { ACTIONS_WHERE_MESSAGE, COMPONENT_FIRST_MESSAGE, COMPONENT_FILE_NAME_MESSAGE, DARK_MODE_IN_TOKENS_MESSAGE, DEV_ONLY_SIGN_IN_MESSAGE, EXPLICIT_ACCESS_MESSAGE, USE_BREAKPOINTS_MESSAGE, HOVER_USES_HIGHLIGHT_MESSAGE, NO_CLASSNAME_STRINGS_MESSAGE, NO_COMMENTS_MESSAGE, NO_INTERACTIVE_TRANSITION_MESSAGE, NO_POINTER_CURSOR_MESSAGE, NO_ROUTE_DATA_APIS_MESSAGE, ROUTES_UNDER_APP_LAYOUT_MESSAGE, SCROLL_VIEW_ONLY_MESSAGE, SELECTABLE_ONLY_MESSAGE, STATE_VIA_HOOKS_MESSAGE, MODEL_BY_NAME_MESSAGE, MODEL_MEMBERS_MESSAGE, PURE_ACTIONS_MESSAGE, PURE_GETTERS_MESSAGE, USE_MODEL_WHERE_MESSAGE, CLASSES_NOT_FACTORIES_MESSAGE, STORES_IN_APP_MESSAGE, TYPED_STYLE_PROP_MESSAGE, USE_COLOR_TOKEN_MESSAGE, USE_FONT_TOKEN_MESSAGE, USE_LINK_MESSAGE, USE_PRIMITIVES_MESSAGE, NO_WIDGET_ROLES_MESSAGE, NO_CLICK_ON_STATIC_MESSAGE, PRIMITIVE_NAMES_MESSAGE, USE_SPACE_TOKENS_MESSAGE, USE_SIZE_TOKENS_MESSAGE, TEXT_VIA_TEXT_MESSAGE, TEXT_ELEMENTS_MESSAGE, LOOSE_TEXT_MESSAGE, COMPOSE_IN_SCREENS_MESSAGE, NO_HOVER_IN_APP_MESSAGE } from "./messages.js";
+import { ACTIONS_WHERE_MESSAGE, COMPONENT_FIRST_MESSAGE, COMPONENT_FILE_NAME_MESSAGE, DARK_MODE_IN_TOKENS_MESSAGE, DEV_ONLY_SIGN_IN_MESSAGE, EXPLICIT_ACCESS_MESSAGE, USE_BREAKPOINTS_MESSAGE, HOVER_USES_HIGHLIGHT_MESSAGE, NO_CLASSNAME_STRINGS_MESSAGE, NO_COMMENTS_MESSAGE, NO_INTERACTIVE_TRANSITION_MESSAGE, NO_POINTER_CURSOR_MESSAGE, NO_ROUTE_DATA_APIS_MESSAGE, ROUTES_UNDER_APP_LAYOUT_MESSAGE, SCROLL_VIEW_ONLY_MESSAGE, SELECTABLE_ONLY_MESSAGE, STATE_VIA_HOOKS_MESSAGE, MODEL_BY_NAME_MESSAGE, MODEL_MEMBERS_MESSAGE, PURE_ACTIONS_MESSAGE, PURE_GETTERS_MESSAGE, USE_MODEL_WHERE_MESSAGE, CLASSES_NOT_FACTORIES_MESSAGE, STORES_IN_APP_MESSAGE, TYPED_STYLE_PROP_MESSAGE, USE_COLOR_TOKEN_MESSAGE, USE_FONT_TOKEN_MESSAGE, USE_LINK_MESSAGE, USE_PRIMITIVES_MESSAGE, USE_IMAGE_MESSAGE, NO_WIDGET_ROLES_MESSAGE, NO_CLICK_ON_STATIC_MESSAGE, PRIMITIVE_NAMES_MESSAGE, USE_SPACE_TOKENS_MESSAGE, USE_SIZE_TOKENS_MESSAGE, TEXT_VIA_TEXT_MESSAGE, TEXT_ELEMENTS_MESSAGE, LOOSE_TEXT_MESSAGE, COMPOSE_IN_SCREENS_MESSAGE, NO_HOVER_IN_APP_MESSAGE } from "./messages.js";
 const TOKENS_FILE = 'src/theme/tokens.stylex.ts';
 const APP_THEME_FILE = 'src/theme/theme.ts';
 const SCROLL_AREA_FILE = 'src/components/ScrollArea.tsx';
@@ -10,7 +10,8 @@ const PRIMITIVE_ELEMENTS = new Set([
     'select',
     'dialog',
     'progress',
-    'meter'
+    'meter',
+    'img'
 ]);
 const WIDGET_ROLES = new Set([
     'button',
@@ -50,6 +51,9 @@ const PRIMITIVES = new Set([
     'Badge',
     'Button',
     'Card',
+    'Checkbox',
+    'Choice',
+    'ChoiceGroup',
     'CommandMenu',
     'CommandPalette',
     'Content',
@@ -61,6 +65,7 @@ const PRIMITIVES = new Set([
     'Form',
     'Icon',
     'IconButton',
+    'Image',
     'Kbd',
     'Link',
     'ListRow',
@@ -939,8 +944,12 @@ const usePrimitives = rule((context) => ({
     JSXOpeningElement(node) {
         if (!SRC_FILE.test(context.filename))
             return;
-        if (PRIMITIVE_ELEMENTS.has(elementName(node) ?? '')) {
-            context.report({ loc: node.loc, message: USE_PRIMITIVES_MESSAGE });
+        const name = elementName(node) ?? '';
+        if (PRIMITIVE_ELEMENTS.has(name)) {
+            context.report({
+                loc: node.loc,
+                message: name === 'img' ? USE_IMAGE_MESSAGE : USE_PRIMITIVES_MESSAGE
+            });
         }
     }
 }));

package/dist/rules/messages.d.ts

@@ -34,6 +34,7 @@ export declare const PURE_GETTERS_MESSAGE = "A getter works an answer out from t
 export declare const ACTIONS_WHERE_MESSAGE = "Menu entries and shortcuts are actions, and actions live only in src/actions/: one file per thing they act on, `export const issueActions = defineActions(({ page, models }) => [action({ id: 'issues.next', label: 'Next issue', keys: ['j'], send: [{ type: 'issueDetail.openNext' }] })])`, listed in src/actions/index.ts. If a person can see it in a menu or press a key for it, it is an action; what it does is a command on a model, and an action only sends commands. Models never build actions.";
 export declare const PURE_ACTIONS_MESSAGE = "An actions file works its entries out from `page` and `models` (each model's state and answers) and nothing else, because Pattern reruns it only when something it read changes, and flows compare the result. It never waits, never uses `this`, never reads the clock or randomness, and imports only types from src/models/, src/stores/ and src/components/. If an entry needs something a model does not answer yet, add a getter to that model.";
 export declare const USE_PRIMITIVES_MESSAGE = "Write <Button>, <IconButton>, <TextField>, <Select>, <Switch> or <Dialog> from @trypattern/sdk/react instead of this element. The primitives carry the focus, keyboard, disabled, pending and error behaviour and the design system's look, so a screen only says what the control does. If no primitive fits, the gap is in the SDK; do not build around it here.";
+export declare const USE_IMAGE_MESSAGE = "Write <Image image={photo} sizes=\"\u2026\" /> from @trypattern/sdk/react instead of <img>. Photos live in the media table (app media add photo.jpg --alt \"\u2026\"); Image reserves their size, picks the right width for the screen, shows a blurred placeholder while loading and a neutral block when one is missing. Never hard-code an image URL.";
 export declare const NO_WIDGET_ROLES_MESSAGE = "This role rebuilds a primitive by hand. Use the component from @trypattern/sdk/react with that behaviour (Button, Switch, Menu, Tooltip, Dialog, Divider, CommandMenu): it already has the role, the keyboard handling and the focus management, and it will keep working when the SDK is upgraded.";
 export declare const NO_CLICK_ON_STATIC_MESSAGE = "A click on a <div> or <span> cannot be reached from the keyboard or by a screen reader. Make it a <Button variant=\"transparent\"> or an <IconButton> from @trypattern/sdk/react, or a <Link> if it goes somewhere.";
 export declare const PRIMITIVE_NAMES_MESSAGE = "{name} is a primitive in @trypattern/sdk/react; a second one with the same name would drift from it. Import the SDK's, and if yours adds something (a fixed icon, a confirm step) name it for what it does, like DeleteIssue{name}, and render the SDK {name} inside.";

package/dist/rules/messages.js

@@ -34,6 +34,7 @@ export const PURE_GETTERS_MESSAGE = 'A getter works an answer out from this.stat
 export const ACTIONS_WHERE_MESSAGE = "Menu entries and shortcuts are actions, and actions live only in src/actions/: one file per thing they act on, `export const issueActions = defineActions(({ page, models }) => [action({ id: 'issues.next', label: 'Next issue', keys: ['j'], send: [{ type: 'issueDetail.openNext' }] })])`, listed in src/actions/index.ts. If a person can see it in a menu or press a key for it, it is an action; what it does is a command on a model, and an action only sends commands. Models never build actions.";
 export const PURE_ACTIONS_MESSAGE = "An actions file works its entries out from `page` and `models` (each model's state and answers) and nothing else, because Pattern reruns it only when something it read changes, and flows compare the result. It never waits, never uses `this`, never reads the clock or randomness, and imports only types from src/models/, src/stores/ and src/components/. If an entry needs something a model does not answer yet, add a getter to that model.";
 export const USE_PRIMITIVES_MESSAGE = "Write <Button>, <IconButton>, <TextField>, <Select>, <Switch> or <Dialog> from @trypattern/sdk/react instead of this element. The primitives carry the focus, keyboard, disabled, pending and error behaviour and the design system's look, so a screen only says what the control does. If no primitive fits, the gap is in the SDK; do not build around it here.";
+export const USE_IMAGE_MESSAGE = 'Write <Image image={photo} sizes="…" /> from @trypattern/sdk/react instead of <img>. Photos live in the media table (app media add photo.jpg --alt "…"); Image reserves their size, picks the right width for the screen, shows a blurred placeholder while loading and a neutral block when one is missing. Never hard-code an image URL.';
 export const NO_WIDGET_ROLES_MESSAGE = 'This role rebuilds a primitive by hand. Use the component from @trypattern/sdk/react with that behaviour (Button, Switch, Menu, Tooltip, Dialog, Divider, CommandMenu): it already has the role, the keyboard handling and the focus management, and it will keep working when the SDK is upgraded.';
 export const NO_CLICK_ON_STATIC_MESSAGE = 'A click on a <div> or <span> cannot be reached from the keyboard or by a screen reader. Make it a <Button variant="transparent"> or an <IconButton> from @trypattern/sdk/react, or a <Link> if it goes somewhere.';
 export const PRIMITIVE_NAMES_MESSAGE = "{name} is a primitive in @trypattern/sdk/react; a second one with the same name would drift from it. Import the SDK's, and if yours adds something (a fixed icon, a confirm step) name it for what it does, like DeleteIssue{name}, and render the SDK {name} inside.";

package/dist/schema.d.ts

@@ -1,4 +1,6 @@
 export { call, defineServices } from './services.ts';
 export type { CallInput, CallReply, ServiceCall, ServiceMemory, Services } from './services.ts';
+export { media } from './media.ts';
+export type { Media, MediaImage } from './media.ts';
 export { defineTables } from './table.ts';
 export type { Access, Columns, Fields, Level, PublicRow, Row, Seed, Table, TableDefinition, TableOf, Tables, Value, Writes } from './table.ts';

package/dist/schema.js

@@ -1,2 +1,3 @@
 export { call, defineServices } from "./services.js";
+export { media } from "./media.js";
 export { defineTables } from "./table.js";

package/dist/server/createServer.d.ts

@@ -1,11 +1,13 @@
 import { Hono } from 'hono';
 import type { Tables } from '../table.ts';
 import type { ServerBindings, ServerEnv } from './env.ts';
-export declare function createServer<Group extends Tables, Bindings extends ServerBindings = ServerBindings>({ tables, admins, routes }: {
+import type { Pages } from './pages.ts';
+export declare function createServer<Group extends Tables, Bindings extends ServerBindings = ServerBindings>({ tables, admins, routes, pages }: {
     tables: Group;
     admins: readonly string[];
     routes?: Hono<ServerEnv<Bindings>>;
-}): import("hono/hono-base").HonoBase<ServerEnv, (((({
+    pages?: Pages;
+}): import("hono/hono-base").HonoBase<ServerEnv, import("hono/types").BlankSchema | import("hono/types").MergeSchemaPath<(((({
     "/api/health": {
         $get: {
             input: {};
@@ -483,4 +485,4 @@ export declare function createServer<Group extends Tables, Bindings extends Serv
             status: import("hono/utils/http-status").ContentfulStatusCode;
         };
     };
-}, "/api/tables">, "/api", "/api/me">;
+}, "/api/tables">, "/">, "/", "/">;