@trypattern/sdk 0.1.10 → 0.1.12

package/dist/api.js

@@ -3,6 +3,7 @@ import { HttpSessionApi, MemorySessionApi, sessionCalls } from "./auth/sessionAp
 import { HttpAppInfoApi, MemoryAppInfoApi, appInfoCalls } from "./appInfo.js";
 import { httpServices, memoryServices } from "./serviceClients.js";
 import { serviceCallNames } from "./services.js";
+import { ownerIdOf } from "./table.js";
 import { httpTables, memoryTables, tableCalls } from "./tables.js";
 export function apiCalls(tables, services = {}) {
     return [
@@ -47,7 +48,12 @@ export function browserApi(tables, seed, gate, { inMemory, admins, ...setup }) {
     const options = { latencyMs: 0, gate };
     return {
         tables: inMemory
-            ? memoryTables(tables, seed, () => viewerByEmail(session.rememberedUser(), emails), { latencyMs: 0, gate })
+            ? memoryTables(tables, seed, () => {
+                const user = session.rememberedUser();
+                return viewerByEmail(user === undefined
+                    ? undefined
+                    : { ...user, id: ownerIdOf(user.email) }, emails);
+            }, { latencyMs: 0, gate })
             : httpTables(tables, gate, () => session.reportSignedOut()),
         session,
         app: new HttpAppInfoApi(gate),

package/dist/components/Button.d.ts

@@ -1,24 +1,2 @@
-import type { AppPath } from '../registered.ts';
-import type { ReactNode } from 'react';
-import type { IconName } from './icons.ts';
-import type { Placement } from './Placement.ts';
-import type { Size } from './Size.ts';
-type ButtonProps = {
-    children: ReactNode;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent';
-    tone?: 'neutral' | 'brand' | 'danger';
-    size?: Size;
-    to?: AppPath;
-    href?: string;
-    icon?: IconName;
-    trailingIcon?: IconName;
-    shortcut?: readonly string[];
-    type?: 'button' | 'submit';
-    disabled?: boolean;
-    isPending?: boolean;
-    isFullWidth?: boolean;
-    onClick?: () => void;
-    style?: Placement;
-};
-export declare function Button({ children, variant, tone, size, to, href, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style }: ButtonProps): import("react").JSX.Element;
-export {};
+import type { ButtonProps } from './ButtonBody.tsx';
+export declare function Button(props: ButtonProps): import("react").JSX.Element;

package/dist/components/Button.js

@@ -1,252 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button as BaseButton } from '@base-ui/react/button';
-import { Link as RouterLink } from 'react-router';
-import * as stylex from '@stylexjs/stylex';
-import { colors, controls, fontWeights, motion, shadows } from "../theme/tokens.stylex.js";
-import { controlSizes, focusRing } from "./controlLook.js";
-import { Icon } from "./Icon.js";
-import { interact, textOf } from "./interaction.js";
-import { Kbd } from "./Kbd.js";
-import { Spinner } from "./Spinner.js";
-export function Button({ children, variant = 'primary', tone = variant === 'primary' ? 'brand' : 'neutral', size = 'md', to, href, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, onClick, style }) {
-    const isDisabled = disabled || isPending;
-    const report = () => {
-        interact({ primitive: 'Button', event: 'click', label: textOf(children) });
-        onClick?.();
-    };
-    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
-    const content = (_jsxs("span", { ...stylex.props(styles.stack), children: [_jsxs("span", { ...stylex.props(styles.content, isPending && styles.hidden), children: [icon === undefined ? null : _jsx(Icon, { name: icon, size: size }), _jsx("span", { ...stylex.props(styles.label, shortcut !== undefined && styles.labelBeforeShortcut), children: children }), trailingIcon === undefined ? null : (_jsx(Icon, { name: trailingIcon, size: size })), shortcut === undefined ? null : _jsx(Kbd, { keys: shortcut })] }), isPending ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending), children: _jsx(Spinner, { size: size }) })) : null] }));
-    if (href !== undefined) {
-        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: report, className: className, children: content }));
-    }
-    if (to !== undefined) {
-        return (_jsx(RouterLink, { to: to, onClick: report, className: className, children: content }));
-    }
-    return (_jsx(BaseButton, { type: type, disabled: isDisabled, focusableWhenDisabled: true, "aria-busy": isPending || undefined, onClick: report, className: className, children: content }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonBody } from "./ButtonBody.js";
+export function Button(props) {
+    return _jsx(ButtonBody, { ...props });
 }
-const toneKeys = {
-    neutral: 'Neutral',
-    brand: 'Brand',
-    danger: 'Danger'
-};
-const styles = stylex.create({
-    button: {
-        position: 'relative',
-        display: 'flex',
-        flexShrink: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: 0,
-        fontWeight: fontWeights.medium,
-        whiteSpace: 'nowrap',
-        textDecoration: 'none',
-        touchAction: 'manipulation',
-        outlineOffset: 0,
-        transitionTimingFunction: motion.easeOut,
-        transitionDuration: motion.fast,
-        transitionProperty: 'color, background-color, transform'
-    },
-    fullWidth: {
-        justifyContent: 'flex-start',
-        width: '100%'
-    },
-    stack: {
-        display: 'grid',
-        flexGrow: 1,
-        gridTemplateColumns: 'minmax(0, 1fr)',
-        gap: 'inherit',
-        justifyContent: 'inherit',
-        minWidth: 0,
-        overflow: 'clip'
-    },
-    content: {
-        display: 'flex',
-        gridRowStart: 1,
-        gridColumnStart: 1,
-        gap: 'inherit',
-        alignItems: 'center',
-        justifyContent: 'inherit',
-        minWidth: 0,
-        transitionTimingFunction: motion.easeOut,
-        transitionDuration: motion.base,
-        transitionProperty: 'opacity, transform'
-    },
-    hidden: {
-        opacity: 0,
-        transform: 'translateY(24px)'
-    },
-    pending: {
-        display: 'flex',
-        gridRowStart: 1,
-        gridColumnStart: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        pointerEvents: 'none'
-    },
-    label: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    },
-    labelBeforeShortcut: {
-        flexGrow: 1,
-        textAlign: 'start'
-    },
-    disabled: {
-        color: colors.disabledForeground,
-        backgroundColor: colors.disabled,
-        boxShadow: 'none'
-    },
-    disabledTransparent: {
-        backgroundColor: 'transparent'
-    }
-});
-const leadingIconSizes = stylex.create({
-    xs: { paddingInlineStart: `calc(${controls.paddingXs} - 2px)` },
-    sm: { paddingInlineStart: `calc(${controls.paddingSm} - 2px)` },
-    md: { paddingInlineStart: `calc(${controls.paddingMd} - 4px)` },
-    lg: { paddingInlineStart: `calc(${controls.paddingLg} - 2px)` },
-    xl: { paddingInlineStart: `calc(${controls.paddingXl} - 4px)` }
-});
-const trailingIconSizes = stylex.create({
-    xs: { paddingInlineEnd: `calc(${controls.paddingXs} - 2px)` },
-    sm: { paddingInlineEnd: `calc(${controls.paddingSm} - 2px)` },
-    md: { paddingInlineEnd: `calc(${controls.paddingMd} - 4px)` },
-    lg: { paddingInlineEnd: `calc(${controls.paddingLg} - 2px)` },
-    xl: { paddingInlineEnd: `calc(${controls.paddingXl} - 4px)` }
-});
-const looks = stylex.create({
-    primaryNeutral: {
-        color: colors.onInvertedForeground,
-        backgroundColor: colors.invertedSolid
-    },
-    primaryBrand: {
-        color: colors.onBrandSolidForeground,
-        backgroundColor: colors.brandSolid
-    },
-    primaryDanger: {
-        color: colors.onDangerSolidForeground,
-        backgroundColor: colors.dangerSolid
-    },
-    secondaryNeutral: {
-        color: colors.primaryForeground,
-        backgroundColor: colors.componentOnContainerStrong,
-        boxShadow: shadows.default
-    },
-    secondaryBrand: {
-        color: colors.brandForeground,
-        backgroundColor: colors.componentOnContainerStrong,
-        boxShadow: shadows.default
-    },
-    secondaryDanger: {
-        color: colors.dangerForeground,
-        backgroundColor: colors.componentOnContainerStrong,
-        boxShadow: shadows.default
-    },
-    tertiaryNeutral: {
-        color: colors.secondaryForeground,
-        backgroundColor: colors.component
-    },
-    tertiaryBrand: {
-        color: colors.onBrandSubtleForeground,
-        backgroundColor: colors.brandSubtle
-    },
-    tertiaryDanger: {
-        color: colors.dangerForeground,
-        backgroundColor: colors.dangerSubtle
-    },
-    transparentNeutral: {
-        color: colors.secondaryForeground,
-        backgroundColor: 'transparent'
-    },
-    transparentBrand: {
-        color: colors.brandForeground,
-        backgroundColor: 'transparent'
-    },
-    transparentDanger: {
-        color: colors.dangerForeground,
-        backgroundColor: 'transparent'
-    }
-});
-const hovers = stylex.create({
-    primaryNeutral: {
-        backgroundColor: {
-            default: colors.invertedSolid,
-            ':hover': colors.invertedSolidHover,
-            ':active': colors.invertedSolidActive
-        }
-    },
-    primaryBrand: {
-        backgroundColor: {
-            default: colors.brandSolid,
-            ':hover': colors.brandSolidHover,
-            ':active': colors.brandSolidActive
-        }
-    },
-    primaryDanger: {
-        backgroundColor: {
-            default: colors.dangerSolid,
-            ':hover': colors.dangerSolidHover,
-            ':active': colors.dangerSolidActive
-        }
-    },
-    secondaryNeutral: {
-        backgroundColor: {
-            default: colors.componentOnContainerStrong,
-            ':hover': colors.componentOnContainerStrongHover
-        }
-    },
-    secondaryBrand: {
-        backgroundColor: {
-            default: colors.componentOnContainerStrong,
-            ':hover': colors.componentOnContainerStrongHover
-        }
-    },
-    secondaryDanger: {
-        backgroundColor: {
-            default: colors.componentOnContainerStrong,
-            ':hover': colors.componentOnContainerStrongHover
-        }
-    },
-    tertiaryNeutral: {
-        backgroundColor: {
-            default: colors.component,
-            ':hover': colors.componentHover,
-            ':active': colors.componentActive
-        }
-    },
-    tertiaryBrand: {
-        backgroundColor: {
-            default: colors.brandSubtle,
-            ':hover': colors.brandSubtleHover
-        }
-    },
-    tertiaryDanger: {
-        backgroundColor: {
-            default: colors.dangerSubtle,
-            ':hover': colors.dangerSubtleHover,
-            ':active': colors.dangerSubtleActive
-        }
-    },
-    transparentNeutral: {
-        color: {
-            default: colors.secondaryForeground,
-            ':hover': colors.primaryForeground
-        },
-        backgroundColor: {
-            default: 'transparent',
-            ':hover': colors.transparentHover
-        }
-    },
-    transparentBrand: {
-        backgroundColor: {
-            default: 'transparent',
-            ':hover': colors.transparentHover
-        }
-    },
-    transparentDanger: {
-        backgroundColor: {
-            default: 'transparent',
-            ':hover': colors.dangerSubtleHover
-        }
-    }
-});

