@trypattern/sdk 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,218 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const breakpoints: {
+    compact: string;
+    reducedMotion: string;
+    coarsePointer: string;
+};
+export declare const colors: stylex.VarGroup<Readonly<{
+    blackFill: string;
+    blackTransparent: string;
+    borderDefault: string;
+    borderInverted: string;
+    borderOnStandout: string;
+    borderStrong: string;
+    borderStrongSolid: string;
+    borderSubtle: string;
+    brandBorderDefault: string;
+    brandBorderFocus: string;
+    brandBorderSubtle: string;
+    brandGradientSubtle: string;
+    brandForeground: string;
+    brandSolid: string;
+    brandSolidActive: string;
+    brandSolidHover: string;
+    brandSubtle: string;
+    brandSubtleHover: string;
+    card: string;
+    component: string;
+    componentActive: string;
+    componentHover: string;
+    componentOnContainerStrong: string;
+    componentOnContainerStrongHover: string;
+    componentOnContainerSubtle: string;
+    componentOnContainerSubtleHover: string;
+    componentOnInverted: string;
+    componentOnSunken: string;
+    container: string;
+    containerRecessed: string;
+    dangerBorderDefault: string;
+    dangerBorderSubtle: string;
+    dangerForeground: string;
+    dangerSolid: string;
+    dangerSolidActive: string;
+    dangerSolidHover: string;
+    dangerSubtle: string;
+    dangerSubtleActive: string;
+    dangerSubtleHover: string;
+    disabled: string;
+    divider: string;
+    disabledForeground: string;
+    invertedSolid: string;
+    invertedSolidActive: string;
+    invertedSolidHover: string;
+    modal: string;
+    onBrandSolidForeground: string;
+    onBrandSubtleForeground: string;
+    onDangerSolidForeground: string;
+    onDangerSubtleForeground: string;
+    onInvertedForeground: string;
+    onPositiveSolidForeground: string;
+    onPositiveSubtleForeground: string;
+    onStandoutPrimaryForeground: string;
+    onStandoutSecondaryForeground: string;
+    onWarningSolidForeground: string;
+    onWarningSubtleForeground: string;
+    page: string;
+    positiveBorderDefault: string;
+    positiveForeground: string;
+    positiveSolid: string;
+    positiveSolidHover: string;
+    positiveSubtle: string;
+    positiveSubtleHover: string;
+    primaryForeground: string;
+    secondaryForeground: string;
+    secondaryForegroundSolid: string;
+    shell: string;
+    standout: string;
+    sunken: string;
+    tertiaryForeground: string;
+    transparent: string;
+    transparentActive: string;
+    transparentHover: string;
+    warningBorderDefault: string;
+    warningForeground: string;
+    warningSolid: string;
+    warningSolidHover: string;
+    warningSubtle: string;
+    warningSubtleHover: string;
+    whiteFill: string;
+    dangerText: string;
+    indicatorBorder: string;
+    overlay: string;
+}>, symbol>;
+export declare const space: stylex.VarGroup<Readonly<{
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+}>, symbol>;
+export declare const controls: stylex.VarGroup<Readonly<{
+    heightXs: string;
+    heightSm: string;
+    heightMd: string;
+    heightLg: string;
+    heightXl: string;
+    paddingXs: string;
+    paddingSm: string;
+    paddingMd: string;
+    paddingLg: string;
+    paddingXl: string;
+    gapXs: string;
+    gapSm: string;
+    gapMd: string;
+    gapLg: string;
+    gapXl: string;
+}>, symbol>;
+export declare const iconSizes: stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}>, symbol>;
+export declare const borders: stylex.VarGroup<Readonly<{
+    hairline: string;
+    thin: string;
+}>, symbol>;
+export declare const widths: stylex.VarGroup<Readonly<{
+    contentXs: string;
+    contentSm: string;
+    contentMd: string;
+    contentLg: string;
+    sidebar: string;
+    toast: string;
+}>, symbol>;
+export declare const layers: {
+    scrim: string;
+    sidebar: string;
+    menu: string;
+    tooltip: string;
+    dialog: string;
+    toast: string;
+};
+export declare const radii: stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+    xxxxl: string;
+    full: string;
+}>, symbol>;
+export declare const fontSizes: stylex.VarGroup<Readonly<{
+    captionXs: string;
+    captionSm: string;
+    captionBase: string;
+    captionLg: string;
+    bodySm: string;
+    bodyBase: string;
+    bodyLg: string;
+    heading6: string;
+    heading5: string;
+    heading4: string;
+    heading3: string;
+    heading2: string;
+    heading1: string;
+}>, symbol>;
+export declare const lineHeights: stylex.VarGroup<Readonly<{
+    captionXs: string;
+    caption: string;
+    title: string;
+    bodySm: string;
+    body: string;
+    heading6: string;
+    heading5: string;
+    heading4: string;
+    heading3: string;
+    heading2: string;
+    heading1: string;
+}>, symbol>;
+export declare const fonts: stylex.VarGroup<Readonly<{
+    sans: string;
+    mono: string;
+}>, symbol>;
+export declare const fontFeatures: stylex.VarGroup<Readonly<{
+    sans: string;
+    kbd: string;
+}>, symbol>;
+export declare const fontWeights: stylex.VarGroup<Readonly<{
+    normal: string;
+    semimedium: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+}>, symbol>;
+export declare const shadows: stylex.VarGroup<Readonly<{
+    border: string;
+    default: string;
+    large: string;
+    extraLarge: string;
+}>, symbol>;
+export declare const motion: stylex.VarGroup<Readonly<{
+    easeOut: string;
+    easeInOut: string;
+    slideEasing: string;
+    instant: string;
+    exit: string;
+    fast: string;
+    base: string;
+    slide: string;
+    pulse: string;
+    spin: string;
+}>, symbol>;

