@trypattern/sdk 0.0.0-stage → 0.1.0

package/dist/cli/screenshot.d.ts

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

package/dist/cli/screenshot.js

@@ -0,0 +1,96 @@
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { launchChrome, openApp, viewportNames, viewports } from "../flows/browser.js";
+const ROOT = process.cwd();
+const SCREENSHOTS_DIRECTORY = join(ROOT, '.dev', 'screenshots');
+function readRequest() {
+    const parsed = JSON.parse(process.argv[2] ?? '');
+    if (typeof parsed !== 'object' ||
+        parsed === null ||
+        !('url' in parsed) ||
+        !('path' in parsed) ||
+        !('name' in parsed) ||
+        !('commands' in parsed) ||
+        !('signedInAs' in parsed) ||
+        (typeof parsed.signedInAs !== 'string' && parsed.signedInAs !== null) ||
+        typeof parsed.url !== 'string' ||
+        typeof parsed.path !== 'string' ||
+        typeof parsed.name !== 'string' ||
+        !Array.isArray(parsed.commands)) {
+        throw new Error('screenshot.ts expects {url, path, name, commands, signedInAs} JSON');
+    }
+    return {
+        url: parsed.url,
+        path: parsed.path,
+        name: parsed.name,
+        commands: parsed.commands,
+        signedInAs: parsed.signedInAs
+    };
+}
+async function captureAll(browser, request) {
+    const [first = 'desktop'] = viewportNames;
+    const app = await openApp(browser, request.url, request.path, first, request.signedInAs);
+    try {
+        let snapshot = await app.snapshot();
+        let commandError;
+        for (const command of request.commands) {
+            try {
+                snapshot = await app.send(command);
+            }
+            catch (error) {
+                commandError = `command ${JSON.stringify(command)} failed: ${error instanceof Error ? error.message : String(error)}`;
+                break;
+            }
+        }
+        const shots = [];
+        for (const viewport of viewportNames) {
+            const seenBefore = app.problems.length;
+            const file = join(SCREENSHOTS_DIRECTORY, `${request.name}-${viewport}.png`);
+            writeFileSync(file, Buffer.from(await app.captureAt(viewport), 'base64'));
+            const problems = [
+                ...(commandError === undefined ? [] : [commandError]),
+                ...(viewport === first ? app.problems : app.problems.slice(seenBefore))
+            ];
+            shots.push({ viewport, ...viewports[viewport], file, snapshot, problems });
+        }
+        return shots;
+    }
+    finally {
+        await app.close();
+    }
+}
+async function main() {
+    try {
+        const request = readRequest();
+        mkdirSync(SCREENSHOTS_DIRECTORY, { recursive: true });
+        const browser = await launchChrome();
+        const shots = await captureAll(browser, request).finally(() => browser.close());
+        const viewportsByProblem = new Map();
+        for (const shot of shots) {
+            for (const problem of shot.problems) {
+                viewportsByProblem.set(problem, [
+                    ...(viewportsByProblem.get(problem) ?? []),
+                    shot.viewport
+                ]);
+            }
+        }
+        const result = {
+            screenshots: shots.map(({ viewport, width, height, file }) => ({
+                viewport,
+                width,
+                height,
+                file
+            })),
+            snapshot: shots[0]?.snapshot ?? null,
+            problems: [...viewportsByProblem].map(([message, seenIn]) => ({
+                message,
+                viewports: seenIn
+            }))
+        };
+        process.stdout.write(`${JSON.stringify(result)}\n`);
+    }
+    catch (error) {
+        process.stdout.write(`${JSON.stringify({ error: error instanceof Error ? error.message : String(error) })}\n`);
+    }
+}
+await main();

package/dist/cli/tools.d.ts

@@ -0,0 +1,12 @@
+declare const TOOLS: {
+    readonly tsc: readonly ["typescript", "tsc"];
+    readonly oxlint: readonly ["oxlint", "oxlint"];
+    readonly prettier: readonly ["prettier", "prettier"];
+    readonly vite: readonly ["vite", "vite"];
+    readonly vitest: readonly ["vitest", "vitest"];
+    readonly wrangler: readonly ["wrangler", "wrangler"];
+    readonly 'drizzle-kit': readonly ["drizzle-kit", "drizzle-kit"];
+};
+export type Tool = keyof typeof TOOLS;
+export declare function toolBin(tool: Tool): string;
+export {};

package/dist/cli/tools.js

