@trypattern/sdk 0.1.9 → 0.1.11

package/dist/components/Choice.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import * as stylex from '@stylexjs/stylex';
+import { borders, colors, fontSizes, fontWeights, lineHeights, motion, radii, shadows, space } from "../theme/tokens.stylex.js";
+import { useChosen } from "./choiceContext.js";
+import { focusRing } from "./controlLook.js";
+export function Choice({ value, title, label, subline, isDisabled = false, children }) {
+    const chosen = useChosen();
+    const isFaded = chosen !== null && chosen !== value;
+    const hasWords = title !== undefined || subline !== undefined;
+    return (_jsxs(BaseRadio.Root, { value: value, disabled: isDisabled, "aria-label": label, className: (state) => stylex.props(styles.choice, children !== undefined && !hasWords && styles.media, !state.disabled && styles.enabled, state.checked && styles.checked, isFaded && !state.checked && !state.disabled && styles.faded, state.disabled && styles.disabled, focusRing.visible).className, children: [children === undefined ? null : (_jsx("span", { ...stylex.props(styles.content), children: children })), title === undefined ? null : (_jsx("span", { ...stylex.props(styles.title), children: title })), subline === undefined ? null : (_jsx("span", { ...stylex.props(styles.subline, isDisabled && styles.sublineDisabled), children: subline }))] }));
+}
+const checkedRing = `inset 0 0 0 ${borders.thin} ${colors.borderInverted}, 0 0 0 ${borders.thin} ${colors.borderInverted}`;
+const styles = stylex.create({
+    choice: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        alignItems: 'flex-start',
+        minWidth: 0,
+        paddingBlock: space.sm,
+        paddingInline: space.md,
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.bodySm,
+        color: colors.primaryForeground,
+        textAlign: 'start',
+        outlineOffset: 0,
+        backgroundColor: colors.componentOnContainerStrong,
+        borderRadius: radii.lg,
+        boxShadow: shadows.default,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'background-color, box-shadow, opacity'
+    },
+    media: {
+        flexShrink: 0,
+        width: `calc(2 * ${space.xxxl})`,
+        padding: space.xs
+    },
+    enabled: {
+        backgroundColor: {
+            default: colors.componentOnContainerStrong,
+            ':hover': colors.componentOnContainerStrongHover
+        }
+    },
+    checked: {
+        boxShadow: checkedRing
+    },
+    faded: {
+        opacity: {
+            default: 0.56,
+            ':hover': 1
+        }
+    },
+    disabled: {
+        color: colors.disabledForeground,
+        backgroundColor: colors.disabled,
+        boxShadow: 'none'
+    },
+    content: {
+        display: 'block',
+        alignSelf: 'stretch',
+        minWidth: 0,
+        overflow: 'hidden',
+        borderRadius: radii.md
+    },
+    title: {
+        minWidth: 0
+    },
+    subline: {
+        fontSize: fontSizes.captionLg,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.caption,
+        color: colors.secondaryForeground
+    },
+    sublineDisabled: {
+        color: colors.disabledForeground
+    }
+});

package/dist/components/ChoiceGroup.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { Placement } from './Placement.ts';
+type ChoiceGroupProps<Value extends string> = {
+    label: string;
+    value: Value | null;
+    onChange: (value: Value) => void;
+    children: ReactNode;
+    style?: Placement;
+};
+export declare function ChoiceGroup<Value extends string>({ label, value, onChange, children, style }: ChoiceGroupProps<Value>): import("react").JSX.Element;
+export {};

package/dist/components/ChoiceGroup.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import * as stylex from '@stylexjs/stylex';
+import { Children, isValidElement } from 'react';
+import { space } from "../theme/tokens.stylex.js";
+import { ChoiceContext } from "./choiceContext.js";
+import { interact, textOf } from "./interaction.js";
+export function ChoiceGroup({ label, value, onChange, children, style }) {
+    return (_jsx(ChoiceContext, { value: { value }, children: _jsx(BaseRadioGroup, { "aria-label": label, value: value, onValueChange: (next) => {
+                if (typeof next !== 'string')
+                    return;
+                interact({
+                    primitive: 'ChoiceGroup',
+                    event: 'change',
+                    label: labelOf(children, next)
+                });
+                onChange(next);
+            }, className: stylex.props(styles.group, style).className, children: children }) }));
+}
+function labelOf(children, value) {
+    for (const child of Children.toArray(children)) {
+        if (!isValidElement(child))
+            continue;
+        const { props } = child;
+        if (props['value'] !== value)
+            continue;
+        for (const name of ['title', 'label']) {
+            const text = props[name];
+            if (typeof text === 'string' && text !== '')
+                return text;
+        }
+        return textOf(props['children']) || value;
+    }
+    return value;
+}
+const styles = stylex.create({
+    group: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: space.sm,
+        alignItems: 'stretch',
+        minWidth: 0
+    }
+});

