@trypattern/sdk 0.0.0-stage → 0.1.1

package/dist/vite/designManifest.js

@@ -0,0 +1,191 @@
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { basename, extname, join, relative } from 'node:path';
+import ts from 'typescript';
+import { builtInIconNames } from "../components/icons.js";
+import { themeTokens } from "../rules/themeTokens.js";
+const PRIMITIVES_MODULE = '@trypattern/sdk/react';
+const TOKENS_MODULE = '@trypattern/sdk/tokens.stylex';
+const LOOK_PROPS = new Set([
+    'variant',
+    'tone',
+    'size',
+    'surface',
+    'padding',
+    'paddingBlock',
+    'paddingInline',
+    'gap',
+    'align',
+    'justify',
+    'width',
+    'as',
+    'name',
+    'icon',
+    'trailingIcon',
+    'placement'
+]);
+const DYNAMIC = 'dynamic';
+const SDK_PACKAGE = new URL('../../package.json', import.meta.url);
+function sourceFiles(folder) {
+    if (!existsSync(folder))
+        return [];
+    return readdirSync(folder, { withFileTypes: true }).flatMap((entry) => {
+        const path = join(folder, entry.name);
+        if (entry.isDirectory())
+            return sourceFiles(path);
+        return /\.tsx?$/.test(entry.name) ? [path] : [];
+    });
+}
+function parse(path) {
+    return ts.createSourceFile(path, readFileSync(path, 'utf8'), ts.ScriptTarget.Latest, true, path.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.TS);
+}
+function importsFrom(source, module) {
+    const names = new Map();
+    for (const statement of source.statements) {
+        if (!ts.isImportDeclaration(statement) ||
+            !ts.isStringLiteral(statement.moduleSpecifier) ||
+            statement.moduleSpecifier.text !== module) {
+            continue;
+        }
+        const bindings = statement.importClause?.namedBindings;
+        if (bindings === undefined || !ts.isNamedImports(bindings))
+            continue;
+        for (const element of bindings.elements) {
+            names.set(element.name.text, element.propertyName?.text ?? element.name.text);
+        }
+    }
+    return names;
+}
+function literalValues(expression) {
+    if (ts.isStringLiteralLike(expression))
+        return [expression.text];
+    if (ts.isParenthesizedExpression(expression)) {
+        return literalValues(expression.expression);
+    }
+    if (ts.isConditionalExpression(expression)) {
+        return [
+            ...literalValues(expression.whenTrue),
+            ...literalValues(expression.whenFalse)
+        ];
+    }
+    return [DYNAMIC];
+}
+function attributeValues(attribute) {
+    const initializer = attribute.initializer;
+    if (initializer === undefined)
+        return ['true'];
+    if (ts.isStringLiteral(initializer))
+        return [initializer.text];
+    if (ts.isJsxExpression(initializer) && initializer.expression !== undefined) {
+        return literalValues(initializer.expression);
+    }
+    return [DYNAMIC];
+}
+function countPrimitives(source, primitives) {
+    const imported = importsFrom(source, PRIMITIVES_MODULE);
+    const visit = (node) => {
+        const element = ts.isJsxSelfClosingElement(node) || ts.isJsxOpeningElement(node)
+            ? node
+            : undefined;
+        const name = element !== undefined && ts.isIdentifier(element.tagName)
+            ? imported.get(element.tagName.text)
+            : undefined;
+        if (element !== undefined && name !== undefined) {
+            const use = (primitives[name] ??= { uses: 0, props: {} });
+            use.uses += 1;
+            for (const attribute of element.attributes.properties) {
+                if (!ts.isJsxAttribute(attribute))
+                    continue;
+                const prop = attribute.name.getText(source);
+                if (!LOOK_PROPS.has(prop))
+                    continue;
+                if (prop === 'name' && name !== 'Icon')
+                    continue;
+                const counts = (use.props[prop] ??= {});
+                for (const value of new Set(attributeValues(attribute))) {
+                    counts[value] = (counts[value] ?? 0) + 1;
+                }
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(source);
+}
+function customPiece(root, path, source) {
+    const tokenGroups = new Set(importsFrom(source, TOKENS_MODULE).keys());
+    const tokens = new Set();
+    let draws = false;
+    const visit = (node) => {
+        if (ts.isCallExpression(node) &&
+            node.expression.getText(source) === 'stylex.create') {
+            draws = true;
+        }
+        if (ts.isPropertyAccessExpression(node) &&
+            ts.isIdentifier(node.expression) &&
+            tokenGroups.has(node.expression.text)) {
+            tokens.add(`${node.expression.text}.${node.name.text}`);
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(source);
+    return draws
+        ? [
+            {
+                name: basename(path, extname(path)),
+                file: relative(root, path),
+                tokens: [...tokens].toSorted()
+            }
+        ]
+        : [];
+}
+function appIcons(root) {
+    const path = join(root, 'src', 'theme', 'icons.ts');
+    if (!existsSync(path))
+        return [];
+    const names = [];
+    const visit = (node) => {
+        if (ts.isCallExpression(node) &&
+            node.expression.getText() === 'defineIcons' &&
+            node.arguments[0] !== undefined &&
+            ts.isObjectLiteralExpression(node.arguments[0])) {
+            for (const property of node.arguments[0].properties) {
+                if (property.name !== undefined)
+                    names.push(property.name.getText());
+            }
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(parse(path));
+    return names;
+}
+function tokensOf(root) {
+    const tokens = {};
+    for (const [name, { value, offset }] of themeTokens(root)) {
+        const [group = '', key = ''] = name.split('.');
+        tokens[group] = {
+            ...tokens[group],
+            [key]: { value, isOverridden: offset !== undefined }
+        };
+    }
+    return tokens;
+}
+export function designManifest(root) {
+    const primitives = {};
+    const customPieces = [];
+    for (const path of sourceFiles(join(root, 'src'))) {
+        const source = parse(path);
+        countPrimitives(source, primitives);
+        if (path.startsWith(join(root, 'src', 'components'))) {
+            customPieces.push(...customPiece(root, path, source));
+        }
+    }
+    const sdk = JSON.parse(readFileSync(SDK_PACKAGE, 'utf8'));
+    return {
+        sdk: typeof sdk === 'object' && sdk !== null && 'version' in sdk
+            ? String(sdk.version)
+            : 'unknown',
+        tokens: tokensOf(root),
+        primitives: Object.fromEntries(Object.entries(primitives).toSorted(([a], [b]) => a.localeCompare(b))),
+        customPieces,
+        icons: { builtIn: builtInIconNames, app: appIcons(root) }
+    };
+}

package/dist/vite/localWorker.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from 'vite';
+import type { Seed, Tables } from '../table.ts';
+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

@@ -0,0 +1,60 @@
+import { execFileSync } from 'node:child_process';
+import { randomBytes } from 'node:crypto';
+import { appendFileSync, existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { seedTitleSql } from "../server/settings.js";
+import { seedSql } from "../server/tables.js";
+import { snakeCase } from "../table.js";
+import { toolBin } from "../cli/tools.js";
+function ensureLocalSessionSecret(root) {
+    const DEV_VARS = join(root, '.dev.vars');
+    const current = existsSync(DEV_VARS) ? readFileSync(DEV_VARS, 'utf8') : '';
+    if (/^SESSION_SECRET=/m.test(current))
+        return;
+    const separator = current === '' || current.endsWith('\n') ? '' : '\n';
+    appendFileSync(DEV_VARS, `${separator}SESSION_SECRET=${randomBytes(32).toString('hex')}\n`);
+}
+function wrangler(root, args) {
+    execFileSync(process.execPath, [toolBin('wrangler'), ...args], {
+        cwd: root,
+        stdio: 'pipe',
+        env: { ...process.env, CI: '1' }
+    });
+}
+export function resetLocalDatabase(root, tables, seed) {
+    wrangler(root, ['d1', 'migrations', 'apply', 'DB', '--local']);
+    wrangler(root, [
+        'd1',
+        'execute',
+        'DB',
+        '--local',
+        '--command',
+        [
+            ...Object.values(tables).map((table) => `DELETE FROM ${snakeCase(table.name)};`),
+            seedSql(tables, seed)
+        ].join('\n')
+    ]);
+}
+function prepareLocalDatabase(root, tables, seed, title) {
+    wrangler(root, ['d1', 'migrations', 'apply', 'DB', '--local']);
+    wrangler(root, [
+        'd1',
+        'execute',
+        'DB',
+        '--local',
+        '--command',
+        [seedTitleSql(title), seedSql(tables, seed)].join('\n')
+    ]);
+}
+export function localWorker(tables, seed, title) {
+    return {
+        name: 'pattern-local-worker',
+        config(config, { command }) {
+            if (command !== 'serve')
+                return;
+            const root = config.root ?? process.cwd();
+            ensureLocalSessionSecret(root);
+            prepareLocalDatabase(root, tables, seed, title);
+        }
+    };
+}

package/dist/vite/projectFile.d.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+export declare const PROJECT_FILE = "pattern.json";
+declare const projectFile: z.ZodObject<{
+    name: z.ZodString;
+    title: z.ZodString;
+}, z.core.$strip>;
+export type ProjectFile = z.output<typeof projectFile>;
+export declare function readProjectFile(root: string): ProjectFile;
+export {};

package/dist/vite/projectFile.js

@@ -0,0 +1,17 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { z } from 'zod';
+import { appTitle } from "../appTitle.js";
+export const PROJECT_FILE = 'pattern.json';
+const projectFile = z.object({ name: z.string().min(1), title: appTitle });
+export function readProjectFile(root) {
+    const path = join(root, PROJECT_FILE);
+    if (!existsSync(path)) {
+        throw new Error(`${PROJECT_FILE} is missing. It holds the app's address and title: { "name": "acme", "title": "Acme" }`);
+    }
+    const parsed = projectFile.safeParse(JSON.parse(readFileSync(path, 'utf8')));
+    if (!parsed.success) {
+        throw new Error(`${PROJECT_FILE} needs "name" (the address) and "title" (1 to 60 characters): ${z.prettifyError(parsed.error)}`);
+    }
+    return parsed.data;
+}

package/dist/vite/rootAlias.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function rootAlias(): Plugin;

package/dist/vite/rootAlias.js

@@ -0,0 +1,15 @@
+import { resolve } from 'node:path';
+export function rootAlias() {
+    return {
+        name: 'pattern-root-alias',
+        config(config) {
+            const root = resolve(config.root ?? process.cwd());
+            return {
+                resolve: {
+                    alias: [{ find: /^@\//, replacement: `${root}/` }],
+                    dedupe: ['react', 'react-dom', 'react-router', 'zod']
+                }
+            };
+        }
+    };
+}

package/dist/vite/vite.d.ts

@@ -0,0 +1,8 @@
+import type { Seed, Tables } from '../table.ts';
+export type PatternOptions<Group extends Tables> = {
+    tables: Group;
+    admins: readonly string[];
+    seed?: Seed<Group>;
+    world?: object;
+};
+export declare function pattern<Group extends Tables>({ tables, admins, seed, world }: PatternOptions<Group>): import("vite").UserConfig;

package/dist/vite/vite.js

@@ -0,0 +1,95 @@
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { extname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { cloudflare } from '@cloudflare/vite-plugin';
+import stylex from '@stylexjs/unplugin';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+import { commandBridge } from "./commandBridge.js";
+import { designManifest } from "./designManifest.js";
+import { localWorker } from "./localWorker.js";
+import { readProjectFile } from "./projectFile.js";
+import { rootAlias } from "./rootAlias.js";
+const DEV_SERVER_PORT = 5173;
+const VISUAL_FLOW_TIMEOUT_MS = 30_000;
+const CSS_LAYERS_BEFORE_STYLEX = ['reset'];
+const browsersWithNativeLightDark = {
+    chrome: 123 << 16,
+    firefox: 120 << 16,
+    safari: (17 << 16) | (5 << 8)
+};
+const minifyStylexCssAppendedAfterViteMinifies = {
+    minify: true,
+    targets: browsersWithNativeLightDark
+};
+const reactCompilerSkippingUnchangedRendersAndLoggingWhereItCannot = {
+    compiler: { logDiagnostics: true }
+};
+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 isVisualFlowRun = process.env['PATTERN_VISUAL_URL'] !== undefined;
+    const stylexPlugin = stylex.vite({
+        useCSSLayers: { before: CSS_LAYERS_BEFORE_STYLEX },
+        aliases: { '@/*': [join(process.cwd(), '*')] },
+        sxPropName: false,
+        lightningcssOptions: minifyStylexCssAppendedAfterViteMinifies
+    });
+    const stylexWithoutDevCssPollerThatKeepsVitestFromExiting = {
+        ...stylexPlugin,
+        configureServer: undefined
+    };
+    const stylexBeforeReactToKeepFastRefresh = [
+        isVitest
+            ? stylexWithoutDevCssPollerThatKeepsVitestFromExiting
+            : stylexPlugin,
+        react(reactCompilerSkippingUnchangedRendersAndLoggingWhereItCannot)
+    ];
+    const workerServingApiInDevAndBuild = isVitest
+        ? []
+        : [localWorker(tables, seed, title), cloudflare()];
+    return defineConfig({
+        plugins: [
+            ...stylexBeforeReactToKeepFastRefresh,
+            ...workerServingApiInDevAndBuild,
+            commandBridge(),
+            rootAlias(),
+            designFile()
+        ],
+        clearScreen: false,
+        optimizeDeps: { exclude: ['@trypattern/sdk'] },
+        build: {
+            cssTarget: ['chrome123', 'firefox120', 'safari17.5']
+        },
+        server: {
+            port: DEV_SERVER_PORT,
+            strictPort: true
+        },
+        test: {
+            include: ['flows/**/*.flow.ts'],
+            server: { deps: { inline: ['@trypattern/sdk'] } },
+            provide: {
+                patternSeed: seed,
+                patternAdmins: admins,
+                patternTitle: title,
+                patternWorld: world
+            },
+            ...(isVisualFlowRun && {
+                globalSetup: [FLOW_SETUP],
+                testTimeout: VISUAL_FLOW_TIMEOUT_MS
+            })
+        }
+    });
+}
+function designFile() {
+    return {
+        name: 'pattern:design',
+        apply: 'build',
+        closeBundle() {
+            const root = process.cwd();
+            mkdirSync(join(root, 'dist'), { recursive: true });
+            writeFileSync(join(root, 'dist', 'design.json'), `${JSON.stringify(designManifest(root), null, 2)}\n`);
+        }
+    };
+}

package/dist/wire.d.ts

@@ -0,0 +1,7 @@
+import type { z } from 'zod';
+type StaticTypeError<Message extends string> = Message;
+type NotSameOnTheWire = StaticTypeError<'Command inputs and table columns must be the same on the wire and in code: no .transform(), .default() or .pipe()'>;
+export type SameOnTheWire<S extends z.ZodRawShape> = {
+    [Key in keyof S]: [z.input<S[Key]>] extends [z.output<S[Key]>] ? [z.output<S[Key]>] extends [z.input<S[Key]>] ? S[Key] : NotSameOnTheWire : NotSameOnTheWire;
+};
+export {};

package/dist/wire.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,106 @@
 {
   "name": "@trypattern/sdk",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "type": "module",
+  "files": [
+    "dist",
+    "presets"
+  ],
+  "bin": {
+    "app": "./dist/cli/app.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./schema": {
+      "types": "./dist/schema.d.ts",
+      "default": "./dist/schema.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    },
+    "./publish": {
+      "types": "./dist/publishWire.d.ts",
+      "default": "./dist/publishWire.js"
+    },
+    "./flows": {
+      "types": "./dist/flows/flows.d.ts",
+      "default": "./dist/flows/flows.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/vite.d.ts",
+      "default": "./dist/vite/vite.js"
+    },
+    "./lint": {
+      "types": "./dist/rules/lintPlugin.d.ts",
+      "default": "./dist/rules/lintPlugin.js"
+    },
+    "./tsconfig/app.json": "./presets/tsconfig.app.json",
+    "./tsconfig/server.json": "./presets/tsconfig.server.json",
+    "./tokens.stylex": {
+      "types": "./dist/theme/tokens.stylex.d.ts",
+      "default": "./dist/theme/tokens.stylex.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@cloudflare/vite-plugin": "1.64.0",
+    "@cloudflare/workers-types": "5.20261015.1",
+    "@stylexjs/eslint-plugin": "0.19.1",
+    "@stylexjs/unplugin": "0.19.1",
+    "@types/node": "^24.19.2",
+    "@vitejs/plugin-react": "^6.1.2",
+    "drizzle-kit": "0.31.11",
+    "drizzle-orm": "0.45.4",
+    "hono": "4.13.13",
+    "oxc-transform-react": "0.152.0",
+    "oxlint": "^1.88.0",
+    "playwright-core": "1.63.0",
+    "prettier": "3.9.10",
+    "typescript": "~6.0.3",
+    "unplugin": "2.3.11",
+    "vite": "^8.3.4",
+    "vitest": "5.0.3",
+    "wrangler": "4.151.0",
+    "@base-ui/react": "1.8.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-router": "8.4.0",
+    "zod": "4.6.7",
+    "@stylexjs/stylex": "0.19.1",
+    "react-dom": "^19.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "react": "^19.3.0",
+    "react-router": "8.4.0",
+    "zod": "4.6.7",
+    "@stylexjs/stylex": "0.19.1",
+    "react-dom": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "none"
+  },
+  "scripts": {
+    "check": "tsc -p . && oxlint -c oxlint.sdk.json src/components src/hooks src/theme && node tests/check-types.ts && vitest run --root tests/server && prettier --check src tests presets *.json",
+    "typecheck": "tsc -p .",
+    "test:types": "node tests/check-types.ts",
+    "test:server": "vitest run --root tests/server",
+    "format": "prettier --write src tests presets *.json",
+    "lint": "oxlint -c oxlint.sdk.json src/components src/hooks src/theme",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/theme/reset.css dist/theme/reset.css"
+  }
 }

package/presets/lintPlugin.js

@@ -0,0 +1,7 @@
+import { existsSync } from 'node:fs'
+
+const source = new URL('../src/rules/lintPlugin.ts', import.meta.url)
+const built = new URL('../dist/rules/lintPlugin.js', import.meta.url)
+const plugin = await import(existsSync(source) ? source.href : built.href)
+
+export default plugin.default