@trypattern/sdk 0.1.7 → 0.1.9

package/dist/auth/user.d.ts

@@ -8,4 +8,5 @@ export declare const userSchema: z.ZodObject<{
 }, z.core.$strip>;
 export type User = z.output<typeof userSchema>;
 export type StoredUser = Omit<User, 'isAdmin'>;
-export declare const USER_COOKIE = "pattern_user";
+export declare const USER_COOKIE = "__Host-pattern_user";
+export declare const SESSION_COOKIE = "__Host-pattern_session";

package/dist/auth/user.js

@@ -6,4 +6,5 @@ export const userSchema = z.object({
     avatarUrl: z.string().nullable(),
     isAdmin: z.boolean().default(false)
 });
-export const USER_COOKIE = 'pattern_user';
+export const USER_COOKIE = '__Host-pattern_user';
+export const SESSION_COOKIE = '__Host-pattern_session';

package/dist/cli/app.js

@@ -270,7 +270,7 @@ and restore sign in the same way when they need to, so this is rarely run on its
     },
     pull: {
         summary: 'Download a site from onpattern.app and install it, ready for app start',
-        details: `app pull sundayparty
+        details: `app pull acmeflower
 Downloads the source of the site's latest live version into this folder when it is empty, or into
 ./<name> otherwise, writes pattern.json, installs, and runs app setup. Never needs git; when the
 Command Line Tools are installed it also makes a first commit. Signs in first if needed (see app login).
@@ -1283,7 +1283,7 @@ async function setup() {
         problems.push(`Node ${haveNode} is older than Node ${majorOf(pins.node)} (.nvmrc says ${pins.node})\n  fix  pnpm env use --global ${majorOf(pins.node)}`);
     }
     if (!isAtLeastMajor(havePnpm, pins.pnpm)) {
-        problems.push(`pnpm ${havePnpm || '(not found)'} is older than pnpm ${majorOf(pins.pnpm)} (package.json devEngines says ${pins.pnpm} or newer)\n  fix  npm install --global pnpm@latest`);
+        problems.push(`pnpm ${havePnpm || '(not found)'} is older than pnpm ${majorOf(pins.pnpm)} (package.json devEngines says ${pins.pnpm} or newer)\n  fix  npm install --global pnpm@12`);
     }
     const versions = { node: haveNode, pnpm: havePnpm, expected: pins };
     if (problems.length > 0) {

package/dist/cli/publishing.js

@@ -5,6 +5,7 @@ import { basename, dirname, extname, join, matchesGlob, relative } from 'node:pa
 import { z } from 'zod';
 import { DASHBOARD_URL, UPLOAD, appSummary, isPrivatePath, loginPoll, loginStarted, nameProblem, publishMessage, publishSummary, setupCodeExchanged, sourcePathProblem } from "../publishWire.js";
 import { appInfo } from "../appTitle.js";
+import { SESSION_COOKIE } from "../auth/user.js";
 import { PROJECT_FILE, readProjectFile } from "../vite/projectFile.js";
 const CONFIG_DIR = join(homedir(), '.config', 'pattern');
 const CREDENTIALS_FILE = join(CONFIG_DIR, 'credentials.json');
@@ -13,7 +14,6 @@ const LOGIN_MINUTES = 10;
 const POLL_MS = 2000;
 const LOGIN_WAIT_MS = 100_000;
 const PUBLISH_WAIT_MS = 300_000;
-const SESSION_COOKIE = 'pattern_session';
 const LAUNCHER = 'app';
 const STARTER_WORKSPACE = 'pnpm-workspace.yaml';
 const STARTER_BUILD_SETTINGS = 'allowBuilds:\n  esbuild: false\n  workerd: false\n';
@@ -258,7 +258,7 @@ async function ensurePnpm(io, cwd) {
     if (await hasPnpm(io, cwd))
         return true;
     io.say('Installing pnpm');
-    const installed = await io.run('npm', ['install', '--global', 'pnpm@latest'], cwd);
+    const installed = await io.run('npm', ['install', '--global', 'pnpm@12'], cwd);
     return installed.code === 0 && (await hasPnpm(io, cwd));
 }
 function firstChange(title, url, folder) {
@@ -277,7 +277,7 @@ export async function pull(io, name, cwd, setupCode) {
         return {
             code: 2,
             data: { error: 'missing name' },
-            text: '✗ Which site? app pull sundayparty'
+            text: '✗ Which site? app pull acmeflower'
         };
     }
     const target = folderFor(name, cwd);

package/dist/components/AppFrame.d.ts

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

package/dist/components/AppFrame.js

@@ -6,7 +6,7 @@ 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 }) {
+export function AppFrame({ workspace, links, workspaceMenu = [], isSidebarToggled, onToggleSidebar, onCloseSidebar, onSearch, children }) {
     const appSettings = useModel('appSettings');
     const account = useModel('account');
     const menu = account.user === null
@@ -17,7 +17,7 @@ export function AppFrame({ links, workspaceMenu = [], isSidebarToggled, onToggle
             { 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: appSettings.title, workspaceMenu: menu, links: links, isToggled: isSidebarToggled, isAnimating: isSidebarAnimating, onFollowLink: onCloseSidebar, onSearch: onSearch === undefined
+    return (_jsx(FrameContext, { value: { onToggleSidebar }, children: _jsxs("div", { ...stylex.props(styles.frame), children: [_jsx(Sidebar, { workspace: workspace ?? appSettings.title, workspaceMenu: menu, links: links, isToggled: isSidebarToggled, isAnimating: isSidebarAnimating, onFollowLink: onCloseSidebar, onSearch: onSearch === undefined
                         ? undefined
                         : () => {
                             onCloseSidebar();

package/dist/components/Appear.d.ts

@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react';
+import type { SpaceName } from './spacing.ts';
 type AppearProps = {
+    isVisible?: boolean;
+    spaceBefore?: SpaceName;
     children: ReactNode;
 };
-export declare function Appear({ children }: AppearProps): import("react").JSX.Element;
+export declare function Appear({ isVisible, spaceBefore, children }: AppearProps): import("react").JSX.Element;
 export {};

package/dist/components/Appear.js

@@ -1,21 +1,100 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { breakpoints, motion, space } from "../theme/tokens.stylex.js";
-export function Appear({ children }) {
-    return _jsx("div", { ...stylex.props(styles.appear), children: children });
+export function Appear({ isVisible = true, spaceBefore = 'none', children }) {
+    const inner = useRef(null);
+    const measured = useRef(0);
+    const lastShown = useRef(children);
+    const [height, setHeight] = useState(0);
+    const [isMoving, setIsMoving] = useState(true);
+    const [isGone, setIsGone] = useState(!isVisible);
+    if (isVisible)
+        lastShown.current = children;
+    if (isVisible && isGone)
+        setIsGone(false);
+    useLayoutEffect(() => {
+        const node = inner.current;
+        if (node === null)
+            return undefined;
+        const observer = new ResizeObserver(() => {
+            const next = node.offsetHeight;
+            if (next === measured.current)
+                return;
+            measured.current = next;
+            setIsMoving(!prefersStill());
+            setHeight(next);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        if (isVisible)
+            return;
+        if (prefersStill()) {
+            setIsGone(true);
+            return;
+        }
+        setIsMoving(true);
+    }, [isVisible]);
+    function settle() {
+        setIsMoving(false);
+        if (!isVisible)
+            setIsGone(true);
+    }
+    return (_jsx("div", { ...stylex.props(styles.frame, styles.height(isVisible ? height : 0), (isMoving || !isVisible) && styles.clipped), onTransitionEnd: (event) => {
+            if (event.target === event.currentTarget)
+                settle();
+        }, onTransitionCancel: (event) => {
+            if (event.target === event.currentTarget)
+                settle();
+        }, children: _jsx("div", { ref: inner, ...stylex.props(styles.appear, spacesBefore[spaceBefore], !isVisible && styles.hidden), children: isGone ? null : lastShown.current }) }));
+}
+function prefersStill() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 const enter = stylex.keyframes({
     from: { opacity: 0, transform: `translateY(${space.xs})` }
 });
 const styles = stylex.create({
+    frame: {
+        flexShrink: 0,
+        transitionTimingFunction: motion.slideEasing,
+        transitionDuration: motion.slide,
+        transitionProperty: 'height'
+    },
+    height: (height) => ({
+        height: `${height}px`
+    }),
+    clipped: {
+        overflow: 'hidden'
+    },
     appear: {
         display: 'flex',
         flexDirection: 'column',
+        opacity: 1,
+        transitionTimingFunction: motion.easeOut,
+        transitionDuration: motion.fast,
+        transitionProperty: 'opacity',
         animationName: {
             default: enter,
             [breakpoints.reducedMotion]: 'none'
         },
-        animationDuration: motion.base,
+        animationDuration: motion.slide,
         animationTimingFunction: motion.easeOut
+    },
+    hidden: {
+        opacity: 0
     }
 });
+const spacesBefore = stylex.create({
+    none: { paddingTop: 0 },
+    xxs: { paddingTop: space.xxs },
+    xs: { paddingTop: space.xs },
+    sm: { paddingTop: space.sm },
+    md: { paddingTop: space.md },
+    lg: { paddingTop: space.lg },
+    xl: { paddingTop: space.xl },
+    xxl: { paddingTop: space.xxl },
+    xxxl: { paddingTop: space.xxxl }
+});

package/dist/components/Link.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
 import { Link as RouterLink } from 'react-router';
-import { colors, motion, radii } from "../theme/tokens.stylex.js";
+import { borders, colors, motion, radii } from "../theme/tokens.stylex.js";
 import { focusRing } from "./controlLook.js";
 import { interact, textOf } from "./interaction.js";
 export function Link({ to, href, tone = 'brand', children }) {
-    const className = stylex.props(styles.link, looks[tone], focusRing.visible).className;
+    const className = stylex.props(styles.link, looks[tone], href !== undefined && styles.leaves, focusRing.visible).className;
     if (href !== undefined) {
         return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: () => interact({
                 primitive: 'Link',
@@ -21,11 +21,16 @@ export function Link({ to, href, tone = 'brand', children }) {
 }
 const styles = stylex.create({
     link: {
-        textDecoration: 'none',
+        textDecorationLine: 'none',
         borderRadius: radii.xs,
         transitionTimingFunction: motion.easeOut,
         transitionDuration: motion.fast,
         transitionProperty: 'color'
+    },
+    leaves: {
+        textDecorationLine: 'underline',
+        textDecorationThickness: borders.thin,
+        textUnderlineOffset: '0.25em'
     }
 });
 const looks = stylex.create({

package/dist/components/ListRow.d.ts

@@ -4,9 +4,10 @@ type ListRowProps = {
     to?: AppPath;
     onClick?: () => void;
     isMuted?: boolean;
+    isCurrent?: boolean;
     leading?: ReactNode;
     trailing?: ReactNode;
     children: ReactNode;
 };
-export declare function ListRow({ to, onClick, isMuted, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
+export declare function ListRow({ to, onClick, isMuted, isCurrent, leading, trailing, children }: ListRowProps): import("react").JSX.Element;
 export {};

package/dist/components/ListRow.js

@@ -5,9 +5,9 @@ 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, leading, trailing, children }) {
+export function ListRow({ to, onClick, isMuted = false, isCurrent = false, 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, focusRing.visible, focusRing.inside);
+    const look = stylex.props(styles.row, (to !== undefined || onClick !== undefined) && styles.interactive, isMuted && styles.muted, isCurrent && styles.current, focusRing.visible, focusRing.inside);
     const report = () => {
         interact({
             primitive: 'ListRow',
@@ -17,10 +17,10 @@ export function ListRow({ to, onClick, isMuted = false, leading, trailing, child
         onClick?.();
     };
     if (to !== undefined) {
-        return (_jsx(RouterLink, { to: to, onClick: report, ...look, children: content }));
+        return (_jsx(RouterLink, { to: to, onClick: report, "aria-current": isCurrent ? 'page' : undefined, ...look, children: content }));
     }
     if (onClick !== undefined) {
-        return (_jsx(BaseButton, { onClick: report, className: look.className, children: content }));
+        return (_jsx(BaseButton, { onClick: report, "aria-pressed": isCurrent, className: look.className, children: content }));
     }
     return _jsx("div", { ...look, children: content });
 }
@@ -46,6 +46,9 @@ const styles = stylex.create({
     muted: {
         color: colors.tertiaryForeground
     },
+    current: {
+        backgroundColor: colors.transparentHover
+    },
     main: {
         display: 'flex',
         flexGrow: 1,

package/dist/components/Sidebar.js

@@ -15,7 +15,8 @@ export function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimatin
         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(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, 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 === '/', 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 : (_jsx(Badge, { variant: "transparent", children: item.count }))] }, item.to)))] }) }) })] }));
+    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, 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 : (_jsx(Badge, { variant: "transparent", children: item.count }))] }, item.to)))] }) }) })] }));
 }
 const styles = stylex.create({
     sidebar: {

package/dist/patternAccess.d.ts

@@ -0,0 +1,21 @@
+import { z } from 'zod';
+export declare const TABLES_READ = "tables:read";
+export declare const ASSERTION_SECONDS = 60;
+export declare const NEXT_PAGE_HEADER = "x-pattern-next";
+export declare const assertionKey: z.ZodObject<{
+    kid: z.ZodString;
+    kty: z.ZodLiteral<"OKP">;
+    crv: z.ZodLiteral<"Ed25519">;
+    x: z.ZodString;
+    d: z.ZodString;
+}, z.core.$strip>;
+export type AssertionKey = z.output<typeof assertionKey>;
+export declare function signTablesAssertion(key: AssertionKey, { sub, aud }: {
+    sub: string;
+    aud: string;
+}, now: number): Promise<string>;
+export declare function verifiedTablesAssertion(token: string, { hostname, keys, now }: {
+    hostname: string;
+    keys: Readonly<Record<string, string>>;
+    now: number;
+}): Promise<string | undefined>;

package/dist/patternAccess.js

@@ -0,0 +1,110 @@
+import { z } from 'zod';
+export const TABLES_READ = 'tables:read';
+export const ASSERTION_SECONDS = 60;
+export const NEXT_PAGE_HEADER = 'x-pattern-next';
+const CLOCK_SKEW_SECONDS = 30;
+const ED25519 = { name: 'Ed25519' };
+export const assertionKey = z.object({
+    kid: z.string().min(1),
+    kty: z.literal('OKP'),
+    crv: z.literal('Ed25519'),
+    x: z.string(),
+    d: z.string()
+});
+const assertionHeader = z.object({
+    alg: z.literal('EdDSA'),
+    typ: z.literal('JWT'),
+    kid: z.string()
+});
+const assertionClaims = z.object({
+    sub: z.email(),
+    aud: z.string(),
+    scope: z.literal(TABLES_READ),
+    iat: z.int(),
+    exp: z.int()
+});
+const encoder = new TextEncoder();
+function base64url(bytes) {
+    return btoa(String.fromCharCode(...bytes))
+        .replaceAll('+', '-')
+        .replaceAll('/', '_')
+        .replaceAll('=', '');
+}
+function bytesOf(text) {
+    try {
+        const binary = atob(text.replaceAll('-', '+').replaceAll('_', '/'));
+        return Uint8Array.from(binary, (letter) => letter.charCodeAt(0));
+    }
+    catch {
+        return undefined;
+    }
+}
+function jsonOf(text) {
+    const bytes = bytesOf(text);
+    if (bytes === undefined)
+        return undefined;
+    try {
+        return JSON.parse(new TextDecoder().decode(bytes));
+    }
+    catch {
+        return undefined;
+    }
+}
+function encoded(value) {
+    return base64url(encoder.encode(JSON.stringify(value)));
+}
+export async function signTablesAssertion(key, { sub, aud }, now) {
+    const privateKey = await crypto.subtle.importKey('jwk', { kty: key.kty, crv: key.crv, x: key.x, d: key.d }, ED25519, false, ['sign']);
+    const signed = `${encoded({ alg: 'EdDSA', typ: 'JWT', kid: key.kid })}.${encoded({
+        sub,
+        aud,
+        scope: TABLES_READ,
+        iat: now,
+        exp: now + ASSERTION_SECONDS
+    })}`;
+    const signature = await crypto.subtle.sign(ED25519, privateKey, encoder.encode(signed));
+    return `${signed}.${base64url(new Uint8Array(signature))}`;
+}
+async function isSignedBy(publicKey, signed, signature) {
+    const keyBytes = bytesOf(publicKey);
+    const signatureBytes = bytesOf(signature);
+    if (keyBytes === undefined || signatureBytes === undefined)
+        return false;
+    try {
+        const key = await crypto.subtle.importKey('raw', keyBytes, ED25519, false, [
+            'verify'
+        ]);
+        return await crypto.subtle.verify(ED25519, key, signatureBytes, encoder.encode(signed));
+    }
+    catch {
+        return false;
+    }
+}
+export async function verifiedTablesAssertion(token, { hostname, keys, now }) {
+    const [header, claims, signature, ...rest] = token.split('.');
+    if (header === undefined ||
+        claims === undefined ||
+        signature === undefined ||
+        rest.length > 0) {
+        return undefined;
+    }
+    const parsedHeader = assertionHeader.safeParse(jsonOf(header));
+    if (!parsedHeader.success)
+        return undefined;
+    const { kid } = parsedHeader.data;
+    const publicKey = Object.hasOwn(keys, kid) ? keys[kid] : undefined;
+    if (publicKey === undefined)
+        return undefined;
+    if (!(await isSignedBy(publicKey, `${header}.${claims}`, signature))) {
+        return undefined;
+    }
+    const parsed = assertionClaims.safeParse(jsonOf(claims));
+    if (!parsed.success)
+        return undefined;
+    const { sub, aud, iat, exp } = parsed.data;
+    const isFresh = exp > iat &&
+        exp - iat <= ASSERTION_SECONDS &&
+        iat <= now + CLOCK_SKEW_SECONDS &&
+        now < exp;
+    return aud === hostname && isFresh ? sub.toLowerCase() : undefined;
+}