package/dist/theme/tokens.stylex.js

@@ -0,0 +1,233 @@
+import * as stylex from '@stylexjs/stylex';
+export const breakpoints = stylex.defineConsts({
+    compact: '@media (max-width: 767px)',
+    reducedMotion: '@media (prefers-reduced-motion: reduce)',
+    coarsePointer: '@media (pointer: coarse)'
+});
+export const colors = stylex.defineVars({
+    blackFill: '#000',
+    blackTransparent: '#0000',
+    borderDefault: 'light-dark(#0000000f, #ffffff12)',
+    borderInverted: 'light-dark(#000, #fff)',
+    borderOnStandout: 'light-dark(#ffffff1a, #ffffff0d)',
+    borderStrong: 'light-dark(#00000026, #ffffff2c)',
+    borderStrongSolid: 'light-dark(#d9d9d9, #3a3a3a)',
+    borderSubtle: 'light-dark(#00000006, #ffffff09)',
+    brandBorderDefault: 'light-dark(#0088f653, #0f89fd7f)',
+    brandBorderFocus: 'light-dark(#0084e6a1, #0090ff)',
+    brandBorderSubtle: 'light-dark(#0093ff3d, #0081fd6b)',
+    brandGradientSubtle: 'linear-gradient(90deg, #ef5f0033 20%, #c2007a28 40%, #53009e25 60%, #0086f032 80%)',
+    brandForeground: 'light-dark(#0086f0fa, #3b9eff)',
+    brandSolid: '#0090ff',
+    brandSolidActive: 'light-dark(#0d74ce, #70b8ff)',
+    brandSolidHover: 'light-dark(#0588f0, #3b9eff)',
+    brandSubtle: 'light-dark(#008ff519, #0077ff3a)',
+    brandSubtleHover: 'light-dark(#009eff2a, #0075ff57)',
+    card: 'light-dark(#00000006, #ffffff09)',
+    component: 'light-dark(#0000000f, #ffffff12)',
+    componentActive: 'light-dark(#0000001f, #fff2)',
+    componentHover: 'light-dark(#00000017, #ffffff1b)',
+    componentOnContainerStrong: 'light-dark(#fff, #ffffff12)',
+    componentOnContainerStrongHover: 'light-dark(#f9f9f9, #ffffff1b)',
+    componentOnContainerSubtle: 'light-dark(#fff, #ffffff09)',
+    componentOnContainerSubtleHover: 'light-dark(#fff, #ffffff12)',
+    componentOnInverted: 'light-dark(#ffffff1a, #0000001a)',
+    componentOnSunken: 'light-dark(#fff, #2a2a2a)',
+    container: 'light-dark(#fff, #111)',
+    containerRecessed: 'light-dark(#fcfcfc, #111)',
+    dangerBorderDefault: 'light-dark(#f92d0050, #ff4f3864)',
+    dangerBorderSubtle: 'light-dark(#ff35002c, #fd201142)',
+    dangerForeground: 'light-dark(#d72400da, #ff6847eb)',
+    dangerSolid: '#e54d2e',
+    dangerSolidActive: 'light-dark(#d13415, #ff977d)',
+    dangerSolidHover: 'light-dark(#dd4425, #ec6142)',
+    dangerSubtle: 'light-dark(#ff200008, #ff55330f)',
+    dangerSubtleActive: 'light-dark(#ff2e003d, #fe332153)',
+    dangerSubtleHover: 'light-dark(#f52b0018, #ff35232b)',
+    disabled: 'light-dark(#0000000f, #ffffff09)',
+    divider: 'light-dark(#0000000f, #ffffff1f)',
+    disabledForeground: 'light-dark(#0004, #fff5)',
+    invertedSolid: 'light-dark(#000000f2, #fffffff2)',
+    invertedSolidActive: 'light-dark(#000000b3, #ffffffb3)',
+    invertedSolidHover: 'light-dark(#000c, #fffc)',
+    modal: 'light-dark(oklch(100% 0 0), oklch(25.2% 0 0))',
+    onBrandSolidForeground: '#fff',
+    onBrandSubtleForeground: 'light-dark(#0090ff, #70b8ff)',
+    onDangerSolidForeground: 'light-dark(#fffcfc, #fff)',
+    onDangerSubtleForeground: 'light-dark(#df2600d1, #ff977d)',
+    onInvertedForeground: 'light-dark(#fff, #000)',
+    onPositiveSolidForeground: 'light-dark(#fbfefc, #fff)',
+    onPositiveSubtleForeground: 'light-dark(#008f4acf, #46fea5d4)',
+    onStandoutPrimaryForeground: 'light-dark(#fff, #ffffffed)',
+    onStandoutSecondaryForeground: '#ffffff80',
+    onWarningSolidForeground: 'light-dark(#fefcfb, #fff)',
+    onWarningSubtleForeground: 'light-dark(#cc4e00, #ffa057)',
+    page: 'light-dark(#fff, oklch(15% 0 0))',
+    positiveBorderDefault: 'light-dark(#00963c52, #44ffaa4b)',
+    positiveForeground: 'light-dark(#008647d4, #43fea4ab)',
+    positiveSolid: '#30a46c',
+    positiveSolidHover: 'light-dark(#2b9a66, #33b074)',
+    positiveSubtle: 'light-dark(#00a43319, #22ff991e)',
+    positiveSubtleHover: 'light-dark(#00a83829, #11ff992d)',
+    primaryForeground: 'light-dark(#000000df, #ffffffed)',
+    secondaryForeground: 'light-dark(#0000009b, #ffffffaf)',
+    secondaryForegroundSolid: 'light-dark(#646464, #b4b4b4)',
+    shell: 'light-dark(oklch(97.3% 0 0), #000)',
+    standout: 'light-dark(#202020, #222)',
+    sunken: 'light-dark(#0000000d, #0006)',
+    tertiaryForeground: 'light-dark(#00000072, #ffffff64)',
+    transparent: '#0000',
+    transparentActive: 'light-dark(#0000000f, #ffffff12)',
+    transparentHover: 'light-dark(#0000000f, #ffffff1b)',
+    warningBorderDefault: 'light-dark(#ff81007d, #fd75045c)',
+    warningForeground: 'light-dark(#ef5f00, #ff801f)',
+    warningSolid: '#f76b15',
+    warningSolidHover: 'light-dark(#ef5f00, #ff801f)',
+    warningSubtle: 'light-dark(#ff9c0029, #fb6a0025)',
+    warningSubtleHover: 'light-dark(#ff91014a, #ff590039)',
+    whiteFill: '#fff',
+    dangerText: 'light-dark(#cd2200ea, #ff977d)',
+    indicatorBorder: 'light-dark(#d9d9d9, #484848)',
+    overlay: 'light-dark(#0006, #0009)'
+});
+export const space = stylex.defineVars({
+    xxs: '2px',
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    xxl: '32px',
+    xxxl: '48px'
+});
+export const controls = stylex.defineVars({
+    heightXs: '20px',
+    heightSm: '24px',
+    heightMd: '28px',
+    heightLg: '32px',
+    heightXl: '40px',
+    paddingXs: '6px',
+    paddingSm: '8px',
+    paddingMd: '10px',
+    paddingLg: '12px',
+    paddingXl: '14px',
+    gapXs: '4px',
+    gapSm: '4px',
+    gapMd: '6px',
+    gapLg: '6px',
+    gapXl: '8px'
+});
+export const iconSizes = stylex.defineVars({
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '16px',
+    xl: '20px'
+});
+export const borders = stylex.defineVars({
+    hairline: '0.5px',
+    thin: '1px'
+});
+export const widths = stylex.defineVars({
+    contentXs: '280px',
+    contentSm: '480px',
+    contentMd: '640px',
+    contentLg: '720px',
+    sidebar: '280px',
+    toast: '356px'
+});
+export const layers = stylex.defineConsts({
+    scrim: '15',
+    sidebar: '20',
+    menu: '20',
+    tooltip: '30',
+    dialog: '40',
+    toast: '40'
+});
+export const radii = stylex.defineVars({
+    xs: '2px',
+    sm: '4px',
+    md: '6px',
+    lg: '8px',
+    xl: '10px',
+    xxl: '12px',
+    xxxl: '16px',
+    xxxxl: '20px',
+    full: '9999px'
+});
+export const fontSizes = stylex.defineVars({
+    captionXs: '8px',
+    captionSm: '10px',
+    captionBase: '11px',
+    captionLg: '12px',
+    bodySm: '13px',
+    bodyBase: '15px',
+    bodyLg: '18px',
+    heading6: '20px',
+    heading5: '24px',
+    heading4: '28px',
+    heading3: '36px',
+    heading2: '44px',
+    heading1: '56px'
+});
+export const lineHeights = stylex.defineVars({
+    captionXs: '12px',
+    caption: '16px',
+    title: '18px',
+    bodySm: '20px',
+    body: '24px',
+    heading6: '24px',
+    heading5: '32px',
+    heading4: '36px',
+    heading3: '44px',
+    heading2: '56px',
+    heading1: '56px'
+});
+export const fonts = stylex.defineVars({
+    sans: '"Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, monospace'
+});
+export const fontFeatures = stylex.defineVars({
+    sans: '"ss03"',
+    kbd: '"ss02"'
+});
+export const fontWeights = stylex.defineVars({
+    normal: '400',
+    semimedium: '450',
+    medium: '500',
+    semibold: '600',
+    bold: '700'
+});
+export const shadows = stylex.defineVars({
+    border: '0 0 0 1px light-dark(#00000012, #ffffff12)',
+    default: '0 0 0 .5px light-dark(#0000, #ffffff12) inset, 0 0 0 .5px light-dark(#0000000f, #0000), 0 1px 1px -1px light-dark(#0000001a, #0000), 0 1px 2px 0px light-dark(#0000000d, #0000)',
+    large: '0 0 0 .5px light-dark(color-mix(in oklab, #0000000f, #f0f0f0 25%), #0000), 0 0 0 1px light-dark(#0000, color-mix(in oklab, #ffffff12, #3a3a3a 25%)), 0 2px 3px -2px light-dark(#0000000f, #00000026), 0 3px 12px -4px light-dark(#0000001a, #0000), 0 4px 16px -8px light-dark(#0000000d, #0000), 0 3px 8px -2px light-dark(#0000, #0006), 0 4px 12px -4px light-dark(#0000, #00000080)',
+    extraLarge: '0 0 0 .5px light-dark(#0000, #ffffff12) inset, 0 0 0 .5px light-dark(#0000000f, #0000), 0 8px 40px 0px #0000000d, 0 12px 32px -16px #00000026'
+});
+export const motion = stylex.defineVars({
+    easeOut: 'cubic-bezier(0, 0, .2, 1)',
+    easeInOut: 'cubic-bezier(.4, 0, .2, 1)',
+    slideEasing: 'cubic-bezier(0.32, 0.72, 0, 1)',
+    instant: {
+        default: '75ms',
+        '@media (prefers-reduced-motion: reduce)': '0ms'
+    },
+    exit: {
+        default: '120ms',
+        '@media (prefers-reduced-motion: reduce)': '0ms'
+    },
+    fast: {
+        default: '150ms',
+        '@media (prefers-reduced-motion: reduce)': '0ms'
+    },
+    base: {
+        default: '200ms',
+        '@media (prefers-reduced-motion: reduce)': '0ms'
+    },
+    slide: {
+        default: '300ms',
+        '@media (prefers-reduced-motion: reduce)': '0ms'
+    },
+    pulse: '2s',
+    spin: '1200ms'
+});

