@trypattern/sdk 0.1.0 → 0.1.1

package/dist/components/IconButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button as BaseButton } from '@base-ui/react/button';
 import * as stylex from '@stylexjs/stylex';
 import { colors, controls, radii } from "../theme/tokens.stylex.js";
-import { transparentLook } from "./controlLook.js";
+import { focusRing, transparentLook } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
 import { Tooltip } from "./Tooltip.js";
@@ -10,7 +10,7 @@ export function IconButton({ icon, label, size = 'md', shortcut, disabled = fals
     return (_jsx(Tooltip, { label: label, shortcut: shortcut, children: _jsx(BaseButton, { "aria-label": label, disabled: disabled, focusableWhenDisabled: true, onClick: () => {
                 interact({ primitive: 'IconButton', event: 'click', label });
                 onClick();
-            }, className: stylex.props(styles.button, sizes[size], transparentLook.rest, !disabled && transparentLook.hoverable, disabled && styles.disabled, style).className, children: _jsx(Icon, { name: icon, size: size }) }) }));
+            }, className: stylex.props(styles.button, sizes[size], transparentLook.rest, !disabled && transparentLook.hoverable, disabled && styles.disabled, focusRing.visible, style).className, children: _jsx(Icon, { name: icon, size: size }) }) }));
 }
 const styles = stylex.create({
     button: {

package/dist/components/Link.d.ts

@@ -1,9 +1,14 @@
 import type { ReactNode } from 'react';
 import type { AppPath } from '../registered.ts';
 type LinkProps = {
-    to: AppPath;
     tone?: 'brand' | 'secondary';
     children: ReactNode;
-};
-export declare function Link({ to, tone, children }: LinkProps): import("react").JSX.Element;
+} & ({
+    to: AppPath;
+    href?: never;
+} | {
+    href: string;
+    to?: never;
+});
+export declare function Link({ to, href, tone, children }: LinkProps): import("react").JSX.Element;
 export {};

package/dist/components/Link.js

@@ -2,13 +2,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
 import { Link as RouterLink } from 'react-router';
 import { colors, motion, radii } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
-export function Link({ to, tone = 'brand', children }) {
+export function Link({ to, href, tone = 'brand', children }) {
+    const className = stylex.props(styles.link, looks[tone], focusRing.visible).className;
+    if (href !== undefined) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: () => interact({
+                primitive: 'Link',
+                event: 'open',
+                label: textOf(children) || href
+            }), className: className, children: children }));
+    }
     return (_jsx(RouterLink, { to: to, onClick: () => interact({
             primitive: 'Link',
             event: 'navigate',
             label: textOf(children) || to
-        }), ...stylex.props(styles.link, looks[tone]), children: children }));
+        }), className: className, children: children }));
 }
 const styles = stylex.create({
     link: {

package/dist/components/ListRow.js

@@ -3,10 +3,11 @@ import { Button as BaseButton } from '@base-ui/react/button';
 import * as stylex from '@stylexjs/stylex';
 import { Link as RouterLink } from 'react-router';
 import { colors, controls, radii, space } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
 export function ListRow({ to, onClick, isMuted = false, leading, trailing, children }) {
     const content = (_jsxs(_Fragment, { children: [leading, _jsx("span", { ...stylex.props(styles.main), children: children }), trailing === undefined ? null : (_jsx("span", { ...stylex.props(styles.trailing), children: trailing }))] }));
-    const look = stylex.props(styles.row, (to !== undefined || onClick !== undefined) && styles.interactive, isMuted && styles.muted);
+    const look = stylex.props(styles.row, (to !== undefined || onClick !== undefined) && styles.interactive, isMuted && styles.muted, focusRing.visible, focusRing.inside);
     const report = () => {
         interact({
             primitive: 'ListRow',
@@ -34,7 +35,6 @@ const styles = stylex.create({
         color: colors.primaryForeground,
         textAlign: 'start',
         textDecoration: 'none',
-        outlineOffset: -2,
         borderRadius: radii.md
     },
     interactive: {

package/dist/components/Menu.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import * as stylex from '@stylexjs/stylex';
 import { colors, controls, layers, space } from "../theme/tokens.stylex.js";
-import { controlSizes, transparentLook } from "./controlLook.js";
+import { controlSizes, focusRing, transparentLook } from "./controlLook.js";
 import { MenuItems } from "./MenuItems.js";
 import { Popup } from "./Popup.js";
 export function Menu({ trigger, items, size = 'md', style }) {
-    return (_jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { className: (state) => stylex.props(styles.trigger, controlSizes[size], triggerPaddings[size], transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.triggerText, style).className, children: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseMenu.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "menu", isOpen: state.open, transitionStatus: state.transitionStatus })), children: _jsx(MenuItems, { items: items, primitive: "Menu" }) }) }) })] }));
+    return (_jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { className: (state) => stylex.props(styles.trigger, controlSizes[size], triggerPaddings[size], transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.triggerText, focusRing.visible, style).className, children: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseMenu.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "menu", isOpen: state.open, transitionStatus: state.transitionStatus })), children: _jsx(MenuItems, { items: items, primitive: "Menu" }) }) }) })] }));
 }
 const styles = stylex.create({
     trigger: {

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+export type RadioOption<Value extends string> = {
+    value: Value;
+    label: string;
+    content?: ReactNode;
+    trailing?: ReactNode;
+    isDisabled?: boolean;
+};
+type RadioGroupProps<Value extends string> = {
+    label: string;
+    value: Value | null;
+    options: readonly RadioOption<Value>[];
+    onChange: (value: Value) => void;
+    style?: Placement;
+};
+export declare function RadioGroup<Value extends string>({ label, value, options, onChange, style }: RadioGroupProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/RadioGroup.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, iconSizes, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { focusRing } from "./controlLook.js";
+import { interact } from "./interaction.js";
+import { Text } from "./Text.js";
+export function RadioGroup({ label, value, options, onChange, style }) {
+    return (_jsx(BaseRadioGroup, { "aria-label": label, value: value, onValueChange: (next) => {
+            const chosen = options.find((option) => option.value === next);
+            if (chosen === undefined)
+                return;
+            interact({
+                primitive: 'RadioGroup',
+                event: 'change',
+                label: chosen.label
+            });
+            onChange(chosen.value);
+        }, className: stylex.props(styles.group, style).className, children: options.map((option) => (_jsxs("label", { ...stylex.props(styles.row, option.isDisabled === true && styles.rowDisabled), children: [_jsx(BaseRadio.Root, { value: option.value, disabled: option.isDisabled === true, "aria-label": option.label, className: (state) => stylex.props(styles.dot, state.checked ? styles.dotOn : styles.dotOff, focusRing.visible).className, children: _jsx(BaseRadio.Indicator, { className: stylex.props(styles.mark).className }) }), _jsx("span", { ...stylex.props(styles.content), children: option.content ?? (_jsx(Text, { tone: option.isDisabled === true ? 'tertiary' : 'primary', isTruncated: true, children: option.label })) }), option.trailing === undefined ? null : (_jsx("span", { ...stylex.props(styles.trailing), children: option.trailing }))] }, option.value))) }));
+}
+const styles = stylex.create({
+    group: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        backgroundColor: colors.componentOnContainerStrong,
+        borderRadius: radii.xl,
+        boxShadow: shadows.default
+    },
+    row: {
+        display: 'flex',
+        gap: space.md,
+        alignItems: 'center',
+        minWidth: 0,
+        paddingBlock: space.md,
+        paddingInline: space.md,
+        borderTopColor: colors.divider,
+        borderTopStyle: {
+            default: 'solid',
+            ':first-child': 'none'
+        },
+        borderTopWidth: borders.hairline
+    },
+    rowDisabled: {
+        color: colors.tertiaryForeground
+    },
+    dot: {
+        display: 'grid',
+        flexShrink: 0,
+        placeItems: 'center',
+        width: iconSizes.md,
+        height: iconSizes.md,
+        padding: 0,
+        borderStyle: 'solid',
+        borderWidth: borders.thin,
+        borderRadius: radii.full,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, border-color'
+    },
+    dotOff: {
+        backgroundColor: colors.componentOnContainerStrong,
+        borderColor: colors.borderStrong
+    },
+    dotOn: {
+        backgroundColor: colors.invertedSolid,
+        borderColor: colors.invertedSolid
+    },
+    mark: {
+        width: `calc(${iconSizes.md} / 2.5)`,
+        height: `calc(${iconSizes.md} / 2.5)`,
+        backgroundColor: colors.onInvertedForeground,
+        borderRadius: radii.full
+    },
+    content: {
+        flexGrow: 1,
+        minWidth: 0
+    },
+    trailing: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center'
+    }
+});

package/dist/components/SegmentedControl.js

@@ -4,13 +4,13 @@ import { RadioGroup } from '@base-ui/react/radio-group';
 import * as stylex from '@stylexjs/stylex';
 import { borders, colors, fontWeights, motion, radii } from "../theme/tokens.stylex.js";
 import { interact } from "./interaction.js";
-import { controlSizes } from "./controlLook.js";
+import { controlSizes, focusRing } from "./controlLook.js";
 export function SegmentedControl({ label, value, options, size = 'md', disabled = false, onChange, style }) {
     const index = Math.max(0, options.findIndex((option) => option.value === value));
     return (_jsxs(RadioGroup, { "aria-label": label, value: value, disabled: disabled, onValueChange: (next) => {
             interact({ primitive: 'SegmentedControl', event: 'change', label });
             onChange(next);
-        }, className: stylex.props(styles.group, style).className, children: [_jsx("span", { ...stylex.props(styles.indicator(index, options.length)) }), options.map((option) => (_jsx(Radio.Root, { value: option.value, className: (state) => stylex.props(styles.option, controlSizes[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled).className, children: option.label }, option.value)))] }));
+        }, className: stylex.props(styles.group, style).className, children: [_jsx("span", { ...stylex.props(styles.indicator(index, options.length)) }), options.map((option) => (_jsx(Radio.Root, { value: option.value, className: (state) => stylex.props(styles.option, controlSizes[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled, focusRing.visible).className, children: option.label }, option.value)))] }));
 }
 const styles = stylex.create({
     group: {

package/dist/components/Sidebar.js

@@ -3,6 +3,7 @@ import * as stylex from '@stylexjs/stylex';
 import { NavLink } from 'react-router';
 import { breakpoints, colors, controls, iconSizes, layers, motion, radii, shadows, space, widths } from "../theme/tokens.stylex.js";
 import { Badge } from "./Badge.js";
+import { focusRing } from "./controlLook.js";
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
@@ -14,8 +15,7 @@ export function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimatin
         interact({ primitive: 'AppFrame', event: 'navigate', label: link.label });
         onFollowLink();
     };
-    return (_jsxs("nav", { ...stylex.props(styles.sidebar, isToggled && styles.sidebarToggled, isAnimating && styles.sidebarAnimating), children: [_jsx("div", { ...stylex.props(styles.header), children: _jsx(Menu, { trigger: _jsxs(_Fragment, { children: [_jsx("span", { ...stylex.props(styles.logo), children: _jsx(Text, { variant: "caption", children: workspace.charAt(0) }) }), _jsx(Text, { variant: "label", isTruncated: true, children: workspace }), _jsx(Icon, { name: "chevronDown" })] }), items: workspaceMenu }) }), onSearch === undefined ? null : (_jsx(Button, { variant: "secondary", icon: "search", shortcut: ['mod', 'k'], isFullWidth: true, onClick: onSearch, children: "Search" })), _jsx("div", { ...stylex.props(styles.body), children: _jsx(ScrollArea, { children: _jsxs("div", { ...stylex.props(styles.group), children: [_jsx("span", { ...stylex.props(styles.groupLabel), children: _jsx(Text, { variant: "label", tone: "tertiary", children: "Workspace" }) }), links.map((item) => (_jsxs(NavLink, { onClick: () => followLink(item), to: item.to, end: item.to === '/', className: ({ isActive }) => stylex.props(styles.item, isActive && styles.itemCurrent)
-                                    .className ?? '', children: [_jsx(Icon, { name: item.icon }), _jsx(Text, { variant: "label", isTruncated: true, style: styles.itemLabel, children: item.label }), typeof item.count !== 'number' ? null : (_jsx(Badge, { variant: "transparent", children: item.count }))] }, item.to)))] }) }) })] }));
+    return (_jsxs("nav", { ...stylex.props(styles.sidebar, isToggled && styles.sidebarToggled, isAnimating && styles.sidebarAnimating), children: [_jsx("div", { ...stylex.props(styles.header), children: _jsx(Menu, { trigger: _jsxs(_Fragment, { children: [_jsx("span", { ...stylex.props(styles.logo), children: _jsx(Text, { variant: "caption", children: workspace.charAt(0) }) }), _jsx(Text, { variant: "label", isTruncated: true, children: workspace }), _jsx(Icon, { name: "chevronDown" })] }), items: workspaceMenu }) }), onSearch === undefined ? null : (_jsx(Button, { variant: "secondary", icon: "search", shortcut: ['mod', 'k'], isFullWidth: true, onClick: onSearch, children: "Search" })), _jsx("div", { ...stylex.props(styles.body), children: _jsx(ScrollArea, { children: _jsxs("div", { ...stylex.props(styles.group), children: [_jsx("span", { ...stylex.props(styles.groupLabel), children: _jsx(Text, { variant: "label", tone: "tertiary", children: "Workspace" }) }), links.map((item) => (_jsxs(NavLink, { onClick: () => followLink(item), to: item.to, end: item.to === '/', className: ({ isActive }) => stylex.props(styles.item, isActive && styles.itemCurrent, focusRing.visible, focusRing.inside).className ?? '', children: [_jsx(Icon, { name: item.icon }), _jsx(Text, { variant: "label", isTruncated: true, style: styles.itemLabel, children: item.label }), typeof item.count !== 'number' ? null : (_jsx(Badge, { variant: "transparent", children: item.count }))] }, item.to)))] }) }) })] }));
 }
 const styles = stylex.create({
     sidebar: {
@@ -121,7 +121,6 @@ const styles = stylex.create({
             ':hover': colors.primaryForeground
         },
         textDecoration: 'none',
-        outlineOffset: 0,
         backgroundColor: {
             default: 'transparent',
             ':hover': colors.transparentHover

package/dist/components/SignInScreen.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
-import { useApp, useModel } from "../hooks/appContext.js";
+import { useModel } from "../hooks/appContext.js";
 import { colors, controls, radii, space, widths } from "../theme/tokens.stylex.js";
 import { Button } from "./Button.js";
 import { Form } from "./Form.js";
 import { Text } from "./Text.js";
 import { TextField } from "./TextField.js";
 export function SignInScreen() {
-    const { name } = useApp();
+    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: name.charAt(0) }) }), _jsxs(Text, { as: "h1", variant: "title", tone: "primary", align: "center", children: ["Sign in to ", name] }), 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", 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" })] }) }));
 }
 const DEV_USER = 'ada@acme.test';
 const styles = stylex.create({

package/dist/components/Switch.js

@@ -3,11 +3,12 @@ import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import * as stylex from '@stylexjs/stylex';
 import { colors, lineHeights, motion, radii, space } from "../theme/tokens.stylex.js";
 import { interact } from "./interaction.js";
+import { focusRing } from "./controlLook.js";
 export function Switch({ label, checked, disabled = false, onChange, style }) {
     return (_jsx(BaseSwitch.Root, { "aria-label": label, checked: checked, disabled: disabled, onCheckedChange: (next) => {
             interact({ primitive: 'Switch', event: 'change', label });
             onChange(next);
-        }, className: (state) => stylex.props(styles.track, state.checked ? styles.on : styles.off, !disabled && (state.checked ? hovers.on : hovers.off), disabled && styles.disabled, style).className, children: _jsx(BaseSwitch.Thumb, { className: stylex.props(styles.thumb, disabled && styles.thumbDisabled).className }) }));
+        }, className: (state) => stylex.props(styles.track, state.checked ? styles.on : styles.off, !disabled && (state.checked ? hovers.on : hovers.off), disabled && styles.disabled, focusRing.visible, style).className, children: _jsx(BaseSwitch.Thumb, { className: stylex.props(styles.thumb, disabled && styles.thumbDisabled).className }) }));
 }
 const styles = stylex.create({
     track: {

package/dist/components/controlLook.d.ts

@@ -58,3 +58,13 @@ export declare const transparentLook: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
     }>;
 }>;
+export declare const focusRing: Readonly<{
+    readonly visible: Readonly<{
+        readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", `calc(${stylex.StyleXVar<string>} + ${stylex.StyleXVar<string>})`>;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "none" | "solid">;
+        readonly outlineColor: stylex.StyleXClassNameFor<"outlineColor", string>;
+    }>;
+    readonly inside: Readonly<{
+        readonly outlineOffset: stylex.StyleXClassNameFor<"outlineOffset", `calc(-1 * (${stylex.StyleXVar<string>} + ${stylex.StyleXVar<string>}))`>;
+    }>;
+}>;

package/dist/components/controlLook.js

@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { colors, controls, fontSizes, lineHeights, motion, radii } from "../theme/tokens.stylex.js";
+import { borders, colors, controls, fontSizes, lineHeights, motion, radii } from "../theme/tokens.stylex.js";
 export const controlSizes = stylex.create({
     xs: {
         gap: controls.gapXs,
@@ -65,3 +65,16 @@ export const transparentLook = stylex.create({
         backgroundColor: colors.transparentHover
     }
 });
+export const focusRing = stylex.create({
+    visible: {
+        outlineWidth: `calc(${borders.thin} + ${borders.hairline})`,
+        outlineStyle: {
+            default: 'none',
+            ':focus-visible': 'solid'
+        },
+        outlineColor: colors.brandBorderFocus
+    },
+    inside: {
+        outlineOffset: `calc(-1 * (${borders.thin} + ${borders.hairline}))`
+    }
+});

package/dist/components/icons.d.ts

@@ -6,9 +6,7 @@ type FilledDrawing = {
 export type IconDrawing = string | readonly string[] | FilledDrawing;
 export type IconName = keyof typeof builtInIcons | AppIconName;
 declare const builtInIcons: {
-    home: {
-        fill: string;
-    };
+    home: string[];
     folder: string[];
     settings: string[];
     sun: {
@@ -40,6 +38,9 @@ declare const builtInIcons: {
     enter: string;
     arrowLeft: string;
     arrowUp: string;
+    arrowUpRight: string;
+    circle: string;
+    copy: string[];
     arrowDown: string;
     logOut: string[];
 };

package/dist/components/icons.js

@@ -1,7 +1,7 @@
 const builtInIcons = {
-    home: {
-        fill: 'M19.5 9.90496V18.25H21V9.90496H19.5ZM4.5 18.25V9.90496H3V18.25H4.5ZM4.92486 8.966L11.1749 3.47358L10.1847 2.34683L3.93468 7.83925L4.92486 8.966ZM12.8251 3.47358L19.0751 8.966L20.0653 7.83925L13.8153 2.34683L12.8251 3.47358ZM11.75 15.5H12.25V14H11.75V15.5ZM13.5 16.75V19.25H15V16.75H13.5ZM10.5 19.25V16.75H9V19.25H10.5ZM8.75 19.5H5.75V21H8.75V19.5ZM15.25 21H18.25V19.5H15.25V21ZM9 19.25C9 19.3881 8.88807 19.5 8.75 19.5V21C9.7165 21 10.5 20.2165 10.5 19.25H9ZM13.5 19.25C13.5 20.2165 14.2835 21 15.25 21V19.5C15.1119 19.5 15 19.3881 15 19.25H13.5ZM12.25 15.5C12.9404 15.5 13.5 16.0596 13.5 16.75H15C15 15.2312 13.7688 14 12.25 14V15.5ZM11.75 14C10.2312 14 9 15.2312 9 16.75H10.5C10.5 16.0596 11.0596 15.5 11.75 15.5V14ZM11.1749 3.47358C11.6468 3.05885 12.3532 3.05885 12.8251 3.47358L13.8153 2.34683C12.7771 1.43443 11.2229 1.43443 10.1847 2.34683L11.1749 3.47358ZM3 18.25C3 19.7688 4.23122 21 5.75 21V19.5C5.05964 19.5 4.5 18.9404 4.5 18.25H3ZM19.5 18.25C19.5 18.9404 18.9404 19.5 18.25 19.5V21C19.7688 21 21 19.7688 21 18.25H19.5ZM21 9.90496C21 9.11401 20.6594 8.36136 20.0653 7.83925L19.0751 8.966C19.3452 9.20332 19.5 9.54544 19.5 9.90496H21ZM4.5 9.90496C4.5 9.54544 4.6548 9.20332 4.92486 8.966L3.93468 7.83925C3.34056 8.36136 3 9.11401 3 9.90496H4.5Z'
-    },
+    home: [
+        'M14.25 20.25H18.25C19.3546 20.25 20.25 19.3546 20.25 18.25V9.90496C20.25 9.32928 20.0019 8.78149 19.5702 8.40225L13.3202 2.91021C12.5644 2.24604 11.4356 2.24604 10.6798 2.91021L4.42977 8.40225C3.99813 8.78149 3.75 9.32928 3.75 9.90496V18.25C3.75 19.3546 4.64543 20.25 5.75 20.25H9.75V16.75C9.75 15.6454 10.6454 14.75 11.75 14.75H12.25C13.3546 14.75 14.25 15.6454 14.25 16.75V20.25Z'
+    ],
     folder: [
         'M9.13202 3.75H4.75C3.64543 3.75 2.75 4.64543 2.75 5.75V17.25C2.75 18.3546 3.64543 19.25 4.75 19.25H19.25C20.3546 19.25 21.25 18.3546 21.25 17.25V7.75C21.25 6.64543 20.3546 5.75 19.25 5.75H12.8124C12.2915 5.75 11.7911 5.54674 11.4177 5.18345L10.5267 4.31655C10.1534 3.95326 9.65297 3.75 9.13202 3.75Z',
         'M2.75 12.75V11.75C2.75 10.6454 3.64543 9.75 4.75 9.75H19.25C20.3546 9.75 21.25 10.6454 21.25 11.75V12.75'
@@ -77,6 +77,12 @@ const builtInIcons = {
     enter: 'M19 5v6.5a3 3 0 0 1-3 3H5.5M9 10.5l-4 4 4 4',
     arrowLeft: 'M19 12H5M11 6l-6 6 6 6',
     arrowUp: 'M12 19V5M6 11l6-6 6 6',
+    arrowUpRight: 'M7 17L17 7M8 7h9v9',
+    circle: 'M3.5 12a8.5 8.5 0 1 0 17 0a8.5 8.5 0 1 0 -17 0',
+    copy: [
+        'M10 9h8.5a1.5 1.5 0 0 1 1.5 1.5V19a1.5 1.5 0 0 1-1.5 1.5H10A1.5 1.5 0 0 1 8.5 19v-8.5A1.5 1.5 0 0 1 10 9z',
+        'M15.5 9V5.5A1.5 1.5 0 0 0 14 4H5.5A1.5 1.5 0 0 0 4 5.5V14a1.5 1.5 0 0 0 1.5 1.5H8.5'
+    ],
     arrowDown: 'M12 5v14M6 13l6 6 6-6',
     logOut: [
         'M14 4.5H7.5a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2H14',

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';
+    primitive: 'AppFrame' | 'Button' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup';
     event: 'click' | 'change' | 'select' | 'open' | 'close' | 'submit' | 'navigate';
     label: string;
     page: string | null;

package/dist/flows/accessFlows.js

@@ -31,16 +31,27 @@ function idsOf(rows) {
     return rows.map((row) => row.id);
 }
 export function accessFlows({ App }) {
-    if (inject('patternVisualFlows') !== undefined)
+    if (inject('patternVisualFlows') !== undefined) {
+        test.skip('Access flows run headless, in app test', () => undefined);
         return;
-    const { tables, routes } = App.definition;
+    }
+    const { tables, routes, services, memory } = App.definition;
     const seed = (inject('patternSeed') ?? {});
     const admins = inject('patternAdmins') ?? [];
+    const title = inject('patternTitle') ?? '';
     const [admin] = admins;
     async function started(signedInAs) {
         const gate = new Gate();
         const app = new App(createMemoryRouter(routeObjects(routes), { initialEntries: ['/'] }), {
-            api: memoryApi(tables, seed, { gate, signedInAs, admins }),
+            api: memoryApi(tables, seed, {
+                gate,
+                signedInAs,
+                admins,
+                title,
+                world: structuredClone(inject('patternWorld') ?? {}),
+                ...(services === undefined ? {} : { services }),
+                ...(memory === undefined ? {} : { memory })
+            }),
             cache: Cache.memory(),
             gate
         });
@@ -63,6 +74,11 @@ export function accessFlows({ App }) {
                 : []
         };
     }
+    if (Object.keys(tables).length === 0) {
+        test('Access: schema.ts has no tables yet, so there are no rules to check', () => {
+            expect(Object.keys(tables)).toEqual([]);
+        });
+    }
     for (const table of Object.values(tables)) {
         const name = table.name;
         const rows = seededRows(seed, name);

package/dist/flows/browser.d.ts

@@ -24,9 +24,11 @@ export type AppPage = {
     snapshot: () => Promise<unknown>;
     hold: (call: string) => Promise<void>;
     release: (call: string) => Promise<void>;
+    tick: () => Promise<void>;
+    world: (patch: object) => Promise<void>;
     reload: (path: string) => Promise<void>;
     screenshot: (file: string) => Promise<void>;
     captureAt: (viewport: ViewportName) => Promise<string>;
     close: () => Promise<void>;
 };
-export declare function openApp(browser: Browser, baseUrl: string, path: string, viewport: ViewportName, signedInAs: string | null, seed?: object, admins?: readonly string[]): Promise<AppPage>;
+export declare function openApp(browser: Browser, baseUrl: string, path: string, viewport: ViewportName, signedInAs: string | null, seed?: object, admins?: readonly string[], world?: unknown): Promise<AppPage>;

package/dist/flows/browser.js

@@ -81,7 +81,7 @@ function recordProblems(page, problems) {
         }
     });
 }
-export async function openApp(browser, baseUrl, path, viewport, signedInAs, seed, admins = []) {
+export async function openApp(browser, baseUrl, path, viewport, signedInAs, seed, admins = [], world = {}) {
     const { width, height, deviceScaleFactor } = viewports[viewport];
     const context = await browser.newContext({
         viewport: { width, height },
@@ -99,9 +99,10 @@ export async function openApp(browser, baseUrl, path, viewport, signedInAs, seed
         await context.addInitScript((value) => {
             Object.assign(globalThis, {
                 patternSeed: value.seed,
-                patternAdmins: value.admins
+                patternAdmins: value.admins,
+                patternWorld: value.world
             });
-        }, { seed, admins });
+        }, { seed, admins, world });
     }
     const page = await context.newPage();
     const problems = [];
@@ -142,6 +143,8 @@ export async function openApp(browser, baseUrl, path, viewport, signedInAs, seed
         snapshot,
         hold: (call) => page.evaluate((held) => globalThis.pattern.hold(held), call),
         release: (call) => page.evaluate((released) => globalThis.pattern.release(released), call),
+        tick: () => page.evaluate(() => globalThis.pattern.tick()),
+        world: (patch) => page.evaluate((changed) => globalThis.pattern.world(changed), patch),
         reload: load,
         screenshot: async (file) => {
             await settle();

package/dist/flows/flowBrowser.d.ts

@@ -11,11 +11,13 @@ declare module 'vitest' {
     }
 }
 export declare function closeFlowBrowser(): Promise<void>;
-export declare function openFlowPage(settings: VisualFlowSettings, viewport: ViewportName, startAt: string, signedInAs: string | null, seed: object, admins: readonly string[]): Promise<{
+export declare function openFlowPage(settings: VisualFlowSettings, viewport: ViewportName, startAt: string, signedInAs: string | null, seed: object, admins: readonly string[], world: unknown): Promise<{
     send: (command: unknown) => Promise<void>;
     snapshot: () => Promise<unknown>;
     hold: (call: string) => Promise<void>;
     release: (call: string) => Promise<void>;
+    tick: () => Promise<void>;
+    world: (patch: object) => Promise<void>;
     reload: (path: string) => Promise<void>;
     screenshot: (name: string) => Promise<void>;
     problems: string[];

package/dist/flows/flowBrowser.js

@@ -5,14 +5,16 @@ export async function closeFlowBrowser() {
     browser = undefined;
     await (await connected)?.close();
 }
-export async function openFlowPage(settings, viewport, startAt, signedInAs, seed, admins) {
+export async function openFlowPage(settings, viewport, startAt, signedInAs, seed, admins, world) {
     browser ??= connectChrome(settings.wsEndpoint);
-    const app = await openApp(await browser, settings.url, startAt, viewport, signedInAs, seed, admins);
+    const app = await openApp(await browser, settings.url, startAt, viewport, signedInAs, seed, admins, world);
     return {
         send: app.dispatch,
         snapshot: app.snapshot,
         hold: app.hold,
         release: app.release,
+        tick: app.tick,
+        world: app.world,
         reload: app.reload,
         screenshot: (name) => app.screenshot(`${settings.directory}/${name}-${viewport}.png`),
         problems: app.problems,

package/dist/flows/flows.d.ts

@@ -8,6 +8,8 @@ declare module 'vitest' {
     interface ProvidedContext {
         patternSeed?: Seed<Tables>;
         patternAdmins?: readonly string[];
+        patternTitle?: string;
+        patternWorld?: unknown;
     }
 }
 type Expected<Value> = Value extends readonly (infer Item)[] ? readonly Expected<Item>[] : Value extends object ? {
@@ -25,6 +27,10 @@ export type FlowStep<Command, Snapshot, Call extends string> = {
     release: Call;
 } | {
     restart: true;
+} | {
+    tick: true;
+} | {
+    world: object;
 };
 export type FlowOptions<Call extends string> = {
     startAt?: string;

package/dist/flows/flows.js

@@ -2,6 +2,7 @@ import { createMemoryRouter } from 'react-router';
 import { afterAll, expect, inject, test } from 'vitest';
 import { apiCalls, memoryApi } from "../api.js";
 import { Cache } from "../cache.js";
+import { manualClock } from "../clock.js";
 import { Gate } from "../gate.js";
 import { routeObjects } from "../routes.js";
 import { screenshotNameProblem } from "./screenshotName.js";
@@ -47,6 +48,12 @@ async function runSteps(name, steps, run) {
         else if ('restart' in step) {
             await run.restart();
         }
+        else if ('tick' in step) {
+            await run.tick();
+        }
+        else if ('world' in step) {
+            await run.world(step.world);
+        }
         else {
             expect(await run.snapshot(), `step ${index + 1} of "${name}": expected ${JSON.stringify(step.expect)}`).toMatchObject(step.expect);
         }
@@ -61,18 +68,30 @@ function withTestParams(path, failing, held) {
     return `${path}?${params.toString()}`;
 }
 export function defineFlow({ App }) {
-    const { tables, routes } = App.definition;
+    const { tables, routes, services, memory } = App.definition;
     const seed = (inject('patternSeed') ?? {});
     const admins = inject('patternAdmins') ?? [];
-    const calls = apiCalls(tables);
+    const title = inject('patternTitle') ?? '';
+    const startingWorld = inject('patternWorld') ?? {};
+    const calls = apiCalls(tables, services);
     const router = (path) => createMemoryRouter(routeObjects(routes), { initialEntries: [path] });
     function headless(name, steps, startAt, failing, signedInAs) {
         test(name, async () => {
             const gate = new Gate(failing);
+            const world = structuredClone(startingWorld);
             const deps = {
-                api: memoryApi(tables, seed, { gate, signedInAs, admins }),
+                api: memoryApi(tables, seed, {
+                    gate,
+                    signedInAs,
+                    admins,
+                    title,
+                    world,
+                    ...(services === undefined ? {} : { services }),
+                    ...(memory === undefined ? {} : { memory })
+                }),
                 cache: Cache.memory(),
-                gate
+                gate,
+                clock: manualClock()
             };
             let app = new App(router(startAt), deps);
             await runSteps(name, steps, {
@@ -86,6 +105,12 @@ export function defineFlow({ App }) {
                 release: async (call) => gate.release(call),
                 restart: async () => {
                     app = new App(router(app.getSnapshot().path), deps);
+                },
+                tick: async () => {
+                    app.tick();
+                },
+                world: async (patch) => {
+                    Object.assign(Object(world), patch);
                 }
             });
             await app.whenIdle();
@@ -109,7 +134,7 @@ export function defineFlow({ App }) {
             test(`${name} [${viewport}]`, async () => {
                 const { openFlowPage } = await import("./flowBrowser.js");
                 const held = new Set();
-                const page = await openFlowPage(visual, viewport, withTestParams(startAt, failing, held), signedInAs, seed, admins);
+                const page = await openFlowPage(visual, viewport, withTestParams(startAt, failing, held), signedInAs, seed, admins, startingWorld);
                 let stepFailure;
                 try {
                     await runSteps(name, steps, {
@@ -124,6 +149,8 @@ export function defineFlow({ App }) {
                             held.delete(call);
                             await page.release(call);
                         },
+                        tick: page.tick,
+                        world: page.world,
                         restart: async () => {
                             const snapshot = await page.snapshot();
                             const path = typeof snapshot === 'object' && snapshot !== null