@trypattern/sdk 0.1.2 → 0.1.4

package/dist/builtins/Account.js

@@ -2,7 +2,7 @@ import { appearance } from "../appearance.js";
 import { command } from "../model.js";
 import { Model } from "../registered.js";
 export class Account extends Model({
-    state: { appearance: appearance.default('system') },
+    state: { appearance: appearance.default('light') },
     persist: ['appearance']
 }) {
     get user() {

package/dist/cli/publishing.js

@@ -1,5 +1,5 @@
 import { spawnSync } from 'node:child_process';
-import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { chmodSync, existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs';
 import { homedir, hostname, userInfo } from 'node:os';
 import { basename, dirname, extname, join, matchesGlob, relative } from 'node:path';
 import { z } from 'zod';
@@ -11,9 +11,12 @@ const CREDENTIALS_FILE = join(CONFIG_DIR, 'credentials.json');
 const PENDING_FILE = join(CONFIG_DIR, 'pending-login.json');
 const LOGIN_MINUTES = 10;
 const POLL_MS = 2000;
-const LOGIN_WAIT_MS = 120_000;
+const LOGIN_WAIT_MS = 100_000;
 const PUBLISH_WAIT_MS = 300_000;
 const SESSION_COOKIE = 'pattern_session';
+const LAUNCHER = 'app';
+const STARTER_WORKSPACE = 'pnpm-workspace.yaml';
+const STARTER_BUILD_SETTINGS = 'allowBuilds:\n  esbuild: false\n  workerd: false\n';
 const IGNORED_IN_EMPTY_FOLDER = new Set(['.DS_Store', '.claude']);
 const MIME_TYPES = {
     '.html': 'text/html',
@@ -151,7 +154,7 @@ async function signIn(io, again) {
         return {
             code: 3,
             data: { waitingFor: 'approval', code: pending.code, url: pending.url },
-            text: `✗ Not allowed yet. The browser page ${pending.url} shows the code ${pending.code}.\n  next  once they click Allow there, run ${again} again`
+            text: `✗ Not allowed yet. The browser page ${pending.url} shows the code ${pending.code}.\n  next  run ${again} again: it waits for Allow`
         };
     }
     const response = await fetch(`${dashboard()}/api/auth/cli/logins`, {
@@ -169,7 +172,7 @@ async function signIn(io, again) {
     return {
         code: 3,
         data: { waitingFor: 'approval', code: started.code, url: started.url },
-        text: `Opened ${started.url} in the browser.\n  code  ${started.code}\n  next  tell them: "Check the code on the page is ${started.code}, then click Allow." Then run ${again} again.`
+        text: `Opened ${started.url} in the browser.\n  code  ${started.code}\n  next  tell them: "Check the code on the page is ${started.code}, then click Allow." Then, without waiting for them to reply, run ${again} again: it waits for Allow.`
     };
 }
 async function signedIn(io, again, work) {
@@ -278,6 +281,8 @@ export async function pull(io, name, cwd) {
             writeFileSync(destination, Buffer.from(await value.arrayBuffer()));
             files += 1;
         }
+        if (existsSync(join(target, LAUNCHER)))
+            chmodSync(join(target, LAUNCHER), 0o755);
         writeFileSync(join(target, PROJECT_FILE), `${JSON.stringify({ name, title: result.title }, null, 2)}\n`);
         io.say(`✓ Downloaded ${files} files of version ${result.number}`);
         const install = await io.run('pnpm', ['install'], target);
@@ -377,6 +382,9 @@ function uploadForm(root, io, isStarter) {
         form.append(`${UPLOAD.migrations}${file}`, fileBlob(join(migrations, file)), file);
     }
     const sources = sourceFiles(root);
+    if (isStarter && !sources.includes(STARTER_WORKSPACE)) {
+        form.append(`${UPLOAD.source}${STARTER_WORKSPACE}`, new Blob([STARTER_BUILD_SETTINGS], { type: 'text/yaml' }), STARTER_WORKSPACE);
+    }
     for (const path of sources) {
         const full = join(root, path);
         const contents = isStarter && path === 'package.json'

package/dist/components/Appear.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type AppearProps = {
+    children: ReactNode;
+};
+export declare function Appear({ children }: AppearProps): import("react").JSX.Element;
+export {};

package/dist/components/Appear.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, motion, space } from "../theme/tokens.stylex.js";
+export function Appear({ children }) {
+    return _jsx("div", { ...stylex.props(styles.appear), children: children });
+}
+const enter = stylex.keyframes({
+    from: { opacity: 0, transform: `translateY(${space.xs})` }
+});
+const styles = stylex.create({
+    appear: {
+        display: 'flex',
+        flexDirection: 'column',
+        animationName: {
+            default: enter,
+            [breakpoints.reducedMotion]: 'none'
+        },
+        animationDuration: motion.base,
+        animationTimingFunction: motion.easeOut
+    }
+});

package/dist/components/Badge.d.ts

@@ -3,7 +3,7 @@ import type { Placement } from './Placement.ts';
 type BadgeProps = {
     children: ReactNode;
     variant?: 'primary' | 'tertiary' | 'outline' | 'transparent';
-    tone?: 'neutral' | 'brand' | 'danger';
+    tone?: 'neutral' | 'brand' | 'positive' | 'danger';
     size?: 'sm' | 'md';
     style?: Placement;
 };

package/dist/components/Badge.js

@@ -7,6 +7,7 @@ export function Badge({ children, variant = 'tertiary', tone = 'neutral', size =
 const toneKeys = {
     neutral: 'Neutral',
     brand: 'Brand',
+    positive: 'Positive',
     danger: 'Danger'
 };
 const styles = stylex.create({
@@ -41,6 +42,10 @@ const looks = stylex.create({
         color: colors.onBrandSolidForeground,
         backgroundColor: colors.brandSolid
     },
+    primaryPositive: {
+        color: colors.onPositiveSolidForeground,
+        backgroundColor: colors.positiveSolid
+    },
     primaryDanger: {
         color: colors.onDangerSolidForeground,
         backgroundColor: colors.dangerSolid
@@ -53,6 +58,10 @@ const looks = stylex.create({
         color: colors.onBrandSubtleForeground,
         backgroundColor: colors.brandSubtle
     },
+    tertiaryPositive: {
+        color: colors.onPositiveSubtleForeground,
+        backgroundColor: colors.positiveSubtle
+    },
     tertiaryDanger: {
         color: colors.dangerText,
         backgroundColor: colors.dangerSubtleHover
@@ -67,6 +76,11 @@ const looks = stylex.create({
         backgroundColor: 'transparent',
         boxShadow: `inset 0 0 0 ${borders.thin} ${colors.brandBorderDefault}`
     },
+    outlinePositive: {
+        color: colors.positiveForeground,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.positiveBorderDefault}`
+    },
     outlineDanger: {
         color: colors.dangerForeground,
         backgroundColor: 'transparent',
@@ -80,6 +94,10 @@ const looks = stylex.create({
         color: colors.brandForeground,
         backgroundColor: 'transparent'
     },
+    transparentPositive: {
+        color: colors.positiveForeground,
+        backgroundColor: 'transparent'
+    },
     transparentDanger: {
         color: colors.dangerForeground,
         backgroundColor: 'transparent'

package/dist/components/Link.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { AppPath } from '../registered.ts';
 type LinkProps = {
-    tone?: 'brand' | 'secondary';
+    tone?: 'brand' | 'positive' | 'secondary';
     children: ReactNode;
 } & ({
     to: AppPath;

package/dist/components/Link.js

@@ -35,6 +35,12 @@ const looks = stylex.create({
             ':hover': colors.brandSolidHover
         }
     },
+    positive: {
+        color: {
+            default: colors.positiveForeground,
+            ':hover': colors.positiveSolidHover
+        }
+    },
     secondary: {
         color: {
             default: colors.secondaryForeground,

package/dist/components/SignInScreen.js

@@ -10,7 +10,7 @@ export function SignInScreen() {
     const appSettings = useModel('appSettings');
     const signIn = useModel('signIn');
     const isBusy = signIn.signingIn !== null;
-    return (_jsx("main", { ...stylex.props(styles.page), children: _jsxs("div", { ...stylex.props(styles.column), children: [_jsx("span", { ...stylex.props(styles.mark), children: _jsx(Text, { variant: "title", children: appSettings.title.charAt(0) }) }), _jsxs(Text, { as: "h1", variant: "title", tone: "primary", align: "center", children: ["Sign in to ", appSettings.title] }), signIn.step === 'choose' ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'google', onClick: signIn.continueWithGoogle, children: "Continue with Google" }), _jsxs(Form, { onSubmit: (values) => signIn.sendEmailCode({ email: values['email'] ?? '' }), children: [_jsx(TextField, { name: "email", type: "email", required: true, autoComplete: "email", placeholder: "you@example.com", label: "Email", isLabelHidden: true, size: "lg" }), _jsx(Button, { type: "submit", variant: "secondary", size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'email', children: "Email me a code" })] }), import.meta.env.DEV ? (_jsxs(Button, { variant: "tertiary", size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'dev', onClick: () => signIn.signInAsDevUser({ email: DEV_USER }), children: ["Dev: sign in as ", DEV_USER] })) : null] })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { as: "p", tone: "secondary", align: "center", children: ["We sent a 6-digit code to ", signIn.email, "."] }), _jsxs(Form, { onSubmit: (values) => signIn.verifyEmailCode({ code: values['code'] ?? '' }), children: [_jsx(TextField, { name: "code", required: true, autoFocus: true, inputMode: "numeric", autoComplete: "one-time-code", pattern: "[0-9]{6}", maxLength: 6, placeholder: "123456", label: "Code", isLabelHidden: true, size: "lg" }), _jsx(Button, { type: "submit", size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'email', children: "Sign in" })] }), _jsx(Button, { variant: "transparent", size: "lg", disabled: isBusy, onClick: signIn.startOver, children: "Use a different email" })] })), signIn.notice === null ? null : (_jsx(Text, { as: "p", tone: "secondary", align: "center", children: signIn.notice })), _jsx(Text, { as: "p", variant: "caption", tone: "tertiary", align: "center", children: "Sign-in by Pattern" })] }) }));
+    return (_jsx("main", { ...stylex.props(styles.page), children: _jsxs("div", { ...stylex.props(styles.column), children: [_jsx("span", { ...stylex.props(styles.mark), children: _jsx(Text, { variant: "title", children: appSettings.title.charAt(0) }) }), _jsxs(Text, { as: "h1", variant: "title", tone: "primary", align: "center", children: ["Sign in to ", appSettings.title] }), signIn.step === 'choose' ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'google', onClick: signIn.continueWithGoogle, children: "Continue with Google" }), _jsxs(Form, { onSubmit: (values) => signIn.sendEmailCode({ email: values['email'] ?? '' }), children: [_jsx(TextField, { name: "email", type: "email", autoComplete: "email", placeholder: "you@example.com", label: "Email", isLabelHidden: true, size: "lg", disabled: true }), _jsx(Button, { type: "submit", variant: "secondary", size: "lg", disabled: true, children: "Email me a code" }), _jsx(Text, { variant: "caption", tone: "tertiary", align: "center", children: "Email sign-in coming soon" })] }), import.meta.env.DEV ? (_jsxs(Button, { variant: "tertiary", size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'dev', onClick: () => signIn.signInAsDevUser({ email: DEV_USER }), children: ["Dev: sign in as ", DEV_USER] })) : null] })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { as: "p", tone: "secondary", align: "center", children: ["We sent a 6-digit code to ", signIn.email, "."] }), _jsxs(Form, { onSubmit: (values) => signIn.verifyEmailCode({ code: values['code'] ?? '' }), children: [_jsx(TextField, { name: "code", required: true, autoFocus: true, inputMode: "numeric", autoComplete: "one-time-code", pattern: "[0-9]{6}", maxLength: 6, placeholder: "123456", label: "Code", isLabelHidden: true, size: "lg" }), _jsx(Button, { type: "submit", size: "lg", disabled: isBusy, isPending: signIn.signingIn === 'email', children: "Sign in" })] }), _jsx(Button, { variant: "transparent", size: "lg", disabled: isBusy, onClick: signIn.startOver, children: "Use a different email" })] })), signIn.notice === null ? null : (_jsx(Text, { as: "p", tone: "secondary", align: "center", children: signIn.notice })), _jsx(Text, { as: "p", variant: "caption", tone: "tertiary", align: "center", children: "Sign-in by Pattern" })] }) }));
 }
 const DEV_USER = 'ada@acme.test';
 const styles = stylex.create({

package/dist/components/TextField.js

@@ -14,7 +14,7 @@ export function TextField({ label, isLabelHidden = false, description, error, on
                     if (event.currentTarget.value !== valueOnFocus.current) {
                         interact({ primitive: 'TextField', event: 'change', label });
                     }
-                }, className: stylex.props(styles.input, controlSizes[size], isInvalid && styles.invalid).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 }))] }));
+                }, 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 }))] }));
 }
 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}`;
@@ -55,6 +55,15 @@ const styles = stylex.create({
             ':focus-visible': invalidRing
         }
     },
+    disabled: {
+        color: colors.disabledForeground,
+        cursor: 'not-allowed',
+        backgroundColor: colors.disabled,
+        boxShadow: 'none',
+        '::placeholder': {
+            color: colors.disabledForeground
+        }
+    },
     note: {
         fontSize: fontSizes.captionLg,
         lineHeight: lineHeights.caption,

package/dist/react.d.ts

@@ -1,5 +1,6 @@
 export { AppProvider, useModel } from './hooks/appContext.ts';
 export { AppFrame } from './components/AppFrame.tsx';
+export { Appear } from './components/Appear.tsx';
 export { AppearancePicker } from './components/AppearancePicker.tsx';
 export { Avatar } from './components/Avatar.tsx';
 export { Badge } from './components/Badge.tsx';

package/dist/react.js

@@ -1,5 +1,6 @@
 export { AppProvider, useModel } from "./hooks/appContext.js";
 export { AppFrame } from "./components/AppFrame.js";
+export { Appear } from "./components/Appear.js";
 export { AppearancePicker } from "./components/AppearancePicker.js";
 export { Avatar } from "./components/Avatar.js";
 export { Badge } from "./components/Badge.js";

package/dist/rules/lintPlugin.js

@@ -44,6 +44,7 @@ const CLICK_HANDLERS = new Set([
 ]);
 const PRIMITIVES = new Set([
     'AppFrame',
+    'Appear',
     'AppearancePicker',
     'Avatar',
     'Badge',

package/dist/vite/vite.js

@@ -11,6 +11,35 @@ import { localWorker } from "./localWorker.js";
 import { readProjectFile } from "./projectFile.js";
 import { rootAlias } from "./rootAlias.js";
 const DEV_SERVER_PORT = 5173;
+const BROWSER_DEPENDENCIES = [
+    'react',
+    'react/jsx-runtime',
+    'react/jsx-dev-runtime',
+    'react-dom',
+    'react-dom/client',
+    'react-router',
+    'react-router/dom',
+    'zod',
+    '@stylexjs/stylex',
+    ...[
+        'avatar',
+        'button',
+        'context-menu',
+        'dialog',
+        'field',
+        'menu',
+        'radio-group',
+        'radio',
+        'select',
+        'separator',
+        'switch',
+        'tooltip'
+    ].map((part) => `@base-ui/react/${part}`)
+];
+const sdkCompiledByStyleXButItsDependenciesPrebundled = {
+    exclude: ['@trypattern/sdk'],
+    include: BROWSER_DEPENDENCIES.map((dependency) => `@trypattern/sdk > ${dependency}`)
+};
 const VISUAL_FLOW_TIMEOUT_MS = 30_000;
 const CSS_LAYERS_BEFORE_STYLEX = ['reset'];
 const browsersWithNativeLightDark = {
@@ -58,7 +87,7 @@ export function pattern({ tables, admins, seed = {}, world = {} }) {
             designFile()
         ],
         clearScreen: false,
-        optimizeDeps: { exclude: ['@trypattern/sdk'] },
+        optimizeDeps: sdkCompiledByStyleXButItsDependenciesPrebundled,
         build: {
             cssTarget: ['chrome123', 'firefox120', 'safari17.5']
         },

package/package.json

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