@trypattern/sdk 0.1.0 → 0.1.1

package/dist/cli/publishing.js

@@ -0,0 +1,493 @@
+import { spawnSync } from 'node:child_process';
+import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { homedir, hostname, userInfo } from 'node:os';
+import { basename, dirname, extname, join, matchesGlob, relative } from 'node:path';
+import { z } from 'zod';
+import { DASHBOARD_URL, UPLOAD, appSummary, isPrivatePath, loginPoll, loginStarted, nameProblem, publishSummary, sourcePathProblem } from "../publishWire.js";
+import { appInfo } from "../appTitle.js";
+import { PROJECT_FILE, readProjectFile } from "../vite/projectFile.js";
+const CONFIG_DIR = join(homedir(), '.config', 'pattern');
+const CREDENTIALS_FILE = join(CONFIG_DIR, 'credentials.json');
+const PENDING_FILE = join(CONFIG_DIR, 'pending-login.json');
+const LOGIN_MINUTES = 10;
+const POLL_MS = 2000;
+const LOGIN_WAIT_MS = 120_000;
+const PUBLISH_WAIT_MS = 300_000;
+const SESSION_COOKIE = 'pattern_session';
+const IGNORED_IN_EMPTY_FOLDER = new Set(['.DS_Store', '.claude']);
+const MIME_TYPES = {
+    '.html': 'text/html',
+    '.js': 'text/javascript',
+    '.mjs': 'text/javascript',
+    '.css': 'text/css',
+    '.json': 'application/json',
+    '.map': 'application/json',
+    '.webmanifest': 'application/manifest+json',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon',
+    '.woff2': 'font/woff2',
+    '.woff': 'font/woff',
+    '.txt': 'text/plain',
+    '.xml': 'application/xml',
+    '.pdf': 'application/pdf',
+    '.mp4': 'video/mp4',
+    '.sql': 'application/sql'
+};
+const STEP_WORDS = {
+    reserve: 'Reserving the address',
+    database: 'Updating the database',
+    'sign-in': 'Turning on sign-in',
+    publish: 'Publishing the site'
+};
+function dashboard() {
+    return (process.env['PATTERN_DASHBOARD_URL'] ?? DASHBOARD_URL).replace(/\/$/, '');
+}
+const credentials = z.record(z.string(), z.object({ cookie: z.string() }));
+const pendingLogin = z.object({
+    dashboard: z.string(),
+    secret: z.string(),
+    code: z.string(),
+    url: z.string(),
+    startedAt: z.number()
+});
+function readJson(path, schema) {
+    try {
+        const parsed = schema.safeParse(JSON.parse(readFileSync(path, 'utf8')));
+        return parsed.success ? parsed.data : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function writePrivate(path, value) {
+    mkdirSync(dirname(path), { recursive: true, mode: 0o700 });
+    writeFileSync(path, `${JSON.stringify(value, null, 2)}\n`, { mode: 0o600 });
+}
+function savedCookie() {
+    return readJson(CREDENTIALS_FILE, credentials)?.[dashboard()]?.cookie;
+}
+function saveCookie(cookie) {
+    const all = { ...readJson(CREDENTIALS_FILE, credentials) };
+    if (cookie === undefined)
+        delete all[dashboard()];
+    else
+        all[dashboard()] = { cookie };
+    writePrivate(CREDENTIALS_FILE, all);
+}
+class SignedOut extends Error {
+}
+async function call(path, init = {}) {
+    const cookie = savedCookie();
+    if (cookie === undefined)
+        throw new SignedOut();
+    const response = await fetch(`${dashboard()}${path}`, {
+        ...init,
+        headers: {
+            ...init.headers,
+            cookie,
+            origin: dashboard()
+        }
+    });
+    const renewed = response.headers
+        .getSetCookie()
+        .find((line) => line.startsWith(`${SESSION_COOKIE}=`));
+    if (renewed !== undefined) {
+        const pair = renewed.split(';')[0] ?? '';
+        if (pair !== `${SESSION_COOKIE}=`)
+            saveCookie(pair);
+    }
+    if (response.status === 401) {
+        saveCookie(undefined);
+        throw new SignedOut();
+    }
+    return response;
+}
+async function callJson(path, schema, init = {}) {
+    const response = await call(path, init);
+    const body = await response.json().catch(() => null);
+    if (!response.ok) {
+        const error = Reflect.get(Object(body), 'error');
+        throw new Error(typeof error === 'string' ? error : `HTTP ${response.status}`);
+    }
+    return schema.parse(body);
+}
+function labelOfThisMachine() {
+    const machine = hostname().replace(/\.local$/, '');
+    return `${userInfo().username} on ${machine}`.slice(0, 80);
+}
+function sleep(ms) {
+    return new Promise((done) => setTimeout(done, ms));
+}
+async function waitForApproval(secret) {
+    const deadline = Date.now() + LOGIN_WAIT_MS;
+    while (Date.now() < deadline) {
+        const response = await fetch(`${dashboard()}/api/auth/cli/logins/${secret}`);
+        const poll = loginPoll.safeParse(await response.json().catch(() => null));
+        if (poll.success && poll.data.status === 'approved')
+            return poll.data.cookie;
+        await sleep(POLL_MS);
+    }
+    return undefined;
+}
+async function signIn(io, again) {
+    const pending = readJson(PENDING_FILE, pendingLogin);
+    const isFresh = pending !== undefined &&
+        pending.dashboard === dashboard() &&
+        Date.now() - pending.startedAt < LOGIN_MINUTES * 60_000;
+    if (pending !== undefined && isFresh) {
+        io.say(`Waiting for Allow on ${pending.url} (code ${pending.code})`);
+        const cookie = await waitForApproval(pending.secret);
+        if (cookie !== undefined) {
+            saveCookie(cookie);
+            rmSync(PENDING_FILE, { force: true });
+            return { code: 0, data: { signedIn: true }, text: '✓ Signed in' };
+        }
+        return {
+            code: 3,
+            data: { waitingFor: 'approval', code: pending.code, url: pending.url },
+            text: `✗ Not allowed yet. The browser page ${pending.url} shows the code ${pending.code}.\n  next  once they click Allow there, run ${again} again`
+        };
+    }
+    const response = await fetch(`${dashboard()}/api/auth/cli/logins`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ label: labelOfThisMachine() })
+    });
+    const started = loginStarted.parse(await response.json());
+    writePrivate(PENDING_FILE, {
+        dashboard: dashboard(),
+        ...started,
+        startedAt: Date.now()
+    });
+    io.openUrl(started.url);
+    return {
+        code: 3,
+        data: { waitingFor: 'approval', code: started.code, url: started.url },
+        text: `Opened ${started.url} in the browser.\n  code  ${started.code}\n  next  tell them: "Check the code on the page is ${started.code}, then click Allow." Then run ${again} again.`
+    };
+}
+async function signedIn(io, again, work) {
+    if (savedCookie() === undefined) {
+        const outcome = await signIn(io, again);
+        if (outcome.code !== 0)
+            return outcome;
+    }
+    try {
+        return await work();
+    }
+    catch (error) {
+        if (!(error instanceof SignedOut))
+            throw error;
+        const outcome = await signIn(io, again);
+        if (outcome.code !== 0)
+            return outcome;
+        return work();
+    }
+}
+function isOutcome(value) {
+    return typeof value === 'object' && value !== null && 'text' in value;
+}
+function failure(error, data = {}) {
+    const message = error instanceof TypeError && error.message === 'fetch failed'
+        ? `Couldn’t reach ${dashboard()}. Check the internet connection and try again.`
+        : error instanceof Error
+            ? error.message
+            : String(error);
+    return { code: 1, data: { ...data, error: message }, text: `✗ ${message}` };
+}
+export async function login(io) {
+    try {
+        if (savedCookie() !== undefined) {
+            const me = await call('/api/me').catch(() => undefined);
+            if (me?.ok === true) {
+                return {
+                    code: 0,
+                    data: { signedIn: true },
+                    text: '✓ Already signed in'
+                };
+            }
+        }
+        return await signIn(io, 'app login');
+    }
+    catch (error) {
+        return failure(error);
+    }
+}
+function isEmptyFolder(path) {
+    return readdirSync(path).every((entry) => IGNORED_IN_EMPTY_FOLDER.has(entry));
+}
+function commandLineToolsReady() {
+    return spawnSync('xcode-select', ['-p'], { stdio: 'ignore' }).status === 0;
+}
+export async function pull(io, name, cwd) {
+    if (name === undefined || nameProblem(name) !== undefined) {
+        return {
+            code: 2,
+            data: { error: 'missing name' },
+            text: '✗ Which site? app pull sundayparty'
+        };
+    }
+    const target = isEmptyFolder(cwd) ? cwd : join(cwd, name);
+    if (target !== cwd && existsSync(target) && !isEmptyFolder(target)) {
+        return {
+            code: 1,
+            data: { error: 'folder not empty', folder: target },
+            text: `✗ ${target} already has files in it. Pull into an empty folder.`
+        };
+    }
+    try {
+        const result = await signedIn(io, `app pull ${name}`, async () => {
+            const app = await callJson(`/api/apps/${name}`, appSummary);
+            const response = await call(`/api/apps/${name}/source`);
+            if (!response.ok)
+                throw new Error(`Couldn’t download ${name}`);
+            const number = response.headers.get('x-pattern-publish') ?? '?';
+            const live = await fetch(`${app.url}/api/app`)
+                .then((reply) => reply.json())
+                .then((body) => appInfo.parse(body).title)
+                .catch(() => '');
+            const title = live === '' ? app.title : live;
+            return { app, title, number, form: await response.formData() };
+        });
+        if (isOutcome(result))
+            return result;
+        let files = 0;
+        for (const [key, value] of result.form.entries()) {
+            if (!key.startsWith(UPLOAD.source) || typeof value === 'string')
+                continue;
+            const path = key.slice(UPLOAD.source.length);
+            if (sourcePathProblem(path) !== undefined)
+                continue;
+            const destination = join(target, path);
+            mkdirSync(dirname(destination), { recursive: true });
+            writeFileSync(destination, Buffer.from(await value.arrayBuffer()));
+            files += 1;
+        }
+        writeFileSync(join(target, PROJECT_FILE), `${JSON.stringify({ name, title: result.title }, null, 2)}\n`);
+        io.say(`✓ Downloaded ${files} files of version ${result.number}`);
+        const install = await io.run('pnpm', ['install'], target);
+        if (install.code !== 0) {
+            return failure(new Error(`pnpm install failed\n${install.output}`));
+        }
+        io.say('✓ Installed');
+        const setup = await io.run(join(target, 'app'), ['setup'], target);
+        if (setup.code !== 0)
+            io.say(setup.output.trimEnd());
+        if (commandLineToolsReady() && !existsSync(join(target, '.git'))) {
+            await io.run('git', ['init', '-q'], target);
+            await io.run('git', ['add', '-A'], target);
+            await io.run('git', ['commit', '-q', '-m', `Version ${result.number} from onpattern.app`], target);
+        }
+        const moved = target === cwd ? '' : `\n  folder  ${target} (open this folder in Claude)`;
+        return {
+            code: 0,
+            data: { name, folder: target, version: result.number, files },
+            text: `✓ ${result.title} is on this computer${moved}\n  next  read AGENTS.md, then app start`
+        };
+    }
+    catch (error) {
+        return failure(error);
+    }
+}
+function filesUnder(root) {
+    if (!existsSync(root))
+        return [];
+    return readdirSync(root, { recursive: true, withFileTypes: true })
+        .filter((entry) => entry.isFile())
+        .map((entry) => relative(root, join(entry.parentPath, entry.name)));
+}
+function ignoredPatterns(root) {
+    const path = join(root, '.gitignore');
+    if (!existsSync(path))
+        return [];
+    return readFileSync(path, 'utf8')
+        .split('\n')
+        .map((line) => line.trim())
+        .filter((line) => line !== '' && !line.startsWith('#'))
+        .map((line) => line.replace(/^\//, '').replace(/\/$/, ''));
+}
+function sourceFiles(root) {
+    const git = existsSync(join(root, '.git')) || commandLineToolsReady()
+        ? spawnSync('git', ['ls-files', '--cached', '--others', '--exclude-standard', '-z'], { cwd: root, encoding: 'utf8' })
+        : undefined;
+    const listed = git !== undefined && git.status === 0
+        ? git.stdout.split('\0').filter((path) => path !== '')
+        : filesUnder(root).filter((path) => {
+            const patterns = ignoredPatterns(root);
+            return !patterns.some((pattern) => matchesGlob(path, pattern) ||
+                path.split('/').some((part) => matchesGlob(part, pattern)));
+        });
+    return listed.filter((path) => sourcePathProblem(path) === undefined &&
+        existsSync(join(root, path)) &&
+        statSync(join(root, path)).isFile());
+}
+function fileBlob(path, contents) {
+    return new Blob([contents ?? readFileSync(path)], {
+        type: MIME_TYPES[extname(path).toLowerCase()] ?? 'application/octet-stream'
+    });
+}
+function workerDirectory(dist) {
+    return readdirSync(dist, { withFileTypes: true })
+        .filter((entry) => entry.isDirectory() && entry.name !== 'client')
+        .map((entry) => join(dist, entry.name))
+        .filter((path) => existsSync(join(path, 'wrangler.json')))
+        .toSorted((a, b) => statSync(b).mtimeMs - statSync(a).mtimeMs)[0];
+}
+function starterPackageJson(path, sdkVersion) {
+    return readFileSync(path, 'utf8').replace(/"@trypattern\/sdk": "workspace:[^"]*"/, `"@trypattern/sdk": "${sdkVersion}"`);
+}
+function uploadForm(root, io, isStarter) {
+    const dist = join(root, 'dist');
+    const worker = workerDirectory(dist);
+    if (worker === undefined)
+        throw new Error('The build left no worker in dist/');
+    const wrangler = JSON.parse(readFileSync(join(worker, 'wrangler.json'), 'utf8'));
+    const form = new FormData();
+    form.append(UPLOAD.compatibilityDate, String(Reflect.get(Object(wrangler), 'compatibility_date') ?? ''));
+    form.append(UPLOAD.sdkVersion, io.sdkVersion);
+    for (const file of readdirSync(worker)) {
+        if (!file.endsWith('.js') || isPrivatePath(file))
+            continue;
+        form.append(`${UPLOAD.worker}${file}`, fileBlob(join(worker, file)), file);
+    }
+    for (const path of filesUnder(join(dist, 'client'))) {
+        if (basename(path) === '.assetsignore' || isPrivatePath(path))
+            continue;
+        form.append(`${UPLOAD.client}${path}`, fileBlob(join(dist, 'client', path)), basename(path));
+    }
+    const migrations = join(root, 'server', 'migrations');
+    for (const file of existsSync(migrations) ? readdirSync(migrations) : []) {
+        if (!file.endsWith('.sql'))
+            continue;
+        form.append(`${UPLOAD.migrations}${file}`, fileBlob(join(migrations, file)), file);
+    }
+    const sources = sourceFiles(root);
+    for (const path of sources) {
+        const full = join(root, path);
+        const contents = isStarter && path === 'package.json'
+            ? starterPackageJson(full, io.sdkVersion)
+            : undefined;
+        form.append(`${UPLOAD.source}${path}`, fileBlob(full, contents), basename(path));
+    }
+    return { form, sources: sources.length };
+}
+async function followPublish(io, name, started) {
+    let publish = started;
+    let shown;
+    const deadline = Date.now() + PUBLISH_WAIT_MS;
+    while (publish.status === 'running' && Date.now() < deadline) {
+        if (publish.step !== shown) {
+            io.say(`  ${STEP_WORDS[publish.step]}…`);
+            shown = publish.step;
+        }
+        await sleep(POLL_MS);
+        publish = await callJson(`/api/apps/${name}/publishes/${publish.number}`, publishSummary);
+    }
+    const data = { name, version: publish.number, status: publish.status };
+    if (publish.status === 'live') {
+        return {
+            code: 0,
+            data,
+            text: `✓ Version ${publish.number} is live at https://${name}.onpattern.app`
+        };
+    }
+    if (publish.status === 'failed') {
+        return {
+            code: 1,
+            data: { ...data, error: publish.error },
+            text: `✗ Version ${publish.number} didn’t go live: ${publish.error ?? 'no details'}\n  The site still runs the previous version.`
+        };
+    }
+    return {
+        code: 1,
+        data,
+        text: `✗ Version ${publish.number} is still publishing after ${PUBLISH_WAIT_MS / 60_000} minutes\n  next  app versions shows how it ends`
+    };
+}
+export async function publish(io, root, isStarter) {
+    try {
+        const { name } = readProjectFile(root);
+        const built = await io.build();
+        if (built.code !== 0)
+            return built;
+        io.say('✓ Built');
+        const { form, sources } = uploadForm(root, io, isStarter);
+        io.say(`✓ Packed the build and ${sources} source files`);
+        const again = isStarter ? 'app publish --starter' : 'app publish';
+        const result = await signedIn(io, again, async () => {
+            if (isStarter) {
+                await callJson('/api/starters', z.object({ key: z.string() }), {
+                    method: 'POST',
+                    body: form
+                });
+                return undefined;
+            }
+            return callJson(`/api/apps/${name}/publishes`, publishSummary, {
+                method: 'POST',
+                body: form
+            });
+        });
+        if (isOutcome(result))
+            return result;
+        if (result === undefined) {
+            return {
+                code: 0,
+                data: { starter: io.sdkVersion },
+                text: `✓ Published the starter for SDK ${io.sdkVersion}`
+            };
+        }
+        return await followPublish(io, name, result);
+    }
+    catch (error) {
+        return failure(error);
+    }
+}
+export async function versions(io, root) {
+    try {
+        const { name } = readProjectFile(root);
+        const result = await signedIn(io, 'app versions', () => callJson(`/api/apps/${name}/publishes`, z.array(publishSummary)));
+        if (isOutcome(result))
+            return result;
+        const lines = result.map((item) => {
+            const what = item.restoredFrom !== null
+                ? `restored version ${item.restoredFrom}`
+                : item.isStarter
+                    ? 'starter site'
+                    : `published by ${item.byEmail}`;
+            return `  ${String(item.number).padStart(3)}  ${item.status.padEnd(7)}  ${item.startedAt.slice(0, 16).replace('T', ' ')}  ${what}`;
+        });
+        return {
+            code: 0,
+            data: { name, versions: result },
+            text: [`Versions of ${name} (newest first)`, ...lines].join('\n')
+        };
+    }
+    catch (error) {
+        return failure(error);
+    }
+}
+export async function restore(io, root, number) {
+    if (number === undefined || !/^\d+$/.test(number)) {
+        return {
+            code: 2,
+            data: { error: 'missing version' },
+            text: '✗ Which version? app restore 3 (app versions lists them)'
+        };
+    }
+    try {
+        const { name } = readProjectFile(root);
+        const result = await signedIn(io, `app restore ${number}`, () => callJson(`/api/apps/${name}/publishes/${number}/restore`, publishSummary, { method: 'POST' }));
+        if (isOutcome(result))
+            return result;
+        return await followPublish(io, name, result);
+    }
+    catch (error) {
+        return failure(error);
+    }
+}

package/dist/clock.d.ts

@@ -0,0 +1,6 @@
+export type Clock = {
+    every: (ms: number, run: () => void) => () => void;
+    tick: () => void;
+};
+export declare function realClock(): Clock;
+export declare function manualClock(): Clock;

package/dist/clock.js

@@ -0,0 +1,31 @@
+export function realClock() {
+    const repeats = new Set();
+    return {
+        every(ms, run) {
+            const id = setInterval(run, ms);
+            repeats.add(run);
+            return () => {
+                clearInterval(id);
+                repeats.delete(run);
+            };
+        },
+        tick() {
+            for (const run of [...repeats])
+                run();
+        }
+    };
+}
+export function manualClock() {
+    const repeats = new Set();
+    return {
+        every(_ms, run) {
+            const entry = () => run();
+            repeats.add(entry);
+            return () => repeats.delete(entry);
+        },
+        tick() {
+            for (const run of [...repeats])
+                run();
+        }
+    };
+}

package/dist/components/AppFrame.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
 import { breakpoints, colors, radii, shadows, space } from "../theme/tokens.stylex.js";
-import { useApp, useModel } from "../hooks/appContext.js";
+import { useModel } from "../hooks/appContext.js";
 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 }) {
-    const app = useApp();
+    const appSettings = useModel('appSettings');
     const account = useModel('account');
     const menu = account.user === null
         ? workspaceMenu
@@ -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: app.name, 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: appSettings.title, workspaceMenu: menu, links: links, isToggled: isSidebarToggled, isAnimating: isSidebarAnimating, onFollowLink: onCloseSidebar, onSearch: onSearch === undefined
                         ? undefined
                         : () => {
                             onCloseSidebar();

package/dist/components/Button.d.ts

@@ -9,6 +9,7 @@ type ButtonProps = {
     tone?: 'neutral' | 'brand' | 'danger';
     size?: Size;
     to?: AppPath;
+    href?: string;
     icon?: IconName;
     trailingIcon?: IconName;
     shortcut?: readonly string[];
@@ -19,5 +20,5 @@ type ButtonProps = {
     onClick?: () => void;
     style?: Placement;
 };
-export declare function Button({ children, variant, tone, size, to, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ children, variant, tone, size, to, href, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style }: ButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/Button.js

@@ -3,19 +3,22 @@ import { Button as BaseButton } from '@base-ui/react/button';
 import { Link as RouterLink } from 'react-router';
 import * as stylex from '@stylexjs/stylex';
 import { colors, controls, fontWeights, motion, shadows } from "../theme/tokens.stylex.js";
-import { controlSizes } from "./controlLook.js";
+import { controlSizes, focusRing } from "./controlLook.js";
 import { Icon } from "./Icon.js";
 import { interact, textOf } from "./interaction.js";
 import { Kbd } from "./Kbd.js";
 import { Spinner } from "./Spinner.js";
-export function Button({ children, variant = 'primary', tone = 'neutral', size = 'md', to, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, onClick, style }) {
+export function Button({ children, variant = 'primary', tone = 'neutral', size = 'md', to, href, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, onClick, style }) {
     const isDisabled = disabled || isPending;
     const report = () => {
         interact({ primitive: 'Button', event: 'click', label: textOf(children) });
         onClick?.();
     };
-    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, style).className;
+    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
     const content = (_jsxs("span", { ...stylex.props(styles.stack), children: [_jsxs("span", { ...stylex.props(styles.content, isPending && styles.hidden), children: [icon === undefined ? null : _jsx(Icon, { name: icon, size: size }), _jsx("span", { ...stylex.props(styles.label, shortcut !== undefined && styles.labelBeforeShortcut), children: children }), trailingIcon === undefined ? null : (_jsx(Icon, { name: trailingIcon, size: size })), shortcut === undefined ? null : _jsx(Kbd, { keys: shortcut })] }), isPending ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending), children: _jsx(Spinner, { size: size }) })) : null] }));
+    if (href !== undefined) {
+        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: report, className: className, children: content }));
+    }
     if (to !== undefined) {
         return (_jsx(RouterLink, { to: to, onClick: report, className: className, children: content }));
     }