@@ -0,0 +1,35 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+const require = createRequire(import.meta.url);
+const TOOLS = {
+    tsc: ['typescript', 'tsc'],
+    oxlint: ['oxlint', 'oxlint'],
+    prettier: ['prettier', 'prettier'],
+    vite: ['vite', 'vite'],
+    vitest: ['vitest', 'vitest'],
+    wrangler: ['wrangler', 'wrangler'],
+    'drizzle-kit': ['drizzle-kit', 'drizzle-kit']
+};
+export function toolBin(tool) {
+    const [name, bin] = TOOLS[tool];
+    const manifest = (require.resolve.paths(name) ?? [])
+        .map((directory) => join(directory, name, 'package.json'))
+        .find((path) => existsSync(path));
+    if (manifest === undefined) {
+        throw new Error(`${name} is not installed`);
+    }
+    const parsed = JSON.parse(readFileSync(manifest, 'utf8'));
+    const bins = typeof parsed === 'object' && parsed !== null && 'bin' in parsed
+        ? parsed.bin
+        : undefined;
+    const path = typeof bins === 'string'
+        ? bins
+        : typeof bins === 'object' && bins !== null
+            ? Reflect.get(bins, bin)
+            : undefined;
+    if (typeof path !== 'string') {
+        throw new Error(`${name} has no ${bin} command`);
+    }
+    return join(dirname(manifest), path);
+}

package/dist/components/AppFrame.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { MenuEntry } from './MenuItems.tsx';
+import type { SidebarLink } from './Sidebar.tsx';
+type AppFrameProps = {
+    links: readonly SidebarLink[];
+    workspaceMenu?: readonly MenuEntry[];
+    isSidebarToggled: boolean;
+    onToggleSidebar: () => void;
+    onCloseSidebar: () => void;
+    onSearch?: () => void;
+    children: ReactNode;
+};
+export declare function AppFrame({ links, workspaceMenu, isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }: AppFrameProps): import("react").JSX.Element;
+export {};

package/dist/components/AppFrame.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, colors, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { useApp, useModel } from "../hooks/appContext.js";
+import { FrameContext } from "./frame.js";
+import { Scrim } from "./Scrim.js";
+import { Sidebar } from "./Sidebar.js";
+import { useAnimatesOnChange } from "../hooks/useAnimatesOnChange.js";
+export function AppFrame({ links, workspaceMenu = [], isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }) {
+    const app = useApp();
+    const account = useModel('account');
+    const menu = account.user === null
+        ? workspaceMenu
+        : [
+            ...workspaceMenu,
+            ...(workspaceMenu.length > 0 ? ['separator'] : []),
+            { id: 'signOut', label: 'Log out', onSelect: account.signOut }
+        ];
+    const isSidebarAnimating = useAnimatesOnChange(isSidebarToggled, SIDEBAR_ANIMATION_MS);
+    return (_jsx(FrameContext, { value: { onToggleSidebar }, children: _jsxs("div", { ...stylex.props(styles.frame), children: [_jsx(Sidebar, { workspace: app.name, workspaceMenu: menu, links: links, isToggled: isSidebarToggled, isAnimating: isSidebarAnimating, onFollowLink: onCloseSidebar, onSearch: onSearch === undefined
+                        ? undefined
+                        : () => {
+                            onCloseSidebar();
+                            onSearch();
+                        } }), _jsx(Scrim, { label: "Close sidebar", isOpen: isSidebarToggled, isAnimating: isSidebarAnimating, onClose: onCloseSidebar }), _jsx("main", { ...stylex.props(styles.panel, isSidebarToggled && styles.panelAlone), children: children })] }) }));
+}
+const SIDEBAR_ANIMATION_MS = 400;
+const styles = stylex.create({
+    frame: {
+        display: 'flex',
+        height: '100%',
+        backgroundColor: colors.shell
+    },
+    panel: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        minWidth: 0,
+        marginBlock: {
+            default: space.xs,
+            [breakpoints.compact]: 0
+        },
+        marginInlineEnd: {
+            default: space.xs,
+            [breakpoints.compact]: 0
+        },
+        overflow: 'hidden',
+        backgroundColor: colors.containerRecessed,
+        borderRadius: {
+            default: radii.xxxl,
+            [breakpoints.compact]: 0
+        },
+        boxShadow: {
+            default: shadows.default,
+            [breakpoints.compact]: null
+        }
+    },
+    panelAlone: {
+        marginInlineStart: {
+            default: space.xs,
+            [breakpoints.compact]: 0
+        }
+    }
+});

package/dist/components/AppearancePicker.d.ts

@@ -0,0 +1 @@
+export declare function AppearancePicker(): import("react").JSX.Element;

package/dist/components/AppearancePicker.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useModel } from "../hooks/appContext.js";
+import { SegmentedControl } from "./SegmentedControl.js";
+export function AppearancePicker() {
+    const account = useModel('account');
+    return (_jsx(SegmentedControl, { label: "Appearance", value: account.appearance, options: options, onChange: (appearance) => account.setAppearance({ appearance }) }));
+}
+const options = [
+    { value: 'system', label: 'System' },
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' }
+];

package/dist/components/Avatar.d.ts