package/dist/components/Icon.d.ts

@@ -5,6 +5,7 @@ type IconProps = {
     name: IconName;
     size?: Size;
     tone?: Tone;
+    weight?: 'regular' | 'light';
 };
-export declare function Icon({ name, size, tone }: IconProps): import("react").JSX.Element;
+export declare function Icon({ name, size, tone, weight }: IconProps): import("react").JSX.Element;
 export {};

package/dist/components/Icon.js

@@ -3,9 +3,9 @@ import * as stylex from '@stylexjs/stylex';
 import { iconSizes } from "../theme/tokens.stylex.js";
 import { shapeOf } from "./icons.js";
 import { tones } from "./tones.js";
-export function Icon({ name, size = 'md', tone = 'inherit' }) {
+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: "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) => (_jsx("path", { d: path }, path))) }));
 }
 const styles = stylex.create({
     icon: {

package/dist/components/Image.d.ts

@@ -0,0 +1,11 @@
+import type { MediaImage } from '../media.ts';
+import type { Placement } from './Placement.ts';
+type ImageProps = {
+    image: MediaImage | null | undefined;
+    sizes: string;
+    priority?: boolean;
+    aspect?: number;
+    style?: Placement;
+};
+export declare function Image({ image, sizes, priority, aspect, style }: ImageProps): import("react").JSX.Element;
+export {};

package/dist/components/Image.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { imageSources, transformsOn } from "../media.js";
+import { colors, motion } from "../theme/tokens.stylex.js";
+export function Image({ image, sizes, priority = false, aspect, style }) {
+    const key = image?.key ?? null;
+    const [seen, setSeen] = useState({
+        key,
+        status: 'loading'
+    });
+    const status = seen.key === key ? seen.status : 'loading';
+    if (image === null || image === undefined) {
+        return (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.frame, styles.ratio(aspect ?? MISSING_ASPECT), style) }));
+    }
+    const ratio = aspect ?? image.width / image.height;
+    if (status === 'failed') {
+        return (_jsx("span", { role: "img", "aria-label": image.alt, ...stylex.props(styles.frame, styles.ratio(ratio), style) }));
+    }
+    const sources = imageSources(image, {
+        aspect,
+        transforms: servedWithTransforms()
+    });
+    return (_jsxs("span", { ...stylex.props(styles.frame, styles.ratio(ratio), style), children: [image.placeholder === null ? null : (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.placeholder(image.placeholder)) })), _jsx("img", { ref: (element) => {
+                    if (status === 'loading' &&
+                        element !== null &&
+                        element.complete &&
+                        element.naturalWidth > 0) {
+                        setSeen({ key, status: 'shown' });
+                    }
+                }, alt: image.alt, width: sources.width, height: sources.height, loading: priority ? 'eager' : 'lazy', decoding: priority ? 'auto' : 'async', fetchPriority: priority ? 'high' : 'auto', sizes: sizes, srcSet: sources.srcSet, src: sources.src, onLoad: () => setSeen((current) => current.key === key && current.status === 'shown'
+                    ? current
+                    : { key, status: 'fading' }), onError: () => setSeen({ key, status: 'failed' }), ...stylex.props(styles.image, status === 'fading' && styles.fading, status === 'shown' && styles.shown) })] }));
+}
+const MISSING_ASPECT = 4 / 3;
+function servedWithTransforms() {
+    return typeof location !== 'undefined' && transformsOn(location.hostname);
+}
+const styles = stylex.create({
+    frame: {
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        overflow: 'hidden',
+        backgroundColor: colors.component
+    },
+    ratio: (ratio) => ({
+        aspectRatio: String(ratio)
+    }),
+    placeholder: (url) => ({
+        position: 'absolute',
+        inset: 0,
+        backgroundImage: `url("${url}")`,
+        backgroundPosition: 'center',
+        backgroundSize: 'cover',
+        filter: 'blur(16px)',
+        transform: 'scale(1.1)'
+    }),
+    image: {
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+        opacity: 0
+    },
+    fading: {
+        opacity: 1,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.base,
+        transitionProperty: 'opacity'
+    },
+    shown: {
+        opacity: 1
+    }
+});

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/PlainScreen.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { AppPath } from '../registered.ts';
+type PlainScreenProps = {
+    title: string;
+    eyebrow: string | undefined;
+    parent: {
+        label: string;
+        to: AppPath;
+    } | undefined;
+    actions: ReactNode;
+    width: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+    onToggleSidebar: () => void;
+    children: ReactNode;
+};
+export declare function PlainScreen({ title, eyebrow, parent, actions, width, onToggleSidebar, children }: PlainScreenProps): import("react").JSX.Element;
+export {};

