@trypattern/sdk 0.1.35 → 0.1.37

package/dist/cli/app.js

@@ -1598,6 +1598,9 @@ function installShim() {
         path: SHIM_PATH
     };
 }
+const NO_MATCHING = 'ERR_PNPM_NO_MATCHING_VERSION';
+const NPM_SETTLE_TRIES = 8;
+const NPM_SETTLE_MS = 15_000;
 async function update() {
     const current = sdkVersion();
     const latest = await latestPattern(true);
@@ -1616,7 +1619,12 @@ async function update() {
         };
     }
     say(`Updating Pattern ${current} → ${latest}`);
-    const installed = await capture('pnpm', ['add', `@trypattern/sdk@${latest}`]);
+    let installed = await capture('pnpm', ['add', `@trypattern/sdk@${latest}`]);
+    for (let attempt = 1; attempt <= NPM_SETTLE_TRIES && installed.output.includes(NO_MATCHING); attempt += 1) {
+        say(`  npm is still sharing Pattern ${latest}, trying again in a moment`);
+        await sleep(NPM_SETTLE_MS);
+        installed = await capture('pnpm', ['add', `@trypattern/sdk@${latest}`]);
+    }
     if (installed.code !== 0) {
         return {
             code: 1,

package/dist/components/Calendar.js

@@ -90,7 +90,7 @@ const styles = stylex.create({
         display: 'flex',
         flexDirection: 'column',
         gap: space.xxs,
-        width: `calc(7 * (${space.xxxl} - ${space.xs}))`
+        width: '100%'
     },
     header: {
         display: 'flex',
@@ -139,7 +139,7 @@ const styles = stylex.create({
     },
     row: {
         display: 'grid',
-        gridTemplateColumns: `repeat(7, calc(${space.xxxl} - ${space.xs}))`
+        gridTemplateColumns: 'repeat(7, minmax(0, 1fr))'
     },
     weekday: {
         display: 'flex',
@@ -153,15 +153,15 @@ const styles = stylex.create({
     },
     cell: {
         display: 'flex',
-        width: `calc(${space.xxxl} - ${space.xs})`,
-        height: `calc(${space.xxxl} - ${space.xs})`
+        justifyContent: 'center'
     },
     day: {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         width: '100%',
-        height: '100%',
+        maxWidth: `calc(${space.xxxl} - ${space.xs})`,
+        aspectRatio: '1',
         fontSize: fontSizes.bodyMd,
         lineHeight: lineHeights.bodySm,
         outlineOffset: 0,

package/dist/components/Choice.js

@@ -15,7 +15,7 @@ export function Choice({ value, title, label, subline, isDisabled = false, child
             !state.disabled &&
             styles.faded, state.disabled && styles.disabled, isPhoto && styles.photo, focusRing.visible).className, children: [children === undefined ? null : (_jsx("span", { ...stylex.props(styles.content, isPhoto && styles.photoContent), 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 checkedRing = `inset 0 0 0 ${borders.thin} ${colors.borderInverted}`;
 const styles = stylex.create({
     choice: {
         display: 'flex',

package/dist/components/FilePicker.js

@@ -48,7 +48,7 @@ const styles = stylex.create({
         backgroundColor: colors.containerRecessed,
         borderColor: colors.borderStrong,
         borderStyle: 'dashed',
-        borderWidth: `calc(${borders.thin} + ${borders.hairline})`,
+        borderWidth: borders.thin,
         borderRadius: radii.lg,
         transitionTimingFunction: motion.easeOut,
         transitionDuration: motion.fast,

package/dist/components/Sidebar.d.ts

@@ -6,7 +6,7 @@ export type SidebarLink = {
     to: AppPath;
     icon: IconName;
     count?: number | null;
-    countTone?: 'quiet' | 'brand';
+    countTone?: 'quiet' | 'attention';
 };
 type SidebarProps = {
     workspace: string;

package/dist/components/Sidebar.js

@@ -17,7 +17,7 @@ export function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimatin
     };
     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, align: "start", 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 === '/' ||
                                     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 }), _jsx(Text, { variant: "label", isTruncated: true, style: styles.itemLabel, children: item.label }), typeof item.count !== 'number' ? null : item.countTone ===
-                                        'brand' ? (_jsx("span", { ...stylex.props(styles.count), children: item.count })) : (_jsx(Badge, { variant: "transparent", children: item.count }))] }, item.to)))] }) }) })] }));
+                                        'attention' ? (_jsx("span", { ...stylex.props(styles.count), children: item.count })) : (_jsx(Badge, { variant: "transparent", children: item.count }))] }, item.to)))] }) }) })] }));
 }
 const styles = stylex.create({
     sidebar: {
@@ -138,14 +138,14 @@ const styles = stylex.create({
         flexShrink: 0,
         alignItems: 'center',
         justifyContent: 'center',
-        minWidth: `calc(${space.lg} + ${space.xxs})`,
-        height: `calc(${space.lg} + ${space.xxs})`,
-        paddingInline: `calc(${space.xs} + ${space.xxs} / 2)`,
-        fontSize: fontSizes.captionSm,
+        minWidth: space.lg,
+        height: space.lg,
+        paddingInline: space.xs,
+        fontSize: fontSizes.badge,
         fontWeight: fontWeights.medium,
         lineHeight: lineHeights.caption,
-        color: colors.onBrandSolidForeground,
-        backgroundColor: colors.brandSolid,
+        color: colors.onAttentionSolidForeground,
+        backgroundColor: colors.attentionSolid,
         borderRadius: radii.full
     },
     itemLabel: {

package/dist/components/Skeleton.d.ts

@@ -1,8 +1,10 @@
 import type { Placement } from './Placement.ts';
+type SkeletonText = 'heading' | 'subheading' | 'title' | 'lead' | 'label' | 'body' | 'caption';
 type SkeletonProps = {
     variant?: 'text' | 'heading' | 'icon' | 'card';
-    width?: 'sm' | 'md' | 'lg' | 'full';
+    text?: SkeletonText;
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
     style?: Placement;
 };
-export declare function Skeleton({ variant, width, style }: SkeletonProps): import("react").JSX.Element;
+export declare function Skeleton({ variant, text, width, style }: SkeletonProps): import("react").JSX.Element;
 export {};

package/dist/components/Skeleton.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
-import { breakpoints, colors, iconSizes, lineHeights, motion, radii, space } from "../theme/tokens.stylex.js";
-export function Skeleton({ variant = 'text', width = 'full', style }) {
+import { breakpoints, colors, fontSizes, iconSizes, lineHeights, motion, radii, space } from "../theme/tokens.stylex.js";
+export function Skeleton({ variant = 'text', text, width = 'full', style }) {
+    if (text !== undefined) {
+        return (_jsx("span", { ...stylex.props(styles.line, lines[text], widthsOf[width], style), children: _jsx("span", { ...stylex.props(styles.skeleton, styles.bar, bars[text]) }) }));
+    }
     return (_jsx("span", { ...stylex.props(styles.skeleton, variant !== 'icon' && widthsOf[width], variants[variant], style) }));
 }
 const pulse = stylex.keyframes({
@@ -19,8 +22,56 @@ const styles = stylex.create({
         animationDuration: motion.pulse,
         animationTimingFunction: motion.easeInOut,
         animationIterationCount: 'infinite'
+    },
+    line: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        maxWidth: '100%'
+    },
+    bar: {
+        width: '100%',
+        borderRadius: radii.sm
     }
 });
+const lines = stylex.create({
+    heading: { height: lineHeights.heading5 },
+    subheading: { height: lineHeights.heading6 },
+    title: { height: lineHeights.body },
+    lead: { height: lineHeights.body },
+    label: {
+        height: {
+            default: lineHeights.bodySm,
+            [breakpoints.compact]: lineHeights.bodyCompact
+        }
+    },
+    body: {
+        height: {
+            default: lineHeights.bodySm,
+            [breakpoints.compact]: lineHeights.bodyCompact
+        }
+    },
+    caption: { height: lineHeights.caption }
+});
+const bars = stylex.create({
+    heading: { height: fontSizes.heading5 },
+    subheading: { height: fontSizes.heading6 },
+    title: { height: fontSizes.bodyBase },
+    lead: { height: fontSizes.bodyBase },
+    label: {
+        height: {
+            default: fontSizes.bodySm,
+            [breakpoints.compact]: fontSizes.bodyCompact
+        }
+    },
+    body: {
+        height: {
+            default: fontSizes.bodySm,
+            [breakpoints.compact]: fontSizes.bodyCompact
+        }
+    },
+    caption: { height: fontSizes.captionLg }
+});
 const variants = stylex.create({
     text: {
         height: lineHeights.caption,
@@ -41,6 +92,7 @@ const variants = stylex.create({
     }
 });
 const widthsOf = stylex.create({
+    xs: { width: `calc(${space.xxxl} + ${space.lg})` },
     sm: { width: '25%' },
     md: { width: '40%' },
     lg: { width: '60%' },

package/dist/components/TableRow.js

@@ -21,7 +21,7 @@ const styles = stylex.create({
         textAlign: 'start',
         backgroundColor: {
             default: 'transparent',
-            ':hover': colors.transparentHover
+            ':hover': colors.componentOnContainerStrongHover
         },
         borderBottomColor: {
             default: colors.borderDefault,
@@ -34,6 +34,6 @@ const styles = stylex.create({
         height: `calc(${space.xxxl} + ${space.sm})`
     },
     current: {
-        backgroundColor: colors.transparentHover
+        backgroundColor: colors.componentOnContainerStrongHover
     }
 });

package/dist/rules/lintPlugin.js

@@ -374,6 +374,7 @@ const hoverUsesHighlight = styleRule((declarations) => declarations
         (SELECTED_STYLE_NAME.test(d.styleName) &&
             d.conditions.length === 0)) &&
     !isMember(d.value, 'colors', 'transparentHover') &&
+    !isMember(d.value, 'colors', 'componentOnContainerStrongHover') &&
     !(!SELECTED_STYLE_NAME.test(d.styleName) && isButtonStateToken(d.value)) &&
     !(d.value.type === 'Literal' && d.value['value'] === null))
     .map((d) => ({

package/dist/rules/messages.d.ts

@@ -5,7 +5,7 @@ export declare const NO_POINTER_CURSOR_MESSAGE = "cursor: pointer is not allowed
 export declare const USE_COLOR_TOKEN_MESSAGE = "Raw colors are not allowed in styles. Use a token from @trypattern/sdk/tokens.stylex (colors.*). To change what a token looks like in this app, re-value it in src/theme/theme.ts, the one file where raw colors are allowed. Keywords like transparent and currentColor are fine.";
 export declare const USE_FONT_TOKEN_MESSAGE = "Raw font sizes, families and weights are not allowed in styles. Use fontSizes.*, fonts.* or fontWeights.* from @trypattern/sdk/tokens.stylex; to change a font or a size for the whole app, re-value it in src/theme/theme.ts. Text inherits Inter 13px/20px (15px/24px on phones) from <body>, so most styles need no font properties at all.";
 export declare const NO_INTERACTIVE_TRANSITION_MESSAGE = "Hover and press transitions use the motion tokens, as Interfere does: motion.fast with motion.easeOut for buttons, motion.instant for fields, motion.base for segmented controls. Never a raw duration or easing, so every control responds at the same speed. Navigation items change instantly with no transition.";
-export declare const HOVER_USES_HIGHLIGHT_MESSAGE = "Hover, active and selected backgrounds must be colors.transparentHover (with radii.md), so hovering then selecting an item never flashes a second color. Styles named *Active, *Selected or *Current count as selected. Buttons and switches, which have no selected state, may instead use their own colors.*Hover and colors.*Active tokens.";
+export declare const HOVER_USES_HIGHLIGHT_MESSAGE = "Hover, active and selected backgrounds must be colors.transparentHover (with radii.md), or colors.componentOnContainerStrongHover for rows on a white card, so hovering then selecting an item never flashes a second color. Styles named *Active, *Selected or *Current count as selected. Buttons and switches, which have no selected state, may instead use their own colors.*Hover and colors.*Active tokens.";
 export declare const SCROLL_VIEW_ONLY_MESSAGE = "Only ScrollArea may scroll (overflow auto/scroll). The page itself never scrolls or bounces in Pattern; wrap scrollable content in <ScrollArea> from @trypattern/sdk/react.";
 export declare const SELECTABLE_ONLY_MESSAGE = "Do not set userSelect. Text is not selectable by default in Pattern (inputs and editable fields are). For words people need to copy, write <Text isSelectable> from @trypattern/sdk/react.";
 export declare const USE_BREAKPOINTS_MESSAGE = "Media queries come from breakpoints in @trypattern/sdk/tokens.stylex, e.g. [breakpoints.compact]: value, so every screen adapts at the same sizes.";

package/dist/rules/messages.js

@@ -5,7 +5,7 @@ export const NO_POINTER_CURSOR_MESSAGE = 'cursor: pointer is not allowed in Patt
 export const USE_COLOR_TOKEN_MESSAGE = 'Raw colors are not allowed in styles. Use a token from @trypattern/sdk/tokens.stylex (colors.*). To change what a token looks like in this app, re-value it in src/theme/theme.ts, the one file where raw colors are allowed. Keywords like transparent and currentColor are fine.';
 export const USE_FONT_TOKEN_MESSAGE = 'Raw font sizes, families and weights are not allowed in styles. Use fontSizes.*, fonts.* or fontWeights.* from @trypattern/sdk/tokens.stylex; to change a font or a size for the whole app, re-value it in src/theme/theme.ts. Text inherits Inter 13px/20px (15px/24px on phones) from <body>, so most styles need no font properties at all.';
 export const NO_INTERACTIVE_TRANSITION_MESSAGE = 'Hover and press transitions use the motion tokens, as Interfere does: motion.fast with motion.easeOut for buttons, motion.instant for fields, motion.base for segmented controls. Never a raw duration or easing, so every control responds at the same speed. Navigation items change instantly with no transition.';
-export const HOVER_USES_HIGHLIGHT_MESSAGE = 'Hover, active and selected backgrounds must be colors.transparentHover (with radii.md), so hovering then selecting an item never flashes a second color. Styles named *Active, *Selected or *Current count as selected. Buttons and switches, which have no selected state, may instead use their own colors.*Hover and colors.*Active tokens.';
+export const HOVER_USES_HIGHLIGHT_MESSAGE = 'Hover, active and selected backgrounds must be colors.transparentHover (with radii.md), or colors.componentOnContainerStrongHover for rows on a white card, so hovering then selecting an item never flashes a second color. Styles named *Active, *Selected or *Current count as selected. Buttons and switches, which have no selected state, may instead use their own colors.*Hover and colors.*Active tokens.';
 export const SCROLL_VIEW_ONLY_MESSAGE = 'Only ScrollArea may scroll (overflow auto/scroll). The page itself never scrolls or bounces in Pattern; wrap scrollable content in <ScrollArea> from @trypattern/sdk/react.';
 export const SELECTABLE_ONLY_MESSAGE = 'Do not set userSelect. Text is not selectable by default in Pattern (inputs and editable fields are). For words people need to copy, write <Text isSelectable> from @trypattern/sdk/react.';
 export const USE_BREAKPOINTS_MESSAGE = 'Media queries come from breakpoints in @trypattern/sdk/tokens.stylex, e.g. [breakpoints.compact]: value, so every screen adapts at the same sizes.';

package/dist/theme/tokens.stylex.d.ts

@@ -9,6 +9,7 @@ export declare const breakpoints: {
     coarsePointer: string;
 };
 export declare const colors: stylex.VarGroup<Readonly<{
+    attentionSolid: string;
     blackFill: string;
     blackTransparent: string;
     borderDefault: string;
@@ -56,6 +57,7 @@ export declare const colors: stylex.VarGroup<Readonly<{
     invertedSolidHover: string;
     modal: string;
     onBrandSolidForeground: string;
+    onAttentionSolidForeground: string;
     onBrandSubtleForeground: string;
     onDangerSolidForeground: string;
     onDangerSubtleForeground: string;
@@ -184,6 +186,7 @@ export declare const corners: stylex.VarGroup<Readonly<{
 }>, symbol>;
 export declare const fontSizes: stylex.VarGroup<Readonly<{
     captionXs: string;
+    badge: string;
     captionSm: string;
     captionBase: string;
     captionLg: string;

package/dist/theme/tokens.stylex.js

@@ -7,6 +7,7 @@ export const breakpoints = stylex.defineConsts({
     coarsePointer: '@media (pointer: coarse)'
 });
 export const colors = stylex.defineVars({
+    attentionSolid: '#0090ff',
     blackFill: '#000',
     blackTransparent: '#0000',
     borderDefault: 'light-dark(#0000000f, #ffffff12)',
@@ -54,6 +55,7 @@ export const colors = stylex.defineVars({
     invertedSolidHover: 'light-dark(#000c, #fffc)',
     modal: 'light-dark(oklch(100% 0 0), oklch(25.2% 0 0))',
     onBrandSolidForeground: '#fff',
+    onAttentionSolidForeground: '#fff',
     onBrandSubtleForeground: 'light-dark(#0090ff, #70b8ff)',
     onDangerSolidForeground: 'light-dark(#fffcfc, #fff)',
     onDangerSubtleForeground: 'light-dark(#df2600d1, #ff977d)',
@@ -182,6 +184,7 @@ export const corners = stylex.defineVars({
 });
 export const fontSizes = stylex.defineVars({
     captionXs: '8px',
+    badge: '9px',
     captionSm: '10px',
     captionBase: '11px',
     captionLg: '12px',

package/package.json

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