package/dist/components/CopyButton.d.ts

@@ -0,0 +1,11 @@
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+type CopyButtonProps = {
+    text: string;
+    label?: string;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent';
+    size?: Size;
+    style?: Placement;
+};
+export declare function CopyButton({ text, label, variant, size, style }: CopyButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/CopyButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button } from "./Button.js";
+export function CopyButton({ text, label = 'Copy', variant = 'primary', size = 'sm', style }) {
+    const [isCopied, setIsCopied] = useState(false);
+    useEffect(() => {
+        if (!isCopied)
+            return undefined;
+        const timer = setTimeout(() => setIsCopied(false), COPIED_MS);
+        return () => clearTimeout(timer);
+    }, [isCopied]);
+    return (_jsx(Button, { variant: variant, size: size, icon: isCopied ? 'check' : 'copy', onClick: () => {
+            void navigator.clipboard.writeText(text).then(() => setIsCopied(true));
+        }, ...(style === undefined ? {} : { style }), children: isCopied ? 'Copied' : label }));
+}
+const COPIED_MS = 1500;

package/dist/components/Divider.d.ts

@@ -1,6 +1,7 @@
 import type { Placement } from './Placement.ts';
 type DividerProps = {
+    label?: string;
     style?: Placement;
 };
-export declare function Divider({ style }: DividerProps): import("react").JSX.Element;
+export declare function Divider({ label, style }: DividerProps): import("react").JSX.Element;
 export {};