package/dist/components/PlainScreen.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from '@stylexjs/stylex';
+import { breakpoints, controls, space, widths } from "../theme/tokens.stylex.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { Link } from "./Link.js";
+import { ScrollArea } from "./ScrollArea.js";
+import { Text } from "./Text.js";
+export function PlainScreen({ title, eyebrow, parent, actions, width, onToggleSidebar, children }) {
+    return (_jsxs("div", { ...stylex.props(styles.screen), children: [_jsx("div", { ...stylex.props(styles.bar), children: _jsx(IconButton, { icon: "panelLeft", label: "Toggle sidebar", onClick: onToggleSidebar }) }), _jsx(ScrollArea, { style: styles.body, children: _jsx("div", { ...stylex.props(styles.page), children: _jsxs("div", { ...stylex.props(styles.column, columnWidths[width]), children: [_jsxs("header", { ...stylex.props(styles.header), children: [_jsxs("div", { ...stylex.props(styles.heading), children: [parent === undefined ? null : (_jsxs("span", { ...stylex.props(styles.parent), children: [_jsx(Link, { to: parent.to, tone: "secondary", children: parent.label }), _jsx(Icon, { name: "chevronRight", tone: "tertiary" })] })), parent !== undefined || eyebrow === undefined ? null : (_jsx(Text, { tone: "secondary", children: eyebrow })), _jsx(Text, { as: "h1", variant: "heading", tone: "primary", isSelectable: true, children: title })] }), actions === undefined || actions === null ? null : (_jsx("div", { ...stylex.props(styles.actions), children: actions }))] }), children] }) }) })] }));
+}
+const styles = stylex.create({
+    screen: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+    },
+    bar: {
+        display: {
+            default: 'none',
+            [breakpoints.compact]: 'flex'
+        },
+        flexShrink: 0,
+        alignItems: 'center',
+        height: `calc(${controls.heightXl} + ${space.sm})`,
+        paddingInline: space.sm
+    },
+    body: {
+        flexGrow: 1,
+        height: 'auto'
+    },
+    page: {
+        paddingInline: {
+            default: space.xxxl,
+            [breakpoints.compact]: space.lg
+        },
+        paddingTop: {
+            default: `calc(${space.xxxl} + ${space.sm})`,
+            [breakpoints.compact]: space.sm
+        },
+        paddingBottom: `calc(${space.xxxl} * 2)`
+    },
+    column: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xl,
+        width: '100%',
+        marginInline: 'auto'
+    },
+    header: {
+        display: 'flex',
+        gap: space.md,
+        alignItems: 'flex-end',
+        justifyContent: 'space-between'
+    },
+    heading: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: space.xxs,
+        minWidth: 0
+    },
+    parent: {
+        display: 'flex',
+        gap: space.xs,
+        alignItems: 'center'
+    },
+    actions: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: space.sm,
+        alignItems: 'center'
+    }
+});
+const columnWidths = stylex.create({
+    xs: { maxWidth: widths.contentXs },
+    sm: { maxWidth: widths.contentSm },
+    md: { maxWidth: widths.contentMd },
+    lg: { maxWidth: widths.contentLg },
+    full: { maxWidth: 'none' }
+});

