@trypattern/sdk 0.1.36 → 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/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/package.json

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