package/dist/components/ButtonBody.d.ts

@@ -0,0 +1,25 @@
+import type { AppPath } from '../registered.ts';
+import type { ReactNode } from 'react';
+import type { IconName } from './icons.ts';
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+export type ButtonProps = {
+    children: ReactNode;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent';
+    tone?: 'neutral' | 'brand' | 'danger';
+    size?: Size;
+    to?: AppPath;
+    href?: string;
+    icon?: IconName;
+    trailingIcon?: IconName;
+    shortcut?: readonly string[];
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    isPending?: boolean;
+    isFullWidth?: boolean;
+    onClick?: () => void;
+    style?: Placement;
+};
+export declare function ButtonBody({ children, variant, tone, size, to, href, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style, isIconPinned }: ButtonProps & {
+    isIconPinned?: boolean;
+}): import("react").JSX.Element;

package/dist/components/ButtonBody.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton } from '@base-ui/react/button';
+import { Link as RouterLink } from 'react-router';
+import * as stylex from '@stylexjs/stylex';
+import { colors, controls, fontWeights, iconSizes, motion, shadows } from "../theme/tokens.stylex.js";
+import { controlSizes, focusRing } from "./controlLook.js";
+import { Icon } from "./Icon.js";
+import { interact, textOf } from "./interaction.js";
+import { Kbd } from "./Kbd.js";
+import { Spinner } from "./Spinner.js";
+export function ButtonBody({ children, variant = 'primary', tone = variant === 'primary' ? 'brand' : 'neutral', size = 'md', to, href, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, onClick, style, isIconPinned = false }) {
+    const isDisabled = disabled || isPending;
+    const report = () => {
+        interact({ primitive: 'Button', event: 'click', label: textOf(children) });
+        onClick?.();
+    };
+    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && !isIconPinned && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
+    const content = (_jsxs("span", { ...stylex.props(styles.stack), children: [_jsxs("span", { ...stylex.props(styles.content, isIconPinned && styles.pinnedContent, isPending && styles.hidden), children: [icon === undefined ? null : _jsx(Icon, { name: icon, size: size }), _jsx("span", { ...stylex.props(styles.label, shortcut !== undefined && styles.labelBeforeShortcut, isIconPinned && styles.labelBetweenPins), children: children }), isIconPinned ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(pinBalances[size]) })) : null, trailingIcon === undefined ? null : (_jsx(Icon, { name: trailingIcon, size: size })), shortcut === undefined ? null : _jsx(Kbd, { keys: shortcut })] }), isPending ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending), children: _jsx(Spinner, { size: size }) })) : null] }));
+    if (href !== undefined) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: report, className: className, children: content }));
+    }
+    if (to !== undefined) {
+        return (_jsx(RouterLink, { to: to, onClick: report, className: className, children: content }));
+    }
+    return (_jsx(BaseButton, { type: type, disabled: isDisabled, focusableWhenDisabled: true, "aria-busy": isPending || undefined, onClick: report, className: className, children: content }));
+}
+const toneKeys = {
+    neutral: 'Neutral',
+    brand: 'Brand',
+    danger: 'Danger'
+};
+const styles = stylex.create({
+    button: {
+        position: 'relative',
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: 0,
+        fontWeight: fontWeights.medium,
+        whiteSpace: 'nowrap',
+        textDecoration: 'none',
+        touchAction: 'manipulation',
+        outlineOffset: 0,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'color, background-color, transform'
+    },
+    fullWidth: {
+        justifyContent: 'flex-start',
+        width: '100%'
+    },
+    stack: {
+        display: 'grid',
+        flexGrow: 1,
+        gridTemplateColumns: 'minmax(0, 1fr)',
+        gap: 'inherit',
+        justifyContent: 'inherit',
+        minWidth: 0,
+        overflow: 'clip'
+    },
+    content: {
+        display: 'flex',
+        gridRowStart: 1,
+        gridColumnStart: 1,
+        gap: 'inherit',
+        alignItems: 'center',
+        justifyContent: 'inherit',
+        minWidth: 0,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity, transform'
+    },
+    hidden: {
+        opacity: 0,
+        transform: 'translateY(24px)'
+    },
+    pending: {
+        display: 'flex',
+        gridRowStart: 1,
+        gridColumnStart: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        pointerEvents: 'none'
+    },
+    label: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
+    },
+    labelBeforeShortcut: {
+        flexGrow: 1,
+        textAlign: 'start'
+    },
+    pinnedContent: {
+        justifyContent: 'flex-start'
+    },
+    labelBetweenPins: {
+        flexGrow: 1,
+        textAlign: 'center'
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        boxShadow: 'none'
+    },
+    disabledTransparent: {
+        backgroundColor: 'transparent'
+    }
+});
+const leadingIconSizes = stylex.create({
+    xs: { paddingInlineStart: `calc(${controls.paddingXs} - 2px)` },
+    sm: { paddingInlineStart: `calc(${controls.paddingSm} - 2px)` },
+    md: { paddingInlineStart: `calc(${controls.paddingMd} - 4px)` },
+    lg: { paddingInlineStart: `calc(${controls.paddingLg} - 2px)` },
+    xl: { paddingInlineStart: `calc(${controls.paddingXl} - 4px)` }
+});
+const trailingIconSizes = stylex.create({
+    xs: { paddingInlineEnd: `calc(${controls.paddingXs} - 2px)` },
+    sm: { paddingInlineEnd: `calc(${controls.paddingSm} - 2px)` },
+    md: { paddingInlineEnd: `calc(${controls.paddingMd} - 4px)` },
+    lg: { paddingInlineEnd: `calc(${controls.paddingLg} - 2px)` },
+    xl: { paddingInlineEnd: `calc(${controls.paddingXl} - 4px)` }
+});
+const looks = stylex.create({
+    primaryNeutral: {
+        color: colors.onInvertedForeground,
+        backgroundColor: colors.invertedSolid
+    },
+    primaryBrand: {
+        color: colors.onBrandSolidForeground,
+        backgroundColor: colors.brandSolid
+    },
+    primaryDanger: {
+        color: colors.onDangerSolidForeground,
+        backgroundColor: colors.dangerSolid
+    },
+    secondaryNeutral: {
+        color: colors.primaryForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    secondaryBrand: {
+        color: colors.brandForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    secondaryDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: colors.componentOnContainerStrong,
+        boxShadow: shadows.default
+    },
+    tertiaryNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: colors.component
+    },
+    tertiaryBrand: {
+        color: colors.onBrandSubtleForeground,
+        backgroundColor: colors.brandSubtle
+    },
+    tertiaryDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: colors.dangerSubtle
+    },
+    transparentNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentBrand: {
+        color: colors.brandForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: 'transparent'
+    }
+});
+const hovers = stylex.create({
+    primaryNeutral: {
+        backgroundColor: {
+            default: colors.invertedSolid,
+            ':hover': colors.invertedSolidHover,
+            ':active': colors.invertedSolidActive
+        }
+    },
+    primaryBrand: {
+        backgroundColor: {
+            default: colors.brandSolid,
+            ':hover': colors.brandSolidHover,
+            ':active': colors.brandSolidActive
+        }
+    },
+    primaryDanger: {
+        backgroundColor: {
+            default: colors.dangerSolid,
+            ':hover': colors.dangerSolidHover,
+            ':active': colors.dangerSolidActive
+        }
+    },
+    secondaryNeutral: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    secondaryBrand: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    secondaryDanger: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    tertiaryNeutral: {
+        backgroundColor: {
+            default: colors.component,
+            ':hover': colors.componentHover,
+            ':active': colors.componentActive
+        }
+    },
+    tertiaryBrand: {
+        backgroundColor: {
+            default: colors.brandSubtle,
+            ':hover': colors.brandSubtleHover
+        }
+    },
+    tertiaryDanger: {
+        backgroundColor: {
+            default: colors.dangerSubtle,
+            ':hover': colors.dangerSubtleHover,
+            ':active': colors.dangerSubtleActive
+        }
+    },
+    transparentNeutral: {
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        },
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    transparentBrand: {
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        }
+    },
+    transparentDanger: {
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.dangerSubtleHover
+        }
+    }
+});
+const pinBalances = stylex.create({
+    xs: { flexShrink: 0, width: iconSizes.xs },
+    sm: { flexShrink: 0, width: iconSizes.sm },
+    md: { flexShrink: 0, width: iconSizes.md },
+    lg: { flexShrink: 0, width: iconSizes.lg },
+    xl: { flexShrink: 0, width: iconSizes.xl }
+});