@@ -0,0 +1,9 @@
+import type { Placement } from './Placement.ts';
+type AvatarProps = {
+    name: string;
+    imageUrl?: string | null;
+    size?: 'sm' | 'md' | 'lg';
+    style?: Placement;
+};
+export declare function Avatar({ name, imageUrl, size, style }: AvatarProps): import("react").JSX.Element;
+export {};

package/dist/components/Avatar.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, fontSizes, fontWeights, lineHeights, radii } from "../theme/tokens.stylex.js";
+export function Avatar({ name, imageUrl = null, size = 'md', style }) {
+    return (_jsxs(BaseAvatar.Root, { className: stylex.props(styles.avatar, sizes[size], style).className, children: [imageUrl === null ? null : (_jsx(BaseAvatar.Image, { src: imageUrl, alt: "", className: stylex.props(styles.image).className })), _jsx(BaseAvatar.Fallback, { className: stylex.props(styles.fallback).className, children: initialsOf(name) })] }));
+}
+function initialsOf(name) {
+    return name
+        .split(/\s+/)
+        .filter((word) => word !== '')
+        .slice(0, 2)
+        .map((word) => word.charAt(0).toUpperCase())
+        .join('');
+}
+const styles = stylex.create({
+    avatar: {
+        position: 'relative',
+        display: 'flex',
+        flexShrink: 0,
+        overflow: 'hidden',
+        fontWeight: fontWeights.semimedium,
+        outlineWidth: borders.hairline,
+        outlineStyle: 'solid',
+        outlineColor: colors.borderDefault,
+        outlineOffset: `calc(-1 * ${borders.hairline})`,
+        backgroundColor: colors.component,
+        borderRadius: radii.full
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+    },
+    fallback: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        color: colors.secondaryForeground
+    }
+});
+const sizes = stylex.create({
+    sm: {
+        width: lineHeights.caption,
+        height: lineHeights.caption,
+        fontSize: fontSizes.captionXs,
+        lineHeight: lineHeights.captionXs
+    },
+    md: {
+        width: lineHeights.bodySm,
+        height: lineHeights.bodySm,
+        fontSize: fontSizes.captionXs,
+        lineHeight: lineHeights.captionXs
+    },
+    lg: {
+        width: lineHeights.body,
+        height: lineHeights.body,
+        fontSize: fontSizes.bodySm,
+        lineHeight: lineHeights.caption
+    }
+});

package/dist/components/Badge.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+type BadgeProps = {
+    children: ReactNode;
+    variant?: 'primary' | 'tertiary' | 'outline' | 'transparent';
+    tone?: 'neutral' | 'brand' | 'danger';
+    size?: 'sm' | 'md';
+    style?: Placement;
+};
+export declare function Badge({ children, variant, tone, size, style }: BadgeProps): import("react").JSX.Element;
+export {};

package/dist/components/Badge.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, controls, fontSizes, lineHeights, radii, space } from "../theme/tokens.stylex.js";
+export function Badge({ children, variant = 'tertiary', tone = 'neutral', size = 'md', style }) {
+    return (_jsx("span", { ...stylex.props(styles.badge, sizes[size], looks[`${variant}${toneKeys[tone]}`], style), children: children }));
+}
+const toneKeys = {
+    neutral: 'Neutral',
+    brand: 'Brand',
+    danger: 'Danger'
+};
+const styles = stylex.create({
+    badge: {
+        display: 'inline-flex',
+        flexShrink: 0,
+        gap: space.xs,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingInline: controls.paddingXs,
+        borderRadius: radii.sm
+    }
+});
+const sizes = stylex.create({
+    sm: {
+        height: lineHeights.caption,
+        fontSize: fontSizes.captionBase,
+        lineHeight: lineHeights.caption
+    },
+    md: {
+        height: lineHeights.bodySm,
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.caption
+    }
+});
+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
+    },
+    tertiaryNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: colors.component
+    },
+    tertiaryBrand: {
+        color: colors.onBrandSubtleForeground,
+        backgroundColor: colors.brandSubtle
+    },
+    tertiaryDanger: {
+        color: colors.dangerText,
+        backgroundColor: colors.dangerSubtleHover
+    },
+    outlineNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.borderDefault}`
+    },
+    outlineBrand: {
+        color: colors.brandForeground,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.brandBorderDefault}`
+    },
+    outlineDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.dangerBorderDefault}`
+    },
+    transparentNeutral: {
+        color: colors.secondaryForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentBrand: {
+        color: colors.brandForeground,
+        backgroundColor: 'transparent'
+    },
+    transparentDanger: {
+        color: colors.dangerForeground,
+        backgroundColor: 'transparent'
+    }
+});

package/dist/components/Button.d.ts

@@ -0,0 +1,23 @@
+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;
+    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, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style }: ButtonProps): import("react").JSX.Element;
+export {};