@trypattern/sdk 0.1.21 → 0.1.23

package/dist/cli/app.js

@@ -20,7 +20,10 @@ import { putLocalPhotos, resetLocalDatabase } from "../vite/localWorker.js";
 import { readProjectFile } from "../vite/projectFile.js";
 import { readStarter, starterContentOf, withStarter } from "./starter.js";
 import { addLiveMedia, login, publish, pull, restore, versions as listVersions } from "./publishing.js";
+import { CHANGE_SET_ROWS } from "../publishWire.js";
+import { DATA_USAGE, data } from "./data.js";
 import { toolBin } from "./tools.js";
+import { isNewer, latestPattern, newerPattern, updateNote } from "./updates.js";
 function dependsOnPattern(directory) {
     try {
         const manifest = JSON.parse(readFileSync(join(directory, 'package.json'), 'utf8'));
@@ -78,13 +81,18 @@ const CONTACT_SHEET = join(SCREENSHOTS_DIR, 'contact-sheet.png');
 const SCREENSHOT_WORKER = join(SDK_SOURCE, 'cli', `screenshot${SDK_EXTENSION}`);
 const VISUAL_URL_ENV = 'PATTERN_VISUAL_URL';
 const GLOBAL_FLAGS = ['--json', '--help', '-h'];
+const NUDGED_COMMANDS = new Set(['start', 'check', 'publish', 'data']);
 const VALUE_FLAGS = new Set([
     '--commands',
     '--name',
     '--as',
     '--code',
     '--message',
-    '--alt'
+    '--alt',
+    '--row',
+    '--set',
+    '--file',
+    '--asked'
 ]);
 const PHOTO_TYPES = {
     '.jpg': 'image/jpeg',
@@ -349,6 +357,33 @@ own POST /api/media, then the rows. Later publishes never touch them; they are t
         },
         flags: ['--starter', '--message']
     },
+    data: {
+        summary: 'Change the live site’s data, with the owner’s approval (app data --help)',
+        details: `${DATA_USAGE}
+The live database belongs to the owner: changes to it go to them for approval, never straight in.
+tables and list read the live data (columns, ids and values) through onpattern.app. add, update
+and remove only collect changes on this computer (.dev/data-changes.json); nothing live changes.
+Values use the table's own columns and types, as tables shows them: a price stored in cents is 1400.
+send puts every collected change in front of the owner as one request on onpattern.app (Database)
+and emails them. --asked is required: their request in their own words, quoted, which they see
+beside Approve. Only the owner can approve, in their browser; send then waits for their decision
+and prints what went live. A row the owner changed after you read it is skipped, never
+overwritten: list it again and send a new change. The live site must run a Pattern with app data:
+after updating @trypattern/sdk, app publish once first. status waits on the latest request; clear drops
+collected changes. Up to ${CHANGE_SET_ROWS} changes per request. For this computer's data, edit seed.ts and run app reset.`,
+        run: (_argument, options, rest) => data(publishingIo(), ROOT, rest, options),
+        argumentCount: 3,
+        flags: ['--row', '--set', '--file', '--asked']
+    },
+    update: {
+        summary: 'Bring this project to the newest Pattern',
+        details: `Installs the newest @trypattern/sdk from npm into this project (pnpm add, exact version).
+start, check, publish and data say when a newer Pattern is out. The live site keeps the old one until
+the next app publish, so run app check, then publish it (straight away when nothing else is in
+progress). New Pattern features on the live site, such as the owner approving app data changes,
+need that publish.`,
+        run: update
+    },
     versions: {
         summary: 'List the versions that went live, newest first',
         details: 'Each version with its number, whether it went live, when, and who published it. app restore <number> puts one back.',
@@ -1468,6 +1503,43 @@ function installShim() {
         path: SHIM_PATH
     };
 }
+async function update() {
+    const current = sdkVersion();
+    const latest = await latestPattern(true);
+    if (latest === undefined) {
+        return {
+            code: 1,
+            data: { current, error: 'npm did not answer' },
+            text: '✗ Couldn’t reach npm to find the newest Pattern. Check the internet connection and try again.'
+        };
+    }
+    if (!isNewer(latest, current)) {
+        return {
+            code: 0,
+            data: { current, latest, updated: false },
+            text: `✓ Pattern is up to date (${current})`
+        };
+    }
+    say(`Updating Pattern ${current} → ${latest}`);
+    const installed = await capture('pnpm', ['add', `@trypattern/sdk@${latest}`]);
+    if (installed.code !== 0) {
+        return {
+            code: 1,
+            data: {
+                current,
+                latest,
+                error: 'pnpm add failed',
+                output: installed.output
+            },
+            text: `✗ pnpm couldn’t install Pattern ${latest}:\n${installed.output.trim().split('\n').slice(-LOG_TAIL_LINES).join('\n')}`
+        };
+    }
+    return {
+        code: 0,
+        data: { current, latest, updated: true },
+        text: `✓ Updated Pattern ${current} → ${latest}\n  next  run app check, then app publish --message 'Updated Pattern' (straight away if nothing else is in progress) so the live site gets it`
+    };
+}
 async function setup() {
     const pins = readPins();
     const haveNode = process.versions.node;
@@ -1611,6 +1683,16 @@ async function main(argv) {
     }
     else {
         outcome = await command.run(positional[1], options, positional.slice(1));
+        if (NUDGED_COMMANDS.has(name)) {
+            const latest = await newerPattern(sdkVersion());
+            if (latest !== undefined) {
+                outcome = {
+                    ...outcome,
+                    data: { ...outcome.data, newerPattern: latest },
+                    text: `${outcome.text}\n${updateNote(latest, sdkVersion())}`
+                };
+            }
+        }
     }
     if (jsonMode) {
         const payload = {

package/dist/cli/data.d.ts

@@ -0,0 +1,5 @@
+import type { Outcome, PublishingIo } from './publishing.ts';
+export declare const DATA_USAGE = "app data tables\napp data list <table>\napp data add <table> --row '{\"name\":\"Gold chair\",\"price\":8}'   (or --file rows.json, a JSON array)\napp data update <table> <id> --set '{\"price\":14}'\napp data remove <table> <id>\napp data send --asked \"<the owner's request, in their words>\"\napp data status\napp data clear";
+type DataOptions = ReadonlyMap<string, string | true>;
+export declare function data(io: PublishingIo, root: string, [action, table, id]: readonly (string | undefined)[], options: DataOptions): Promise<Outcome>;
+export {};

package/dist/cli/data.js

@@ -0,0 +1,273 @@
+import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { z } from 'zod';
+import { CHANGE_SET_ROWS, DASHBOARD_URL, changeSet, dataChange, databaseRow, databaseRows, databaseSchema } from "../publishWire.js";
+import { readProjectFile } from "../vite/projectFile.js";
+import { callJson, failure, isOutcome, sayHost, signedIn, sleep } from "./publishing.js";
+const STAGED = join('.dev', 'data-changes.json');
+const WAIT_MS = 90_000;
+const POLL_MS = 3000;
+const MAX_PAGES = 50;
+const staged = z.array(dataChange);
+export const DATA_USAGE = `app data tables
+app data list <table>
+app data add <table> --row '{"name":"Gold chair","price":8}'   (or --file rows.json, a JSON array)
+app data update <table> <id> --set '{"price":14}'
+app data remove <table> <id>
+app data send --asked "<the owner's request, in their words>"
+app data status
+app data clear`;
+function stagedPath(root) {
+    return join(root, STAGED);
+}
+function readStaged(root) {
+    const path = stagedPath(root);
+    if (!existsSync(path))
+        return [];
+    const parsed = staged.safeParse(JSON.parse(readFileSync(path, 'utf8')));
+    return parsed.success ? parsed.data : [];
+}
+function writeStaged(root, changes) {
+    const path = stagedPath(root);
+    mkdirSync(dirname(path), { recursive: true });
+    writeFileSync(path, `${JSON.stringify(changes, null, 2)}\n`);
+}
+function refusal(text, code = 1) {
+    return { code, data: { error: text }, text: `✗ ${text}` };
+}
+function valueOf(options, flag) {
+    const value = options.get(flag);
+    return typeof value === 'string' ? value : undefined;
+}
+function jsonOf(text, what) {
+    try {
+        return JSON.parse(text);
+    }
+    catch {
+        throw new Error(`${what} is not JSON: ${text.slice(0, 80)}`);
+    }
+}
+function rowsGiven(root, options) {
+    const row = valueOf(options, '--row');
+    const file = valueOf(options, '--file');
+    if (row !== undefined)
+        return [databaseRow.parse(jsonOf(row, '--row'))];
+    if (file === undefined)
+        throw new Error('Give the row with --row or --file');
+    const path = resolve(root, file);
+    if (!existsSync(path))
+        throw new Error(`There is no file at ${file}`);
+    return z.array(databaseRow).parse(jsonOf(readFileSync(path, 'utf8'), file));
+}
+function pendingLines(changes) {
+    return changes.map((change) => {
+        if (change.op === 'add')
+            return `  + ${change.table}  ${JSON.stringify(change.row)}`;
+        if (change.op === 'remove')
+            return `  − ${change.table}  ${change.id}`;
+        return `  ~ ${change.table}  ${change.id}  ${JSON.stringify(change.after)}`;
+    });
+}
+async function liveRows(io, name, table) {
+    const rows = [];
+    let after = null;
+    for (let page = 0; page < MAX_PAGES; page += 1) {
+        const query = after === null ? '' : `?after=${encodeURIComponent(after)}`;
+        const result = await signedIn(io, `app data list ${table}`, () => callJson(`/api/apps/${name}/database/${table}${query}`, databaseRows));
+        if (isOutcome(result))
+            return result;
+        rows.push(...result.rows);
+        after = result.next;
+        if (after === null)
+            break;
+    }
+    return rows;
+}
+async function tables(io, name) {
+    const result = await signedIn(io, 'app data tables', () => callJson(`/api/apps/${name}/database`, databaseSchema));
+    if (isOutcome(result))
+        return result;
+    if (result.status === 'outdated') {
+        return refusal('Publish once with the latest Pattern to see the live data');
+    }
+    const lines = result.tables
+        .filter((table) => !table.isBuiltIn)
+        .map((table) => {
+        const properties = Object.keys(Object(Reflect.get(table.schema, 'properties')));
+        return `  ${table.name}  ${table.rowCount} rows  columns: ${properties.join(', ')}`;
+    });
+    return {
+        code: 0,
+        data: { name, tables: result.tables },
+        text: [`Live tables of ${name}`, ...lines].join('\n')
+    };
+}
+async function list(io, name, table) {
+    const rows = await liveRows(io, name, table);
+    if (isOutcome(rows))
+        return rows;
+    return {
+        code: 0,
+        data: { name, table, rows },
+        text: [
+            `${rows.length} live ${table} rows on ${name}`,
+            ...rows.map((row) => `  ${JSON.stringify(row)}`)
+        ].join('\n')
+    };
+}
+function stage(root, added) {
+    const changes = [...readStaged(root), ...added];
+    if (changes.length > CHANGE_SET_ROWS) {
+        return refusal(`That's more than ${CHANGE_SET_ROWS} changes. Send these first with app data send, then add the rest.`);
+    }
+    writeStaged(root, changes);
+    return {
+        code: 0,
+        data: { staged: changes },
+        text: [
+            `✓ ${changes.length} change${changes.length === 1 ? '' : 's'} ready to send. Nothing on the live site has changed.`,
+            ...pendingLines(changes),
+            '  next  add any other changes, then app data send --asked "<their request, in their words>"'
+        ].join('\n')
+    };
+}
+async function before(io, name, table, id) {
+    const rows = await liveRows(io, name, table);
+    if (isOutcome(rows))
+        return rows;
+    const row = rows.find((candidate) => candidate['id'] === id);
+    if (row === undefined)
+        throw new Error(`There is no ${table} row with id ${id}`);
+    return row;
+}
+function decisionText(set, link) {
+    if (set.status === 'waiting') {
+        return {
+            code: 3,
+            data: { changeSet: set },
+            text: `… Still waiting for the owner to approve "${set.title}" at ${link}.\n  next  run app data status again: it waits for the decision`
+        };
+    }
+    if (set.status === 'applied') {
+        const outcomes = set.outcomes ?? [];
+        const missed = outcomes
+            .map((outcome, index) => ({ outcome, change: set.changes[index] }))
+            .filter(({ outcome }) => outcome.status !== 'applied');
+        return {
+            code: missed.length === 0 ? 0 : 1,
+            data: { changeSet: set },
+            text: [
+                `✓ Approved: ${set.title}. ${outcomes.length - missed.length} of ${outcomes.length} changes are live.`,
+                ...missed.map(({ outcome, change }) => `  ${outcome.status}  ${change?.table ?? ''} ${change?.op ?? ''}: ${outcome.reason ?? ''}`)
+            ].join('\n')
+        };
+    }
+    const words = {
+        declined: 'The owner chose Not yet. Nothing changed on the live site.',
+        expired: 'This request expired or a newer one replaced it. Nothing changed.',
+        undone: 'The owner approved this, then undid it.'
+    }[set.status];
+    return { code: 1, data: { changeSet: set }, text: `✗ ${words}` };
+}
+async function waitForDecision(io, name, id) {
+    const link = `${DASHBOARD_URL}/sites/${name}/database`;
+    const deadline = Date.now() + WAIT_MS;
+    for (;;) {
+        const set = await signedIn(io, 'app data status', () => callJson(`/api/apps/${name}/changes/${id}`, changeSet));
+        if (isOutcome(set))
+            return set;
+        if (set.status !== 'waiting' || Date.now() > deadline) {
+            return decisionText(set, link);
+        }
+        await sleep(POLL_MS);
+    }
+}
+async function send(io, root, name, asked) {
+    const changes = readStaged(root);
+    if (changes.length === 0) {
+        return refusal('There are no changes to send. Use app data add, update or remove first.');
+    }
+    if (asked === undefined || asked.trim() === '') {
+        return refusal('Say what the owner asked for with --asked "<their words>". They see it beside Approve.', 2);
+    }
+    const set = await signedIn(io, 'app data send', () => callJson(`/api/apps/${name}/changes`, changeSet, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ asked: asked.trim(), changes })
+    }));
+    if (isOutcome(set))
+        return set;
+    rmSync(stagedPath(root), { force: true });
+    const link = `${DASHBOARD_URL}/sites/${name}/database`;
+    io.say(`✓ Sent "${set.title}" to the owner. They also got an email.`);
+    io.say(`  next  tell them: "I've sent the changes to your Pattern dashboard. Open ${link} and press Approve." This waits for their decision.`);
+    return waitForDecision(io, name, set.id);
+}
+async function status(io, root, name) {
+    const sets = await signedIn(io, 'app data status', () => callJson(`/api/apps/${name}/changes`, z.array(changeSet)));
+    if (isOutcome(sets))
+        return sets;
+    const latest = sets[0];
+    const pending = readStaged(root);
+    if (latest === undefined) {
+        return {
+            code: 0,
+            data: { staged: pending },
+            text: pending.length === 0
+                ? 'Nothing has been sent for approval yet.'
+                : [
+                    `${pending.length} changes ready to send:`,
+                    ...pendingLines(pending)
+                ].join('\n')
+        };
+    }
+    return latest.status === 'waiting'
+        ? waitForDecision(io, name, latest.id)
+        : decisionText(latest, `${DASHBOARD_URL}/sites/${name}/database`);
+}
+export async function data(io, root, [action, table, id], options) {
+    try {
+        const { name } = readProjectFile(root);
+        if (action === 'clear') {
+            rmSync(stagedPath(root), { force: true });
+            return {
+                code: 0,
+                data: { staged: [] },
+                text: '✓ Cleared the changes that were ready to send'
+            };
+        }
+        sayHost(io);
+        if (action === 'tables')
+            return await tables(io, name);
+        if (action === 'send')
+            return await send(io, root, name, valueOf(options, '--asked'));
+        if (action === 'status')
+            return await status(io, root, name);
+        if (table === undefined)
+            return refusal(`Say which table\n${DATA_USAGE}`, 2);
+        if (action === 'list')
+            return await list(io, name, table);
+        if (action === 'add') {
+            return stage(root, rowsGiven(root, options).map((row) => ({ op: 'add', table, row })));
+        }
+        if (id === undefined)
+            return refusal(`Say which row, by its id\n${DATA_USAGE}`, 2);
+        const current = await before(io, name, table, id);
+        if (isOutcome(current))
+            return current;
+        if (action === 'remove') {
+            return stage(root, [{ op: 'remove', table, id, before: current }]);
+        }
+        if (action === 'update') {
+            const set = valueOf(options, '--set');
+            if (set === undefined)
+                return refusal(`Give the new values with --set '{...}'`, 2);
+            const after = databaseRow.parse(jsonOf(set, '--set'));
+            return stage(root, [{ op: 'update', table, id, before: current, after }]);
+        }
+        return refusal(`Unknown data command: ${action ?? ''}\n${DATA_USAGE}`, 2);
+    }
+    catch (error) {
+        return failure(error);
+    }
+}

package/dist/cli/publishing.d.ts

@@ -1,5 +1,6 @@
+import { z } from 'zod';
 import type { StarterContent } from '../publishWire.ts';
-type Outcome = {
+export type Outcome = {
     code: number;
     data: Record<string, unknown>;
     text: string;
@@ -14,10 +15,16 @@ export type PublishingIo = {
     build: () => Promise<Outcome>;
     sdkVersion: string;
 };
+export declare function dashboard(): string;
+export declare function sayHost(io: PublishingIo): void;
+export declare function callJson<Value>(path: string, schema: z.ZodType<Value>, init?: RequestInit): Promise<Value>;
+export declare function sleep(ms: number): Promise<unknown>;
+export declare function signedIn<Result>(io: PublishingIo, again: string, work: () => Promise<Result>): Promise<Result | Outcome>;
+export declare function isOutcome(value: unknown): value is Outcome;
+export declare function failure(error: unknown, data?: Record<string, unknown>): Outcome;
 export declare function login(io: PublishingIo): Promise<Outcome>;
 export declare function pull(io: PublishingIo, name: string | undefined, cwd: string, setupCode: string | undefined): Promise<Outcome>;
 export declare function publish(io: PublishingIo, root: string, isStarter: boolean, message: string | undefined, starter: StarterContent | undefined): Promise<Outcome>;
 export declare function addLiveMedia(io: PublishingIo, root: string, form: FormData, again: string): Promise<Outcome>;
 export declare function versions(io: PublishingIo, root: string): Promise<Outcome>;
 export declare function restore(io: PublishingIo, root: string, number: string | undefined): Promise<Outcome>;
-export {};

package/dist/cli/publishing.js

@@ -48,10 +48,10 @@ const STEP_WORDS = {
     'sign-in': 'Turning on sign-in',
     publish: 'Publishing the site'
 };
-function dashboard() {
+export function dashboard() {
     return (process.env['PATTERN_DASHBOARD_URL'] ?? DASHBOARD_URL).replace(/\/$/, '');
 }
-function sayHost(io) {
+export function sayHost(io) {
     io.say(`  via ${new URL(dashboard()).host}`);
 }
 const credentials = z.record(z.string(), z.object({ cookie: z.string() }));
@@ -114,7 +114,7 @@ async function call(path, init = {}) {
     }
     return response;
 }
-async function callJson(path, schema, init = {}) {
+export async function callJson(path, schema, init = {}) {
     const response = await call(path, init);
     const body = await response.json().catch(() => null);
     if (!response.ok) {
@@ -130,7 +130,7 @@ function labelOfThisMachine() {
     const name = named.status === 0 ? named.stdout.trim() : '';
     return (name === '' ? 'this computer' : name).slice(0, 80);
 }
-function sleep(ms) {
+export function sleep(ms) {
     return new Promise((done) => setTimeout(done, ms));
 }
 async function waitForApproval(secret) {
@@ -195,7 +195,7 @@ async function useSetupCode(io, code) {
     }
     io.say('✗ That setup code has expired or was already used');
 }
-async function signedIn(io, again, work) {
+export async function signedIn(io, again, work) {
     if (savedCookie() === undefined) {
         const outcome = await signIn(io, again);
         if (outcome.code !== 0)
@@ -213,10 +213,10 @@ async function signedIn(io, again, work) {
         return work();
     }
 }
-function isOutcome(value) {
+export function isOutcome(value) {
     return typeof value === 'object' && value !== null && 'text' in value;
 }
-function failure(error, data = {}) {
+export 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

package/dist/cli/updates.d.ts

@@ -0,0 +1,4 @@
+export declare function isNewer(candidate: string, current: string): boolean;
+export declare function latestPattern(fresh?: boolean): Promise<string | undefined>;
+export declare function newerPattern(current: string): Promise<string | undefined>;
+export declare function updateNote(latest: string, current: string): string;

package/dist/cli/updates.js

@@ -0,0 +1,68 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { dirname, join } from 'node:path';
+import { z } from 'zod';
+const LATEST_URL = 'https://registry.npmjs.org/@trypattern/sdk/latest';
+const CACHE_FILE = join(homedir(), '.config', 'pattern', 'latest-sdk.json');
+const CHECK_MS = 6 * 3_600_000;
+const TIMEOUT_MS = 1500;
+const cached = z.object({ version: z.string(), checkedAt: z.number() });
+const published = z.object({ version: z.string() });
+function partsOf(version) {
+    return (version
+        .split('-')[0]
+        ?.split('.')
+        .map((part) => Number.parseInt(part, 10) || 0) ?? [0]);
+}
+export function isNewer(candidate, current) {
+    const next = partsOf(candidate);
+    const now = partsOf(current);
+    for (let index = 0; index < Math.max(next.length, now.length); index += 1) {
+        const difference = (next[index] ?? 0) - (now[index] ?? 0);
+        if (difference !== 0)
+            return difference > 0;
+    }
+    return false;
+}
+function readCache() {
+    if (!existsSync(CACHE_FILE))
+        return undefined;
+    try {
+        const parsed = cached.safeParse(JSON.parse(readFileSync(CACHE_FILE, 'utf8')));
+        return parsed.success ? parsed.data : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+export async function latestPattern(fresh = false) {
+    const remembered = readCache();
+    if (!fresh &&
+        remembered !== undefined &&
+        Date.now() - remembered.checkedAt < CHECK_MS) {
+        return remembered.version;
+    }
+    try {
+        const response = await fetch(LATEST_URL, {
+            signal: AbortSignal.timeout(TIMEOUT_MS)
+        });
+        const body = published.safeParse(await response.json());
+        if (!response.ok || !body.success)
+            return remembered?.version;
+        mkdirSync(dirname(CACHE_FILE), { recursive: true });
+        writeFileSync(CACHE_FILE, JSON.stringify({ version: body.data.version, checkedAt: Date.now() }));
+        return body.data.version;
+    }
+    catch {
+        return remembered?.version;
+    }
+}
+export async function newerPattern(current) {
+    if (process.env['PATTERN_NO_UPDATE_CHECK'] !== undefined)
+        return undefined;
+    const latest = await latestPattern();
+    return latest !== undefined && isNewer(latest, current) ? latest : undefined;
+}
+export function updateNote(latest, current) {
+    return `  update  Pattern ${latest} is out (this project has ${current}). Run app update now, then app check. Publish it straight away if nothing else is in progress, otherwise with the next publish, so the live site gets it too. Tell the owner in a few words.`;
+}

package/dist/components/Badge.d.ts

@@ -3,7 +3,7 @@ import type { Placement } from './Placement.ts';
 type BadgeProps = {
     children: ReactNode;
     variant?: 'primary' | 'tertiary' | 'outline' | 'transparent';
-    tone?: 'neutral' | 'brand' | 'positive' | 'danger';
+    tone?: 'neutral' | 'brand' | 'positive' | 'warning' | 'danger';
     size?: 'sm' | 'md';
     style?: Placement;
 };

package/dist/components/Badge.js

@@ -8,6 +8,7 @@ const toneKeys = {
     neutral: 'Neutral',
     brand: 'Brand',
     positive: 'Positive',
+    warning: 'Warning',
     danger: 'Danger'
 };
 const styles = stylex.create({
@@ -46,6 +47,10 @@ const looks = stylex.create({
         color: colors.onPositiveSolidForeground,
         backgroundColor: colors.positiveSolid
     },
+    primaryWarning: {
+        color: colors.onWarningSolidForeground,
+        backgroundColor: colors.warningSolid
+    },
     primaryDanger: {
         color: colors.onDangerSolidForeground,
         backgroundColor: colors.dangerSolid
@@ -62,6 +67,10 @@ const looks = stylex.create({
         color: colors.onPositiveSubtleForeground,
         backgroundColor: colors.positiveSubtle
     },
+    tertiaryWarning: {
+        color: colors.onWarningSubtleForeground,
+        backgroundColor: colors.warningSubtle
+    },
     tertiaryDanger: {
         color: colors.dangerText,
         backgroundColor: colors.dangerSubtleHover
@@ -81,6 +90,11 @@ const looks = stylex.create({
         backgroundColor: 'transparent',
         boxShadow: `inset 0 0 0 ${borders.thin} ${colors.positiveBorderDefault}`
     },
+    outlineWarning: {
+        color: colors.warningForeground,
+        backgroundColor: 'transparent',
+        boxShadow: `inset 0 0 0 ${borders.thin} ${colors.warningBorderDefault}`
+    },
     outlineDanger: {
         color: colors.dangerForeground,
         backgroundColor: 'transparent',
@@ -98,6 +112,10 @@ const looks = stylex.create({
         color: colors.positiveForeground,
         backgroundColor: 'transparent'
     },
+    transparentWarning: {
+        color: colors.warningForeground,
+        backgroundColor: 'transparent'
+    },
     transparentDanger: {
         color: colors.dangerForeground,
         backgroundColor: 'transparent'

package/dist/components/ButtonBody.d.ts

@@ -6,7 +6,7 @@ import type { Size } from './Size.ts';
 export type ButtonProps = {
     children: ReactNode;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent';
-    tone?: 'neutral' | 'brand' | 'danger';
+    tone?: 'neutral' | 'brand' | 'positive' | 'danger';
     size?: Size;
     to?: AppPath;
     href?: string;