package/dist/components/PlainSidebar.d.ts

@@ -0,0 +1,15 @@
+import type { User } from '../auth/user.ts';
+import type { MenuEntry } from './MenuItems.tsx';
+import type { SidebarLink } from './Sidebar.tsx';
+type PlainSidebarProps = {
+    title: string;
+    user: User | null;
+    accountMenu: readonly MenuEntry[];
+    links: readonly SidebarLink[];
+    isToggled: boolean;
+    isAnimating: boolean;
+    onFollowLink: () => void;
+    onSearch: (() => void) | undefined;
+};
+export declare function PlainSidebar({ title, user, accountMenu, links, isToggled, isAnimating, onFollowLink, onSearch }: PlainSidebarProps): import("react").JSX.Element;
+export {};

package/dist/components/PlainSidebar.js

@@ -0,0 +1,179 @@
+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 { NavLink } from 'react-router';
+import { borders, breakpoints, colors, controls, fontSizes, fontWeights, layers, lineHeights, motion, radii, shadows, space, widths } from "../theme/tokens.stylex.js";
+import { Avatar } from "./Avatar.js";
+import { Badge } from "./Badge.js";
+import { focusRing, transparentLook } from "./controlLook.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+import { MenuItems } from "./MenuItems.js";
+import { Popup } from "./Popup.js";
+import { ScrollArea } from "./ScrollArea.js";
+import { Text } from "./Text.js";
+export function PlainSidebar({ title, user, accountMenu, links, isToggled, isAnimating, onFollowLink, onSearch }) {
+    const followLink = (link) => {
+        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("span", { ...stylex.props(styles.title), children: title }) }), 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: _jsx("div", { ...stylex.props(styles.group), children: links.map((item) => (_jsxs(NavLink, { onClick: () => followLink(item), to: item.to, end: item.to === '/' ||
+                                links.some((other) => String(other.to).startsWith(`${String(item.to)}/`)), className: ({ isActive }) => stylex.props(styles.item, isActive && styles.itemCurrent, focusRing.visible, focusRing.inside).className ?? '', children: [_jsx(Icon, { name: item.icon, weight: "light" }), _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))) }) }) }), user === null ? null : (_jsxs(BaseMenu.Root, { children: [_jsxs(BaseMenu.Trigger, { className: (state) => stylex.props(styles.account, transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.accountText, focusRing.visible).className, children: [_jsx(Avatar, { name: user.name, imageUrl: user.avatarUrl }), _jsxs("span", { ...stylex.props(styles.who), children: [_jsx("span", { ...stylex.props(styles.name), children: user.name }), _jsx("span", { ...stylex.props(styles.email), children: user.email })] }), _jsx(Icon, { name: "chevronUpDown", tone: "secondary" })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "top", 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: accountMenu, primitive: "Menu" }) }) }) })] }))] }));
+}
+const styles = stylex.create({
+    sidebar: {
+        position: {
+            default: 'relative',
+            [breakpoints.compact]: 'fixed'
+        },
+        insetBlock: {
+            default: null,
+            [breakpoints.compact]: 0
+        },
+        insetInlineStart: {
+            default: null,
+            [breakpoints.compact]: 0
+        },
+        zIndex: {
+            default: null,
+            [breakpoints.compact]: layers.sidebar
+        },
+        display: 'flex',
+        visibility: {
+            default: null,
+            [breakpoints.compact]: 'hidden'
+        },
+        flexShrink: 0,
+        flexDirection: 'column',
+        gap: space.lg,
+        width: widths.sidebar,
+        height: '100%',
+        paddingBlock: space.lg,
+        paddingInline: space.md,
+        backgroundColor: colors.page,
+        borderInlineEndColor: colors.borderDefault,
+        borderInlineEndStyle: {
+            default: 'solid',
+            [breakpoints.compact]: 'none'
+        },
+        borderInlineEndWidth: borders.thin,
+        boxShadow: {
+            default: null,
+            [breakpoints.compact]: shadows.extraLarge
+        },
+        transform: {
+            default: null,
+            [breakpoints.compact]: 'translateX(-100%)'
+        }
+    },
+    sidebarAnimating: {
+        transitionTimingFunction: motion.slideEasing,
+        transitionDuration: motion.slide,
+        transitionProperty: 'transform, visibility'
+    },
+    sidebarToggled: {
+        visibility: {
+            default: null,
+            [breakpoints.compact]: 'visible'
+        },
+        transform: {
+            default: null,
+            [breakpoints.compact]: 'translateX(0)'
+        }
+    },
+    header: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        height: controls.heightMd,
+        paddingInline: controls.paddingSm
+    },
+    title: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.semibold,
+        lineHeight: lineHeights.bodySm,
+        color: colors.primaryForeground,
+        whiteSpace: 'nowrap'
+    },
+    body: {
+        flexGrow: 1,
+        minHeight: 0
+    },
+    group: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: borders.thin
+    },
+    item: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        height: {
+            default: controls.heightMd,
+            [breakpoints.compact]: controls.heightXl
+        },
+        paddingInline: controls.paddingSm,
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        },
+        textDecoration: 'none',
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        },
+        borderRadius: radii.md
+    },
+    itemCurrent: {
+        color: colors.primaryForeground,
+        backgroundColor: colors.transparentHover
+    },
+    itemLabel: {
+        flexGrow: 1
+    },
+    account: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: controls.gapMd,
+        alignItems: 'center',
+        width: '100%',
+        height: controls.heightXl,
+        paddingInline: controls.paddingXs,
+        textAlign: 'start',
+        outlineOffset: 0,
+        borderRadius: radii.lg
+    },
+    accountText: {
+        color: colors.primaryForeground
+    },
+    who: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        minWidth: 0
+    },
+    name: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.caption,
+        color: colors.primaryForeground,
+        whiteSpace: 'nowrap'
+    },
+    email: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.caption,
+        color: colors.secondaryForeground,
+        whiteSpace: 'nowrap'
+    },
+    positioner: {
+        zIndex: layers.menu,
+        outline: 'none'
+    }
+});