package/dist/components/Divider.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Separator } from '@base-ui/react/separator';
 import * as stylex from '@stylexjs/stylex';
-import { borders, colors } from "../theme/tokens.stylex.js";
-export function Divider({ style }) {
-    return _jsx(Separator, { className: stylex.props(styles.divider, style).className });
+import { borders, colors, space } from "../theme/tokens.stylex.js";
+import { Text } from "./Text.js";
+export function Divider({ label, style }) {
+    if (label === undefined) {
+        return (_jsx(Separator, { className: stylex.props(styles.divider, style).className }));
+    }
+    return (_jsxs("div", { ...stylex.props(styles.labelled, style), children: [_jsx(Separator, { className: stylex.props(styles.divider, styles.grow).className }), _jsx(Text, { variant: "caption", tone: "tertiary", children: label }), _jsx(Separator, { className: stylex.props(styles.divider, styles.grow).className })] }));
 }
 const styles = stylex.create({
     divider: {
@@ -11,5 +15,16 @@ const styles = stylex.create({
         width: '100%',
         height: borders.hairline,
         backgroundColor: colors.divider
+    },
+    labelled: {
+        display: 'flex',
+        gap: space.md,
+        alignItems: 'center',
+        width: '100%'
+    },
+    grow: {
+        flexGrow: 1,
+        flexShrink: 1,
+        width: 'auto'
     }
 });