package/dist/components/ContinueWithGoogle.d.ts

@@ -0,0 +1,11 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+type ContinueWithGoogleProps = {
+    onClick: () => void;
+    size?: Size;
+    disabled?: boolean;
+    isPending?: boolean;
+    style?: Placement;
+};
+export declare function ContinueWithGoogle({ onClick, size, disabled, isPending, style }: ContinueWithGoogleProps): import("react").JSX.Element;
+export {};

package/dist/components/ContinueWithGoogle.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonBody } from "./ButtonBody.js";
+export function ContinueWithGoogle({ onClick, size = 'md', disabled = false, isPending = false, style }) {
+    return (_jsx(ButtonBody, { variant: "secondary", icon: "google", isIconPinned: true, size: size, disabled: disabled, isPending: isPending, onClick: onClick, ...(style === undefined ? {} : { style }), children: "Continue with Google" }));
+}

package/dist/components/Icon.js

@@ -5,7 +5,7 @@ import { shapeOf } from "./icons.js";
 import { tones } from "./tones.js";
 export function Icon({ name, size = 'md', tone = 'inherit', weight = 'regular' }) {
     const shape = shapeOf(name);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: weight === 'light' ? '1.5' : '2', strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.paths.map((path) => (_jsx("path", { d: path }, path))) }));
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: weight === 'light' ? '1.5' : '2', strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.paths.map((path, index) => (_jsx("path", { d: path, fill: shape.colors?.[index] }, path))) }));
 }
 const styles = stylex.create({
     icon: {

package/dist/components/ListRow.d.ts

@@ -2,12 +2,14 @@ import type { ReactNode } from 'react';
 import type { AppPath } from '../registered.ts';
 type ListRowProps = {
     to?: AppPath;
+    href?: string;
     onClick?: () => void;
     isMuted?: boolean;
     isCurrent?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     leading?: ReactNode;
     trailing?: ReactNode;
     children: ReactNode;
 };
-export declare function ListRow({ to, onClick, isMuted, isCurrent, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
+export declare function ListRow({ to, href, onClick, isMuted, isCurrent, size, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
 export {};

package/dist/components/ListRow.js

@@ -5,20 +5,24 @@ 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, isCurrent = false, leading, trailing, children }) {
+export function ListRow({ to, href, onClick, isMuted = false, isCurrent = false, size = 'md', 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, isCurrent && styles.current, focusRing.visible, focusRing.inside);
+    const look = stylex.props(styles.row, (to !== undefined || href !== undefined || onClick !== undefined) &&
+        styles.interactive, isMuted && styles.muted, isCurrent && styles.current, size === 'sm' && styles.small, size === 'lg' && styles.large, focusRing.visible, focusRing.inside);
     const report = () => {
         interact({
             primitive: 'ListRow',
-            event: to === undefined ? 'click' : 'navigate',
-            label: textOf(children) || (to ?? '')
+            event: to === undefined && href === undefined ? 'click' : 'navigate',
+            label: textOf(children) || (to ?? href ?? '')
         });
         onClick?.();
     };
     if (to !== undefined) {
         return (_jsx(RouterLink, { to: to, onClick: report, "aria-current": isCurrent ? 'page' : undefined, ...look, children: content }));
     }
+    if (href !== undefined) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", onClick: report, ...look, children: content }));
+    }
     if (onClick !== undefined) {
         return (_jsx(BaseButton, { onClick: report, "aria-pressed": isCurrent, className: look.className, children: content }));
     }
@@ -49,6 +53,16 @@ const styles = stylex.create({
     current: {
         backgroundColor: colors.transparentHover
     },
+    large: {
+        height: 'auto',
+        minHeight: controls.heightXl,
+        paddingBlock: space.md
+    },
+    small: {
+        gap: space.sm,
+        height: controls.heightMd,
+        paddingInline: space.sm
+    },
     main: {
         display: 'flex',
         flexGrow: 1,

package/dist/components/ScrollArea.d.ts

@@ -10,6 +10,7 @@ type ScrollAreaProps = {
         paddingBlock?: number | string;
         paddingInline?: number | string;
     }>;
+    axis?: 'vertical' | 'horizontal';
 };
-export declare function ScrollArea({ children, style }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ children, style, axis }: ScrollAreaProps): import("react").JSX.Element;
 export {};

package/dist/components/ScrollArea.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
-export function ScrollArea({ children, style }) {
-    return _jsx("div", { ...stylex.props(styles.scroll, style), children: children });
+export function ScrollArea({ children, style, axis = 'vertical' }) {
+    return (_jsx("div", { ...stylex.props(styles.scroll, axis === 'horizontal' && styles.horizontal, style), children: children }));
 }
 const styles = stylex.create({
     scroll: {
@@ -9,5 +9,10 @@ const styles = stylex.create({
         minHeight: 0,
         overflowY: 'auto',
         overscrollBehavior: 'contain'
+    },
+    horizontal: {
+        height: 'auto',
+        overflowX: 'auto',
+        overflowY: 'hidden'
     }
 });

package/dist/components/Text.d.ts

@@ -3,7 +3,7 @@ import type { Placement } from './Placement.ts';
 import type { Tone } from './tones.ts';
 type TextProps = {
     children: ReactNode;
-    variant?: 'heading' | 'subheading' | 'title' | 'label' | 'body' | 'caption' | 'code';
+    variant?: 'heading' | 'subheading' | 'title' | 'lead' | 'label' | 'body' | 'caption' | 'code';
     tone?: Tone;
     align?: 'start' | 'center' | 'end';
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3';

package/dist/components/Text.js

@@ -23,17 +23,23 @@ const styles = stylex.create({
 const variants = stylex.create({
     heading: {
         fontSize: fontSizes.heading5,
-        fontWeight: fontWeights.semibold,
-        lineHeight: lineHeights.heading5
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.heading5,
+        letterSpacing: '-0.01em'
     },
     subheading: {
         fontSize: fontSizes.heading6,
-        fontWeight: fontWeights.semibold,
+        fontWeight: fontWeights.medium,
         lineHeight: lineHeights.heading6
     },
     title: {
         fontSize: fontSizes.bodyBase,
-        fontWeight: fontWeights.semibold,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.body
+    },
+    lead: {
+        fontSize: fontSizes.bodyBase,
+        fontWeight: fontWeights.normal,
         lineHeight: lineHeights.body
     },
     label: {

package/dist/components/TextField.d.ts

@@ -1,3 +1,4 @@
+import type { IconName } from './icons.ts';
 import type { Placement } from './Placement.ts';
 import type { Size } from './Size.ts';
 type TextFieldProps = {
@@ -21,7 +22,8 @@ type TextFieldProps = {
     multiline?: boolean;
     rows?: number;
     size?: Size;
+    icon?: IconName;
     style?: Placement;
 };
-export declare function TextField({ label, isLabelHidden, description, error, onChange, multiline, rows, size, style, ...input }: TextFieldProps): import("react").JSX.Element;
+export declare function TextField({ label, isLabelHidden, description, error, onChange, multiline, rows, size, icon, style, ...input }: TextFieldProps): import("react").JSX.Element;
 export {};

package/dist/components/TextField.js

@@ -3,18 +3,19 @@ import { Field } from '@base-ui/react/field';
 import * as stylex from '@stylexjs/stylex';
 import { useRef } from 'react';
 import { borders, colors, controls, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
+import { Icon } from "./Icon.js";
 import { controlSizes } from "./controlLook.js";
 import { interact } from "./interaction.js";
-export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', style, ...input }) {
+export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', icon, style, ...input }) {
     const isInvalid = error !== undefined;
     const valueOnFocus = useRef('');
-    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsx(Field.Control, { ...input, ...(multiline ? { render: _jsx("textarea", { rows: rows }) } : {}), "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
-                    valueOnFocus.current = event.currentTarget.value;
-                }, onBlur: (event) => {
-                    if (event.currentTarget.value !== valueOnFocus.current) {
-                        interact({ primitive: 'TextField', event: 'change', label });
-                    }
-                }, className: stylex.props(styles.input, controlSizes[size], multiline && styles.multiline, multiline && multilinePaddings[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 }))] }));
+    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsxs("div", { ...stylex.props(styles.control), children: [icon === undefined ? null : (_jsx("span", { ...stylex.props(styles.icon), children: _jsx(Icon, { name: icon, tone: "tertiary" }) })), _jsx(Field.Control, { ...input, ...(multiline ? { render: _jsx("textarea", { rows: rows }) } : {}), "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
+                            valueOnFocus.current = event.currentTarget.value;
+                        }, onBlur: (event) => {
+                            if (event.currentTarget.value !== valueOnFocus.current) {
+                                interact({ primitive: 'TextField', event: 'change', label });
+                            }
+                        }, className: stylex.props(styles.input, controlSizes[size], multiline && styles.multiline, multiline && multilinePaddings[size], icon !== undefined && styles.withIcon, 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}`;
@@ -25,6 +26,22 @@ const styles = stylex.create({
         gap: space.xs,
         minWidth: 0
     },
+    control: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    icon: {
+        position: 'absolute',
+        insetBlock: 0,
+        insetInlineStart: space.sm,
+        display: 'flex',
+        alignItems: 'center',
+        pointerEvents: 'none'
+    },
+    withIcon: {
+        paddingInlineStart: `calc(${space.xl} + ${space.xs})`
+    },
     label: {
         fontWeight: fontWeights.medium,
         color: colors.primaryForeground

package/dist/components/icons.d.ts

@@ -2,6 +2,7 @@ import type { AppIconName } from '../registered.ts';
 type FilledDrawing = {
     readonly fill: string | readonly string[];
     readonly rule?: 'evenodd';
+    readonly colors?: readonly string[];
 };
 export type IconDrawing = string | readonly string[] | FilledDrawing;
 export type IconName = keyof typeof builtInIcons | AppIconName;
@@ -12,6 +13,10 @@ declare const builtInIcons: {
     sun: {
         fill: string[];
     };
+    google: {
+        fill: string[];
+        colors: string[];
+    };
     moon: {
         fill: string;
     };
@@ -54,9 +59,11 @@ export declare function shapeOf(name: IconName): {
     paths: readonly string[];
     isFilled: boolean;
     rule?: never;
+    colors?: never;
 } | {
     paths: string[];
     isFilled: boolean;
     rule: "evenodd" | undefined;
+    colors: readonly string[] | undefined;
 };
 export {};

package/dist/components/icons.js

@@ -23,6 +23,15 @@ const builtInIcons = {
             'M7.75736 7.75736C10.1005 5.41421 13.8995 5.41421 16.2426 7.75736C18.5858 10.1005 18.5858 13.8995 16.2426 16.2426C13.8995 18.5858 10.1005 18.5858 7.75736 16.2426C5.41421 13.8995 5.41421 10.1005 7.75736 7.75736Z'
         ]
     },
+    google: {
+        fill: [
+            'M22.5 12.3c0-.8-.1-1.5-.2-2.2H12v4.2h5.9a5 5 0 0 1-2.2 3.3v2.7h3.5c2.1-1.9 3.3-4.7 3.3-8z',
+            'M12 23c3 0 5.5-1 7.3-2.7l-3.5-2.7c-1 .7-2.3 1.1-3.8 1.1-2.9 0-5.4-2-6.3-4.7H2.1v2.8A11 11 0 0 0 12 23z',
+            'M5.7 14c-.2-.7-.4-1.4-.4-2s.1-1.4.4-2V7.2H2.1a11 11 0 0 0 0 9.7L5.7 14z',
+            'M12 5.4c1.6 0 3.1.6 4.2 1.7l3.1-3.1A11 11 0 0 0 2.1 7.2L5.7 10c.9-2.7 3.4-4.6 6.3-4.6z'
+        ],
+        colors: ['#4285F4', '#34A853', '#FBBC05', '#EA4335']
+    },
     moon: {
         fill: 'M12.0517 3.59971C12.2712 3.28123 12.2873 2.86472 12.0931 2.53021C11.8989 2.19569 11.5292 2.00315 11.1438 2.03581C6.0214 2.46985 2 6.76372 2 11.9979C2 17.5197 6.47632 21.996 11.9981 21.996C17.2324 21.996 21.5264 17.9745 21.9602 12.8519C21.9929 12.4664 21.8003 12.0968 21.4658 11.9026C21.1313 11.7084 20.7148 11.7246 20.3963 11.9441C19.4302 12.61 18.2602 12.9998 16.9961 12.9998C13.6824 12.9998 10.9961 10.3135 10.9961 6.99976C10.9961 5.73577 11.3858 4.56582 12.0517 3.59971Z'
     },
@@ -107,7 +116,12 @@ export function shapeOf(name) {
         return { paths: [drawing], isFilled: false };
     if (isPathList(drawing))
         return { paths: drawing, isFilled: false };
-    return { paths: [drawing.fill].flat(), isFilled: true, rule: drawing.rule };
+    return {
+        paths: [drawing.fill].flat(),
+        isFilled: true,
+        rule: drawing.rule,
+        colors: drawing.colors
+    };
 }
 function isPathList(drawing) {
     return Array.isArray(drawing);

package/dist/react.d.ts

@@ -14,6 +14,7 @@ export { CommandPalette } from './components/CommandPalette.tsx';
 export type { CommandMenuItem } from './components/CommandMenu.tsx';
 export { Content } from './components/Content.tsx';
 export { ContextMenu } from './components/ContextMenu.tsx';
+export { ContinueWithGoogle } from './components/ContinueWithGoogle.tsx';
 export { CopyButton } from './components/CopyButton.tsx';
 export { Dialog } from './components/Dialog.tsx';
 export { Divider } from './components/Divider.tsx';

package/dist/react.js

@@ -13,6 +13,7 @@ export { CommandMenu } from "./components/CommandMenu.js";
 export { CommandPalette } from "./components/CommandPalette.js";
 export { Content } from "./components/Content.js";
 export { ContextMenu } from "./components/ContextMenu.js";
+export { ContinueWithGoogle } from "./components/ContinueWithGoogle.js";
 export { CopyButton } from "./components/CopyButton.js";
 export { Dialog } from "./components/Dialog.js";
 export { Divider } from "./components/Divider.js";

package/dist/server/session.js

@@ -43,7 +43,7 @@ export async function sessionCookieFor(env, user) {
         email: user.email,
         recheckAt: nowInSeconds() + RECHECK_SECONDS
     };
-    const cookie = await serializeSigned(SESSION_COOKIE, JSON.stringify(pass), env.SESSION_SECRET);
+    const cookie = await serializeSigned(SESSION_COOKIE, JSON.stringify(pass), env.SESSION_SECRET, { path: '/', secure: true });
     return { cookie: cookie.split(';')[0] ?? cookie, sessionId };
 }
 export async function readPass(c) {

package/dist/start.js

@@ -165,6 +165,9 @@ const base = stylex.create({
             [breakpoints.compact]: lineHeights.body
         },
         color: colors.primaryForeground,
-        backgroundColor: colors.shell
+        backgroundColor: colors.shell,
+        WebkitFontSmoothing: 'antialiased',
+        MozOsxFontSmoothing: 'grayscale',
+        fontSynthesis: 'none'
     }
 });

package/package.json

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