@trypattern/sdk 0.1.3 → 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

@@ -11,7 +11,7 @@ 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';
@@ -154,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`, {
@@ -172,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) {

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/package.json

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