package/dist/components/Screen.d.ts

@@ -2,12 +2,14 @@ import type { ReactNode } from 'react';
 import type { AppPath } from '../registered.ts';
 type ScreenProps = {
     title: string;
+    eyebrow?: string;
     parent?: {
         label: string;
         to: AppPath;
     };
     actions?: ReactNode;
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
     children: ReactNode;
 };
-export declare function Screen({ title, parent, actions, children }: ScreenProps): import("react").JSX.Element;
+export declare function Screen({ title, eyebrow, parent, actions, width, children }: ScreenProps): import("react").JSX.Element;
 export {};

package/dist/components/Screen.js

@@ -3,13 +3,17 @@ import * as stylex from '@stylexjs/stylex';
 import { use } from 'react';
 import { borders, colors, controls, space } from "../theme/tokens.stylex.js";
 import { FrameContext } from "./frame.js";
+import { PlainScreen } from "./PlainScreen.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Link } from "./Link.js";
 import { ScrollArea } from "./ScrollArea.js";
 import { Text } from "./Text.js";
-export function Screen({ title, parent, actions, children }) {
+export function Screen({ title, eyebrow, parent, actions, width = 'md', children }) {
     const frame = use(FrameContext);
+    if (frame?.look === 'plain') {
+        return (_jsx(PlainScreen, { title: title, eyebrow: eyebrow, parent: parent, actions: actions, width: width, onToggleSidebar: frame.onToggleSidebar, children: children }));
+    }
     return (_jsxs("div", { ...stylex.props(styles.screen), children: [_jsxs("header", { ...stylex.props(styles.header), children: [_jsxs("div", { ...stylex.props(styles.leading), children: [frame === null ? null : (_jsx(IconButton, { icon: "panelLeft", label: "Toggle sidebar", onClick: frame.onToggleSidebar })), _jsxs("div", { ...stylex.props(styles.breadcrumb), children: [parent === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(Link, { to: parent.to, tone: "secondary", children: parent.label }), _jsx(Icon, { name: "chevronRight", tone: "tertiary" })] })), _jsx(Text, { as: "h1", variant: "label", tone: "primary", isTruncated: true, children: title })] })] }), _jsx("div", { ...stylex.props(styles.actions), children: actions })] }), _jsx(ScrollArea, { style: styles.body, children: children })] }));
 }
 const styles = stylex.create({

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 {};