@trypattern/sdk 0.1.11 → 0.1.13

package/dist/server/media.js

@@ -1,11 +1,13 @@
+import { eq } from 'drizzle-orm';
 import { drizzle } from 'drizzle-orm/d1';
 import { MEDIA_LIMIT_BYTES, media, mediaPath } from "../media.js";
 import { isHeic, readImageHeader } from "./imageHeader.js";
-import { sqlTable } from "./tables.js";
+import { column, sqlTable } from "./tables.js";
 const FORM_OVERHEAD_BYTES = 64 * 1024;
 const ALT_LIMIT = 500;
 const KEY = /^images\/[0-9a-f]{16}\.(?:jpg|png|webp|gif|avif)$/;
-const IMMUTABLE = 'public, max-age=31536000, immutable';
+const MEDIA_ID = /^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$/;
+export const IMMUTABLE = 'public, max-age=31536000, immutable';
 const PLACEHOLDER = {
     width: 24,
     quality: 50,
@@ -18,6 +20,7 @@ const NO_ALT = 'Describe this photo for someone who can’t see it: alt is requi
 const TOO_LARGE = 'Photos can be up to 10 MB.';
 const HEIC = 'This is an iPhone HEIC photo, which browsers can’t show. Send it as a JPEG instead.';
 const UNKNOWN_TYPE = 'Photos must be JPEG, PNG, WebP, GIF or AVIF.';
+const BAD_ID = 'id must be 1 to 64 letters, numbers, hyphens or underscores.';
 const target = sqlTable(media);
 function hex(bytes) {
     return [...new Uint8Array(bytes)]
@@ -55,6 +58,25 @@ async function placeholderOf(c, key) {
         return null;
     }
 }
+export async function photoFacts(buffer) {
+    if (buffer.byteLength > MEDIA_LIMIT_BYTES) {
+        return { problem: TOO_LARGE, status: 413 };
+    }
+    const bytes = new Uint8Array(buffer);
+    if (isHeic(bytes))
+        return { problem: HEIC, status: 415 };
+    const header = readImageHeader(bytes);
+    if (header === undefined)
+        return { problem: UNKNOWN_TYPE, status: 415 };
+    const digest = await crypto.subtle.digest('SHA-256', buffer);
+    return {
+        key: `images/${hex(digest).slice(0, 16)}.${header.extension}`,
+        type: header.type,
+        width: header.width,
+        height: header.height,
+        bytes: bytes.byteLength
+    };
+}
 export async function uploadMedia(c) {
     const viewer = c.get('viewer');
     if (viewer === null)
@@ -71,6 +93,7 @@ export async function uploadMedia(c) {
     const form = await c.req.formData().catch(() => undefined);
     const file = form?.get('file');
     const alt = form?.get('alt');
+    const id = form?.get('id') ?? null;
     if (!(file instanceof File)) {
         return c.json({ error: 'Send the photo as the form field "file".' }, 400);
     }
@@ -80,31 +103,38 @@ export async function uploadMedia(c) {
     if (alt.trim().length > ALT_LIMIT) {
         return c.json({ error: `Keep alt to ${ALT_LIMIT} characters.` }, 400);
     }
+    if (id !== null && (typeof id !== 'string' || !MEDIA_ID.test(id))) {
+        return c.json({ error: BAD_ID }, 400);
+    }
     if (file.size > MEDIA_LIMIT_BYTES)
         return c.json({ error: TOO_LARGE }, 413);
     const buffer = await file.arrayBuffer();
-    const bytes = new Uint8Array(buffer);
-    if (isHeic(bytes))
-        return c.json({ error: HEIC }, 415);
-    const header = readImageHeader(bytes);
-    if (header === undefined)
-        return c.json({ error: UNKNOWN_TYPE }, 415);
-    const digest = await crypto.subtle.digest('SHA-256', buffer);
-    const key = `images/${hex(digest).slice(0, 16)}.${header.extension}`;
-    await bucket.put(key, buffer, {
-        httpMetadata: { contentType: header.type, cacheControl: IMMUTABLE }
+    const facts = await photoFacts(buffer);
+    if ('problem' in facts)
+        return c.json({ error: facts.problem }, facts.status);
+    const database = drizzle(c.env.DB);
+    if (id !== null) {
+        const existing = await database
+            .select()
+            .from(target)
+            .where(eq(column(target, 'id'), id))
+            .get();
+        if (existing !== undefined) {
+            return Reflect.get(existing, 'key') === facts.key
+                ? c.json(existing, 200)
+                : c.json({ error: `Another photo already has the id ${id}.` }, 409);
+        }
+    }
+    await bucket.put(facts.key, buffer, {
+        httpMetadata: { contentType: facts.type, cacheControl: IMMUTABLE }
     });
-    const row = await drizzle(c.env.DB)
+    const row = await database
         .insert(target)
         .values({
-        id: crypto.randomUUID(),
-        key,
-        width: header.width,
-        height: header.height,
-        placeholder: await placeholderOf(c, key),
-        alt: alt.trim(),
-        type: header.type,
-        bytes: bytes.byteLength
+        id: id ?? crypto.randomUUID(),
+        ...facts,
+        placeholder: await placeholderOf(c, facts.key),
+        alt: alt.trim()
     })
         .returning()
         .get();
@@ -113,6 +143,23 @@ export async function uploadMedia(c) {
 function unquoted(etag) {
     return etag.replace(/^W\//, '').replaceAll('"', '').trim();
 }
+async function fromLiveSite(key) {
+    const origin = import.meta.env['PATTERN_LIVE_ORIGIN'];
+    if (typeof origin !== 'string')
+        return undefined;
+    const response = await fetch(`${origin}${mediaPath(key)}`).catch(() => undefined);
+    if (response === undefined || !response.ok) {
+        await response?.body?.cancel();
+        return undefined;
+    }
+    return new Response(response.body, {
+        headers: {
+            'cache-control': IMMUTABLE,
+            'content-type': response.headers.get('content-type') ?? 'application/octet-stream',
+            'x-content-type-options': 'nosniff'
+        }
+    });
+}
 export async function serveMedia(c) {
     const key = decodeURIComponent(c.req.path.slice('/media/'.length));
     const bucket = c.env.MEDIA;
@@ -121,8 +168,10 @@ export async function serveMedia(c) {
     }
     const seen = c.req.header('if-none-match');
     const object = await bucket.get(key, seen === undefined ? {} : { onlyIf: { etagDoesNotMatch: unquoted(seen) } });
-    if (object === null)
-        return c.text('No such photo', 404);
+    if (object === null) {
+        const live = import.meta.env.DEV ? await fromLiveSite(key) : undefined;
+        return live ?? c.text('No such photo', 404);
+    }
     const headers = new Headers({
         'cache-control': IMMUTABLE,
         'content-type': object.httpMetadata?.contentType ?? 'application/octet-stream',

package/dist/server/patternViewer.js

@@ -1,25 +1,31 @@
-import { verifiedTablesAssertion } from "../patternAccess.js";
+import { MEDIA_WRITE, TABLES_READ, verifiedAssertion } from "../patternAccess.js";
 import { PATTERN_KEYS } from "./patternKeys.js";
 const BEARER = /^bearer\s+/i;
 const SCHEMA_PATH = '/api/schema';
 const TABLES_PATH = '/api/tables/';
+const MEDIA_PATH = '/api/media';
 export function bearerOf(c) {
     const header = c.req.header('authorization') ?? '';
     return BEARER.test(header) ? header.replace(BEARER, '').trim() : undefined;
 }
-function isReadByPattern(c) {
-    const { path } = c.req;
-    return (c.req.method === 'GET' &&
-        (path === SCHEMA_PATH || path.startsWith(TABLES_PATH)));
+function scopeOf(c) {
+    const { path, method } = c.req;
+    if (method === 'GET' &&
+        (path === SCHEMA_PATH || path.startsWith(TABLES_PATH))) {
+        return TABLES_READ;
+    }
+    return method === 'POST' && path === MEDIA_PATH ? MEDIA_WRITE : undefined;
 }
 export async function attachPatternViewer(c, next, token) {
-    const email = isReadByPattern(c)
-        ? await verifiedTablesAssertion(token, {
+    const scope = scopeOf(c);
+    const email = scope === undefined
+        ? undefined
+        : await verifiedAssertion(token, {
             hostname: new URL(c.req.url).hostname,
             keys: PATTERN_KEYS,
-            now: Math.floor(Date.now() / 1000)
-        })
-        : undefined;
+            now: Math.floor(Date.now() / 1000),
+            scope
+        });
     if (email === undefined)
         return c.json({ error: 'Signed out' }, 401);
     c.set('viewer', { userId: `pattern:${email}`, isAdmin: true });

package/dist/server/tables.d.ts

@@ -10,7 +10,9 @@ type SqlTable = SQLiteTableWithColumns<{
 }>;
 export declare function sqlTable(table: Table): SqlTable;
 export declare function sqlTables<Group extends Tables>(tables: Group): Record<keyof Group, SqlTable>;
+export declare function column(target: SqlTable, key: string): SqlTable["_"]["columns"][string];
 export declare function seedSql<Group extends Tables>(tables: Group, seed: Seed<Group>): string;
+export declare function starterSql<Group extends Tables>(tables: Group, rows: Seed<Group>): string;
 export declare function readRows(d1: D1Database, table: Table): Promise<readonly Record<string, unknown>[]>;
 export declare function readRow(d1: D1Database, table: Table, id: string): Promise<Record<string, unknown> | undefined>;
 export declare function serveTables<Group extends Tables>(tables: Group): import("hono/hono-base").HonoBase<ServerEnv, {

package/dist/server/tables.js

@@ -47,7 +47,7 @@ export function sqlTable(table) {
 export function sqlTables(tables) {
     return Object.fromEntries(Object.entries(tables).map(([key, table]) => [key, sqlTable(table)]));
 }
-function column(target, key) {
+export function column(target, key) {
     const found = Reflect.get(target, key);
     if (found === undefined)
         throw new Error(`No column ${key}`);
@@ -99,6 +99,22 @@ export function seedSql(tables, seed) {
     });
     return [...users, ...rowsSql].join('\n');
 }
+export function starterSql(tables, rows) {
+    return Object.values(tables)
+        .flatMap((table) => {
+        const listed = seededRows(rows, table.name);
+        if (listed.length === 0 || table.owned)
+            return [];
+        const keys = ['id', 'createdAt', ...Object.keys(table.columns)];
+        const values = listed
+            .map((row) => `(${keys.map((key) => sqlLiteral((row[key] ?? null))).join(', ')})`)
+            .join(',\n  ');
+        return [
+            `INSERT OR IGNORE INTO ${snakeCase(table.name)} (${keys.map(snakeCase).join(', ')}) VALUES\n  ${values};`
+        ];
+    })
+        .join('\n');
+}
 function selection(table, target) {
     return Object.fromEntries([
         'id',

package/dist/start.js

@@ -17,6 +17,8 @@ const TEST_SEED = 'patternSeed';
 const INLINE_DATA_ID = 'pattern-data';
 const TEST_ADMINS = 'patternAdmins';
 const TEST_WORLD = 'patternWorld';
+const TEST_TITLE = 'patternTitle';
+const TEST_SIGNED_IN_AS = 'patternSignedInAs';
 function testSeed() {
     const seed = Reflect.get(window, TEST_SEED);
     return typeof seed === 'object' && seed !== null ? seed : {};
@@ -27,6 +29,14 @@ function testAdmins() {
         ? admins.filter((email) => typeof email === 'string')
         : [];
 }
+function testTitle() {
+    const title = Reflect.get(window, TEST_TITLE);
+    return typeof title === 'string' ? title : '';
+}
+function testSignedInAs() {
+    const email = Reflect.get(window, TEST_SIGNED_IN_AS);
+    return typeof email === 'string' ? email : null;
+}
 function readInlineData() {
     const text = document.getElementById(INLINE_DATA_ID)?.textContent ?? '';
     if (text === '')
@@ -58,7 +68,9 @@ export function startApp(App, { theme = [], icons = {}, onInteraction } = {}) {
     const app = new App(router, {
         api: browserApi(tables, inMemory ? testSeed() : {}, gate, {
             inMemory,
+            signedInAs: inMemory ? testSignedInAs() : null,
             admins: inMemory ? testAdmins() : [],
+            title: inMemory ? testTitle() : '',
             ...(services === undefined ? {} : { services }),
             ...(memory === undefined ? {} : { memory }),
             world

package/dist/table.js

@@ -2,7 +2,12 @@ import { z } from 'zod';
 const NAME = /^[a-z][a-zA-Z0-9]*$/;
 const RESERVED = ['id', 'createdAt', 'ownerId'];
 const RESERVED_TABLES = ['users', 'sessions', 'session'];
-const SDK_TABLES = ['media'];
+const SDK_TABLES = {
+    media: 'media',
+    bookingRules: '...bookingTables',
+    bookingBlackouts: '...bookingTables',
+    bookingRequests: '...bookingTables'
+};
 const SEEDED_AT = Date.UTC(2000, 0, 1);
 function problemIn(name, definition) {
     const { access, columns } = definition;
@@ -39,8 +44,9 @@ function table(name, definition, isPatterns = false) {
     if (RESERVED_TABLES.includes(name)) {
         throw new Error(`A table can't be called "${name}": Pattern keeps its own ${name} for sign-in`);
     }
-    if (!isPatterns && SDK_TABLES.includes(name)) {
-        throw new Error(`A table can't be called "${name}": Pattern has its own ${name} table. Add it with import { ${name} } from '@trypattern/sdk/schema'`);
+    const own = Object.hasOwn(SDK_TABLES, name) ? SDK_TABLES[name] : undefined;
+    if (!isPatterns && own !== undefined) {
+        throw new Error(`A table can't be called "${name}": Pattern has its own ${name} table. Add it to tables with ${own} from '@trypattern/sdk/schema'`);
     }
     const reserved = RESERVED.find((key) => key in columns);
     if (reserved !== undefined) {

package/dist/theme/scales.d.ts

@@ -5,7 +5,7 @@ export declare const ascendingScales: {
     readonly controlGaps: readonly ["gapXs", "gapSm", "gapMd", "gapLg", "gapXl"];
     readonly contentWidths: readonly ["contentXs", "contentSm", "contentMd", "contentLg"];
     readonly iconSizes: readonly ["xs", "sm", "md", "lg", "xl"];
-    readonly fontSizes: readonly ["captionXs", "captionSm", "captionBase", "captionLg", "bodySm", "bodyBase", "bodyLg", "heading6", "heading5", "heading4", "heading3", "heading2", "heading1"];
+    readonly fontSizes: readonly ["captionXs", "captionSm", "captionBase", "captionLg", "bodySm", "bodyMd", "bodyBase", "bodyLg", "heading6", "heading5", "heading4", "heading3", "heading2", "heading1"];
     readonly lineHeights: readonly ["captionXs", "caption", "title", "bodySm", "body", "heading6", "heading5", "heading4", "heading3", "heading2", "heading1"];
 };
 export declare const scaleGroups: {

package/dist/theme/scales.js

@@ -17,6 +17,7 @@ export const ascendingScales = {
         'captionBase',
         'captionLg',
         'bodySm',
+        'bodyMd',
         'bodyBase',
         'bodyLg',
         'heading6',

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

@@ -116,6 +116,16 @@ export declare const controls: stylex.VarGroup<Readonly<{
     gapMd: string;
     gapLg: string;
     gapXl: string;
+    fontSizeXs: string;
+    fontSizeSm: string;
+    fontSizeMd: string;
+    fontSizeLg: string;
+    fontSizeXl: string;
+    lineHeightXs: string;
+    lineHeightSm: string;
+    lineHeightMd: string;
+    lineHeightLg: string;
+    lineHeightXl: string;
 }>, symbol>;
 export declare const iconSizes: stylex.VarGroup<Readonly<{
     xs: string;
@@ -161,6 +171,7 @@ export declare const fontSizes: stylex.VarGroup<Readonly<{
     captionBase: string;
     captionLg: string;
     bodySm: string;
+    bodyMd: string;
     bodyBase: string;
     bodyLg: string;
     heading6: string;
@@ -170,12 +181,19 @@ export declare const fontSizes: stylex.VarGroup<Readonly<{
     heading2: string;
     heading1: string;
 }>, symbol>;
+export declare const trackings: stylex.VarGroup<Readonly<{
+    hero: string;
+    display: string;
+    section: string;
+    heading: string;
+}>, symbol>;
 export declare const lineHeights: stylex.VarGroup<Readonly<{
     captionXs: string;
     caption: string;
     title: string;
     bodySm: string;
     body: string;
+    bodyLg: string;
     heading6: string;
     heading5: string;
     heading4: string;

package/dist/theme/tokens.stylex.js

@@ -115,7 +115,17 @@ export const controls = stylex.defineVars({
     gapSm: '4px',
     gapMd: '6px',
     gapLg: '6px',
-    gapXl: '8px'
+    gapXl: '8px',
+    fontSizeXs: '12px',
+    fontSizeSm: '13px',
+    fontSizeMd: '13px',
+    fontSizeLg: '13px',
+    fontSizeXl: '13px',
+    lineHeightXs: '16px',
+    lineHeightSm: '20px',
+    lineHeightMd: '20px',
+    lineHeightLg: '20px',
+    lineHeightXl: '20px'
 });
 export const iconSizes = stylex.defineVars({
     xs: '12px',
@@ -161,6 +171,7 @@ export const fontSizes = stylex.defineVars({
     captionBase: '11px',
     captionLg: '12px',
     bodySm: '13px',
+    bodyMd: '14px',
     bodyBase: '15px',
     bodyLg: '18px',
     heading6: '20px',
@@ -170,12 +181,19 @@ export const fontSizes = stylex.defineVars({
     heading2: '44px',
     heading1: '56px'
 });
+export const trackings = stylex.defineVars({
+    hero: '-0.04em',
+    display: '-0.03em',
+    section: '-0.02em',
+    heading: '-0.01em'
+});
 export const lineHeights = stylex.defineVars({
     captionXs: '12px',
     caption: '16px',
     title: '18px',
     bodySm: '20px',
     body: '24px',
+    bodyLg: '28px',
     heading6: '24px',
     heading5: '32px',
     heading4: '36px',

package/dist/vite/localWorker.d.ts

@@ -1,4 +1,6 @@
 import type { Plugin } from 'vite';
 import type { Seed, Tables } from '../table.ts';
+import type { StarterPhotoFile } from '../cli/starter.ts';
+export declare function putLocalPhotos(root: string, photos: readonly StarterPhotoFile[]): void;
 export declare function resetLocalDatabase(root: string, tables: Tables, seed: Seed<Tables>): void;
 export declare function localWorker<Group extends Tables>(tables: Group, seed: Seed<Group>, title: string): Plugin;

package/dist/vite/localWorker.js

@@ -1,11 +1,14 @@
 import { execFileSync } from 'node:child_process';
 import { randomBytes } from 'node:crypto';
-import { appendFileSync, existsSync, readFileSync } from 'node:fs';
+import { appendFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
+import { IMMUTABLE } from "../server/media.js";
 import { seedTitleSql } from "../server/settings.js";
 import { seedSql } from "../server/tables.js";
 import { snakeCase } from "../table.js";
+import { readStarter, withStarter } from "../cli/starter.js";
 import { toolBin } from "../cli/tools.js";
+const NO_BUCKET = 'starter/ has photos, but wrangler.jsonc binds no R2 bucket as MEDIA. Add "r2_buckets": [{ "binding": "MEDIA", "bucket_name": "media" }].';
 function ensureLocalSessionSecret(root) {
     const DEV_VARS = join(root, '.dev.vars');
     const current = existsSync(DEV_VARS) ? readFileSync(DEV_VARS, 'utf8') : '';
@@ -21,6 +24,46 @@ function wrangler(root, args) {
         env: { ...process.env, CI: '1' }
     });
 }
+function localMediaBucket(root) {
+    try {
+        const config = JSON.parse(readFileSync(join(root, 'wrangler.jsonc'), 'utf8'));
+        const buckets = Reflect.get(Object(config), 'r2_buckets');
+        const bound = (Array.isArray(buckets) ? buckets : []).find((bucket) => Reflect.get(Object(bucket), 'binding') === 'MEDIA');
+        const name = Reflect.get(Object(bound), 'bucket_name');
+        return typeof name === 'string' ? name : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function putLocalPhotos(root, photos) {
+    if (photos.length === 0)
+        return;
+    const bucket = localMediaBucket(root);
+    if (bucket === undefined)
+        throw new Error(NO_BUCKET);
+    const directory = join(root, '.dev');
+    mkdirSync(directory, { recursive: true });
+    const list = join(directory, 'starter-photos.json');
+    for (const type of new Set(photos.map((photo) => photo.type))) {
+        writeFileSync(list, JSON.stringify(photos
+            .filter((photo) => photo.type === type)
+            .map((photo) => ({ key: photo.key, file: join(root, photo.path) }))));
+        wrangler(root, [
+            'r2',
+            'bulk',
+            'put',
+            bucket,
+            '--local',
+            '--filename',
+            list,
+            '--content-type',
+            type,
+            '--cache-control',
+            IMMUTABLE
+        ]);
+    }
+}
 export function resetLocalDatabase(root, tables, seed) {
     wrangler(root, ['d1', 'migrations', 'apply', 'DB', '--local']);
     wrangler(root, [
@@ -49,12 +92,14 @@ function prepareLocalDatabase(root, tables, seed, title) {
 export function localWorker(tables, seed, title) {
     return {
         name: 'pattern-local-worker',
-        config(config, { command }) {
+        async config(config, { command }) {
             if (command !== 'serve')
                 return;
             const root = config.root ?? process.cwd();
             ensureLocalSessionSecret(root);
-            prepareLocalDatabase(root, tables, seed, title);
+            const starter = await readStarter(root, tables);
+            prepareLocalDatabase(root, tables, withStarter(seed, starter), title);
+            putLocalPhotos(root, starter?.photos ?? []);
         }
     };
 }

package/dist/vite/vite.js

@@ -5,6 +5,7 @@ import { cloudflare } from '@cloudflare/vite-plugin';
 import stylex from '@stylexjs/unplugin';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vitest/config';
+import { hostnameOf } from "../publishWire.js";
 import { commandBridge } from "./commandBridge.js";
 import { designManifest } from "./designManifest.js";
 import { localWorker } from "./localWorker.js";
@@ -57,7 +58,7 @@ const reactCompilerSkippingUnchangedRendersAndLoggingWhereItCannot = {
 const FLOW_SETUP = fileURLToPath(new URL(`../flows/flowSetup${extname(import.meta.filename)}`, import.meta.url));
 export function pattern({ tables, admins, seed = {}, world = {} }) {
     const isVitest = process.env['VITEST'] !== undefined;
-    const { title } = readProjectFile(process.cwd());
+    const { name, title } = readProjectFile(process.cwd());
     const isVisualFlowRun = process.env['PATTERN_VISUAL_URL'] !== undefined;
     const stylexPlugin = stylex.vite({
         useCSSLayers: { before: CSS_LAYERS_BEFORE_STYLEX },
@@ -87,6 +88,9 @@ export function pattern({ tables, admins, seed = {}, world = {} }) {
             designFile()
         ],
         clearScreen: false,
+        define: {
+            'import.meta.env.PATTERN_LIVE_ORIGIN': JSON.stringify(`https://${hostnameOf(name)}`)
+        },
         optimizeDeps: sdkCompiledByStyleXButItsDependenciesPrebundled,
         build: {
             cssTarget: ['chrome123', 'firefox120', 'safari17.5']

package/package.json

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