package/dist/vite/commandBridge.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function commandBridge(): Plugin;

package/dist/vite/commandBridge.js

@@ -0,0 +1,46 @@
+const COMMAND_EVENT = 'pattern:command';
+const REPLY_EVENT = 'pattern:reply';
+const REPLY_TIMEOUT_MS = 3000;
+const NO_APP_OPEN = 'No Pattern app is open in a browser. Open the dev server URL (app start opens it), then send again.';
+export function commandBridge() {
+    return {
+        name: 'pattern-command-bridge',
+        apply: 'serve',
+        configureServer(server) {
+            const waiting = new Map();
+            server.ws.on(REPLY_EVENT, (reply) => {
+                waiting.get(reply.id)?.(reply);
+                waiting.delete(reply.id);
+            });
+            server.middlewares.use('/__pattern/send', (request, response) => {
+                let body = '';
+                request.on('data', (chunk) => (body += chunk.toString()));
+                request.on('end', () => {
+                    const id = crypto.randomUUID();
+                    const respond = (status, payload) => {
+                        response.statusCode = status;
+                        response.setHeader('content-type', 'application/json');
+                        response.end(JSON.stringify(payload));
+                    };
+                    let command;
+                    try {
+                        command = JSON.parse(body);
+                    }
+                    catch {
+                        respond(400, { error: `Command is not valid JSON: ${body}` });
+                        return;
+                    }
+                    const timer = setTimeout(() => {
+                        waiting.delete(id);
+                        respond(503, { error: NO_APP_OPEN });
+                    }, REPLY_TIMEOUT_MS);
+                    waiting.set(id, (reply) => {
+                        clearTimeout(timer);
+                        respond(200, reply);
+                    });
+                    server.ws.send(COMMAND_EVENT, { id, command });
+                });
+            });
+        }
+    };
+}

package/dist/vite/designManifest.d.ts

@@ -0,0 +1,25 @@
+type Counts = Record<string, number>;
+type PrimitiveUse = {
+    uses: number;
+    props: Record<string, Counts>;
+};
+type TokenEntry = {
+    value: string;
+    isOverridden: boolean;
+};
+export type DesignManifest = {
+    sdk: string;
+    tokens: Record<string, Record<string, TokenEntry>>;
+    primitives: Record<string, PrimitiveUse>;
+    customPieces: {
+        name: string;
+        file: string;
+        tokens: string[];
+    }[];
+    icons: {
+        builtIn: string[];
+        app: string[];
+    };
+};
+export declare function designManifest(root: string): DesignManifest;
+export {};