@trypattern/sdk 0.1.33 → 0.1.35

package/dist/app.d.ts

@@ -4,6 +4,8 @@ import { AppStore } from './appInfo.ts';
 import type { AppBlock } from './blocks.ts';
 import type { bookingRequests } from './bookings.ts';
 import type { Bookings } from './bookingsStore.ts';
+import type { Inquiries } from './inquiriesStore.ts';
+import { requestOperations } from './requests.ts';
 import { SessionStore } from './auth/sessionStore.ts';
 import type { Cache } from './cache.ts';
 import type { Clock } from './clock.ts';
@@ -74,11 +76,13 @@ export type PublicStores<Group extends Tables> = {
         never
     ] ? never : `public${Capitalize<Key>}`]: PublicTableStore<Group[Key]>;
 };
-export type BlockStores<Group extends Tables> = [
+export type BlockStores<Group extends Tables> = ([
     typeof bookingRequests
 ] extends [Group[keyof Group]] ? {
     bookings: Bookings;
-} : Record<never, never>;
+} : Record<never, never>) & ([typeof requestOperations] extends [Group[keyof Group]] ? {
+    inquiries: Inquiries;
+} : Record<never, never>);
 export type StoresOf<Group extends Tables, Custom, Item extends Action = Action> = {
     session: SessionStore;
     app: AppStore;

package/dist/app.js

@@ -2,6 +2,8 @@ import { z } from 'zod';
 import { viewerOf } from "./access.js";
 import { AppStore } from "./appInfo.js";
 import { blockWiringProblem } from "./blocks.js";
+import { inquiries } from "./inquiriesStore.js";
+import { requestOperations } from "./requests.js";
 import { SessionStore } from "./auth/sessionStore.js";
 import { realClock } from "./clock.js";
 import { ActionsStore } from "./actions.js";
@@ -75,7 +77,10 @@ function withBlocks(definition, blocks) {
     return { ...definition, services, memory };
 }
 export function defineApp(definition) {
-    const blocks = definition.blocks ?? [];
+    const listed = definition.blocks ?? [];
+    const takesRequests = Object.values(definition.tables).includes(requestOperations) &&
+        !listed.some((block) => block.name === inquiries.name);
+    const blocks = takesRequests ? [...listed, inquiries] : listed;
     const wiring = blockWiringProblem(definition.tables, blocks, 'app');
     if (wiring !== undefined)
         throw new Error(wiring);

package/dist/blocks.js

@@ -1,10 +1,17 @@
-import { bookingTables } from "./bookings.js";
+import { bookingBlackouts, bookingRequests, bookingRules } from "./bookings.js";
+import { requestTables } from "./requests.js";
 const KNOWN_BLOCKS = [
     {
         name: 'bookings',
-        tables: bookingTables,
+        tables: { bookingRules, bookingBlackouts, bookingRequests },
         tablesExport: 'bookingTables',
         server: "bookings({ timezone: 'America/Toronto' })"
+    },
+    {
+        name: 'inquiries',
+        tables: requestTables,
+        tablesExport: 'requestTables',
+        server: 'inquiries([orders])'
     }
 ];
 function includesAll(tables, wanted) {
@@ -26,8 +33,9 @@ export function blockWiringProblem(tables, blocks, side) {
     for (const known of KNOWN_BLOCKS) {
         if (!includesAny(tables, known.tables))
             continue;
-        if (blocks.some((block) => block.name === known.name))
+        if (blocks.some((block) => includesAll(block.tables, known.tables))) {
             continue;
+        }
         return side === 'server'
             ? `tables has the ${known.name} block's tables, so the server needs the block: add blocks: [${known.server}] from '@trypattern/sdk/server' to createServer in server/worker.ts`
             : `tables has the ${known.name} block's tables, so the app needs the block: add blocks: [${known.name}] from '@trypattern/sdk' to defineApp in src/App.ts`;

package/dist/bookings.d.ts

@@ -64,6 +64,84 @@ export declare const bookingRequests: import("./table.ts").TableOf<"bookingReque
     readonly writes: "confirmed";
 }>;
 export declare const bookingTables: {
+    requestStates: import("./table.ts").TableOf<"requestStates", {
+        readonly columns: {
+            readonly source: z.ZodString;
+            readonly requestId: z.ZodString;
+            readonly state: z.ZodEnum<{
+                done: "done";
+                open: "open";
+            }>;
+            readonly revision: z.ZodNumber;
+            readonly sequence: z.ZodNumber;
+            readonly updatedAt: z.ZodString;
+        };
+        readonly access: {
+            readonly read: "server";
+            readonly create: "server";
+            readonly update: "server";
+            readonly delete: "server";
+        };
+        readonly writes: "confirmed";
+    }>;
+    requestEvents: import("./table.ts").TableOf<"requestEvents", {
+        readonly columns: {
+            readonly source: z.ZodString;
+            readonly requestId: z.ZodString;
+            readonly kind: z.ZodEnum<{
+                done: "done";
+                accepted: "accepted";
+                declined: "declined";
+                replied: "replied";
+                received: "received";
+            }>;
+        };
+        readonly access: {
+            readonly read: "server";
+            readonly create: "server";
+            readonly update: "server";
+            readonly delete: "server";
+        };
+        readonly writes: "confirmed";
+    }>;
+    requestOutbox: import("./table.ts").TableOf<"requestOutbox", {
+        readonly columns: {
+            readonly source: z.ZodString;
+            readonly requestId: z.ZodString;
+            readonly subject: z.ZodString;
+            readonly text: z.ZodString;
+            readonly replyTo: z.ZodString;
+            readonly status: z.ZodEnum<{
+                failed: "failed";
+                pending: "pending";
+                sent: "sent";
+                sending: "sending";
+            }>;
+            readonly attempts: z.ZodNumber;
+            readonly nextAt: z.ZodNullable<z.ZodString>;
+            readonly sentAt: z.ZodNullable<z.ZodString>;
+            readonly claimedAt: z.ZodNullable<z.ZodString>;
+        };
+        readonly access: {
+            readonly read: "server";
+            readonly create: "server";
+            readonly update: "server";
+            readonly delete: "server";
+        };
+        readonly writes: "confirmed";
+    }>;
+    requestOperations: import("./table.ts").TableOf<"requestOperations", {
+        readonly columns: {
+            readonly result: z.ZodString;
+        };
+        readonly access: {
+            readonly read: "server";
+            readonly create: "server";
+            readonly update: "server";
+            readonly delete: "server";
+        };
+        readonly writes: "confirmed";
+    }>;
     bookingRules: import("./table.ts").TableOf<"bookingRules", {
         readonly columns: {
             readonly windows: z.ZodString;

package/dist/bookings.js

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { requestTables } from "./requests.js";
 import { call, defineServices } from "./services.js";
 import { patternTable } from "./table.js";
 const DATE = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
@@ -78,7 +79,12 @@ export const bookingRequests = patternTable('bookingRequests', {
     },
     writes: 'confirmed'
 });
-export const bookingTables = { bookingRules, bookingBlackouts, bookingRequests };
+export const bookingTables = {
+    bookingRules,
+    bookingBlackouts,
+    bookingRequests,
+    ...requestTables
+};
 export const bookingWindow = z.object({
     weekday: z.enum(WEEKDAYS),
     label: z.string().min(1).max(60),

package/dist/bookingsStore.d.ts

@@ -281,6 +281,84 @@ export declare class Bookings extends Bookings_base {
 export declare const bookings: {
     readonly name: "bookings";
     readonly tables: {
+        requestStates: import("./table.ts").TableOf<"requestStates", {
+            readonly columns: {
+                readonly source: z.ZodString;
+                readonly requestId: z.ZodString;
+                readonly state: z.ZodEnum<{
+                    done: "done";
+                    open: "open";
+                }>;
+                readonly revision: z.ZodNumber;
+                readonly sequence: z.ZodNumber;
+                readonly updatedAt: z.ZodString;
+            };
+            readonly access: {
+                readonly read: "server";
+                readonly create: "server";
+                readonly update: "server";
+                readonly delete: "server";
+            };
+            readonly writes: "confirmed";
+        }>;
+        requestEvents: import("./table.ts").TableOf<"requestEvents", {
+            readonly columns: {
+                readonly source: z.ZodString;
+                readonly requestId: z.ZodString;
+                readonly kind: z.ZodEnum<{
+                    done: "done";
+                    accepted: "accepted";
+                    declined: "declined";
+                    replied: "replied";
+                    received: "received";
+                }>;
+            };
+            readonly access: {
+                readonly read: "server";
+                readonly create: "server";
+                readonly update: "server";
+                readonly delete: "server";
+            };
+            readonly writes: "confirmed";
+        }>;
+        requestOutbox: import("./table.ts").TableOf<"requestOutbox", {
+            readonly columns: {
+                readonly source: z.ZodString;
+                readonly requestId: z.ZodString;
+                readonly subject: z.ZodString;
+                readonly text: z.ZodString;
+                readonly replyTo: z.ZodString;
+                readonly status: z.ZodEnum<{
+                    failed: "failed";
+                    pending: "pending";
+                    sent: "sent";
+                    sending: "sending";
+                }>;
+                readonly attempts: z.ZodNumber;
+                readonly nextAt: z.ZodNullable<z.ZodString>;
+                readonly sentAt: z.ZodNullable<z.ZodString>;
+                readonly claimedAt: z.ZodNullable<z.ZodString>;
+            };
+            readonly access: {
+                readonly read: "server";
+                readonly create: "server";
+                readonly update: "server";
+                readonly delete: "server";
+            };
+            readonly writes: "confirmed";
+        }>;
+        requestOperations: import("./table.ts").TableOf<"requestOperations", {
+            readonly columns: {
+                readonly result: z.ZodString;
+            };
+            readonly access: {
+                readonly read: "server";
+                readonly create: "server";
+                readonly update: "server";
+                readonly delete: "server";
+            };
+            readonly writes: "confirmed";
+        }>;
         bookingRules: import("./table.ts").TableOf<"bookingRules", {
             readonly columns: {
                 readonly windows: z.ZodString;

package/dist/cli/app.js

@@ -22,6 +22,7 @@ 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 { REQUESTS_USAGE, requests } from "./requests.js";
 import { withStartingValues } from "./startingValues.js";
 import { toolBin } from "./tools.js";
 import { isNewer, latestPattern, newerPattern, updateNote } from "./updates.js";
@@ -93,7 +94,8 @@ const VALUE_FLAGS = new Set([
     '--row',
     '--set',
     '--file',
-    '--asked'
+    '--asked',
+    '--text'
 ]);
 const PHOTO_TYPES = {
     '.jpg': 'image/jpeg',
@@ -379,6 +381,19 @@ collected changes. Up to ${CHANGE_SET_ROWS} changes per request. For this comput
         argumentCount: 3,
         flags: ['--row', '--set', '--file', '--asked']
     },
+    requests: {
+        summary: 'Read the live site’s requests and write replies for the owner (app requests --help)',
+        details: `${REQUESTS_USAGE}
+Requests are what visitors send from the live site through a request source: bookings, and each
+inquiry() form. The owner reads and answers them on onpattern.app (Requests), and gets an email for
+each one. With no command this lists them as source/id; show prints one. draft writes a reply for the
+owner to read on onpattern.app: it waits there with --asked (their request, in their words) beside
+it, and nothing reaches the customer until the owner presses Send there. Accepting or declining a
+booking, and marking a request done, are the owner's to do on onpattern.app.`,
+        run: (_argument, options, rest) => requests(publishingIo(), ROOT, rest, options),
+        argumentCount: 2,
+        flags: ['--text', '--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).
@@ -1617,7 +1632,7 @@ async function update() {
     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`
+        text: `✓ Updated Pattern ${current} → ${latest}\n  next  run app migration pattern_${latest.replaceAll('.', '_')} (it writes nothing when Pattern's own tables didn't change), then 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() {

package/dist/cli/requests.d.ts

@@ -0,0 +1,5 @@
+import type { Outcome, PublishingIo } from './publishing.ts';
+export declare const REQUESTS_USAGE = "app requests\napp requests show <source/id>\napp requests draft <source/id> --text \"<the reply>\" --asked \"<the owner's request, in their words>\"\napp requests draft <source/id> --file reply.txt --asked \"\u2026\"";
+type RequestOptions = ReadonlyMap<string, string | true>;
+export declare function requests(io: PublishingIo, root: string, [action, key]: readonly (string | undefined)[], options: RequestOptions): Promise<Outcome>;
+export {};

package/dist/cli/requests.js

@@ -0,0 +1,115 @@
+import { readFileSync, existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { DASHBOARD_URL, requestDraft, requestList } from "../publishWire.js";
+import { readProjectFile } from "../vite/projectFile.js";
+import { callJson, failure, isOutcome, sayHost, signedIn } from "./publishing.js";
+export const REQUESTS_USAGE = `app requests
+app requests show <source/id>
+app requests draft <source/id> --text "<the reply>" --asked "<the owner's request, in their words>"
+app requests draft <source/id> --file reply.txt --asked "…"`;
+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 lineOf(entry) {
+    const when = entry.when === null ? '' : `  ${entry.when}`;
+    return `  ${entry.source}/${entry.id}  ${entry.status}  ${entry.name} <${entry.email}>  ${entry.label}${entry.summary === '' ? '' : ` · ${entry.summary}`}${when}`;
+}
+function detailOf(entry) {
+    return [
+        `${entry.title} from ${entry.name} <${entry.email}>  (${entry.status})`,
+        ...entry.fields.map((field) => `  ${field.label}: ${field.value}`),
+        ...entry.contact.map((field) => `  ${field.label}: ${field.value}`),
+        ...(entry.message === '' ? [] : ['', entry.message]),
+        ...entry.messages.map((message) => `  ${message.kind} (${message.status}): ${message.text}`),
+        ...(entry.draft === null
+            ? []
+            : [`  draft waiting for the owner: ${entry.draft.text}`])
+    ];
+}
+async function listed(io, name) {
+    return signedIn(io, 'app requests', () => callJson(`/api/apps/${name}/requests`, requestList));
+}
+function textGiven(root, options) {
+    const text = valueOf(options, '--text');
+    if (text !== undefined)
+        return text;
+    const file = valueOf(options, '--file');
+    if (file === undefined)
+        return undefined;
+    const path = resolve(root, file);
+    if (!existsSync(path))
+        throw new Error(`There is no file at ${file}`);
+    return readFileSync(path, 'utf8');
+}
+export async function requests(io, root, [action, key], options) {
+    try {
+        const { name } = readProjectFile(root);
+        sayHost(io);
+        const list = await listed(io, name);
+        if (isOutcome(list))
+            return list;
+        if (list.status === 'outdated') {
+            return refusal('Publish once with the latest Pattern so its requests reach onpattern.app');
+        }
+        if (action === undefined) {
+            const open = list.requests.filter((entry) => entry.needsAnswer);
+            return {
+                code: 0,
+                data: { requests: list.requests },
+                text: [
+                    `${open.length} of ${list.requests.length} requests on ${name} need an answer`,
+                    ...list.requests.map(lineOf)
+                ].join('\n')
+            };
+        }
+        const [source = '', id = ''] = (key ?? '').split('/');
+        const entry = list.requests.find((item) => item.source === source && item.id === id);
+        if (entry === undefined) {
+            return refusal(`Say which request as source/id, as app requests lists it\n${REQUESTS_USAGE}`, 2);
+        }
+        if (action === 'show') {
+            return {
+                code: 0,
+                data: { request: entry },
+                text: detailOf(entry).join('\n')
+            };
+        }
+        if (action !== 'draft') {
+            return refusal(`Unknown requests command: ${action}\n${REQUESTS_USAGE}`, 2);
+        }
+        if (!entry.actions.includes('reply')) {
+            return refusal(`${entry.title} can’t take a written reply: the owner answers it with ${entry.actions.join(' or ') || 'nothing now'} on onpattern.app`);
+        }
+        const text = textGiven(root, options);
+        const asked = valueOf(options, '--asked');
+        if (text === undefined || text.trim() === '') {
+            return refusal('Give the reply with --text "…" or --file reply.txt', 2);
+        }
+        if (asked === undefined || asked.trim() === '') {
+            return refusal('Say what the owner asked for with --asked "<their words>". They see it beside Send.', 2);
+        }
+        const draft = await signedIn(io, 'app requests draft', () => callJson(`/api/apps/${name}/requests/${source}/${id}/drafts`, requestDraft, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ text: text.trim(), asked: asked.trim() })
+        }));
+        if (isOutcome(draft))
+            return draft;
+        const link = `${DASHBOARD_URL}/sites/${name}/requests`;
+        return {
+            code: 0,
+            data: { draft },
+            text: [
+                `✓ Your reply to ${entry.name} is waiting for the owner. Nothing was sent.`,
+                `  next  tell them: "I've written a reply to ${entry.name}. Open ${link}, read it, change anything you like, then press Send."`
+            ].join('\n')
+        };
+    }
+    catch (error) {
+        return failure(error);
+    }
+}

package/dist/components/AppFrame.js

@@ -15,12 +15,22 @@ export function AppFrame({ look = 'shell', workspace, links, workspaceMenu = [],
         : [
             ...workspaceMenu,
             ...(workspaceMenu.length > 0 ? ['separator'] : []),
-            { id: 'signOut', label: 'Log out', onSelect: account.signOut }
+            {
+                id: 'signOut',
+                label: 'Log out',
+                icon: 'logOut',
+                onSelect: account.signOut
+            }
         ];
     const accountEntries = [
         ...accountMenu,
         ...(accountMenu.length > 0 ? ['separator'] : []),
-        { id: 'signOut', label: 'Log out', onSelect: account.signOut }
+        {
+            id: 'signOut',
+            label: 'Log out',
+            icon: 'logOut',
+            onSelect: account.signOut
+        }
     ];
     const search = onSearch === undefined
         ? undefined

package/dist/components/Icon.js

@@ -5,7 +5,7 @@ import { shapeOf } from "./icons.js";
 import { tones } from "./tones.js";
 export function Icon({ name, size = 'md', tone = 'inherit', weight = 'regular' }) {
     const shape = shapeOf(name);
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: weight === 'light' ? '1.5' : '2', strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.paths.map((path, index) => (_jsx("path", { d: path, fill: shape.colors?.[index] }, path))) }));
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: shape.isFilled ? 'currentColor' : 'none', fillRule: shape.rule, stroke: shape.isFilled ? 'none' : 'currentColor', strokeWidth: weight === 'light' ? '1.5' : '2', strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...stylex.props(styles.icon, sizes[size], tones[tone]), children: shape.colors === undefined ? (_jsx("path", { d: shape.paths.join(' ') })) : (shape.paths.map((path, index) => (_jsx("path", { d: path, fill: shape.colors?.[index] }, path)))) }));
 }
 const styles = stylex.create({
     icon: {

package/dist/components/MenuItems.d.ts

@@ -4,6 +4,7 @@ type MenuAction = {
     id: string;
     label: string;
     icon?: IconName;
+    mark?: string;
     isDanger?: boolean;
 } & ({
     onSelect: () => void;

package/dist/components/MenuItems.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { useNavigate } from 'react-router';
 import * as stylex from '@stylexjs/stylex';
-import { colors, space } from "../theme/tokens.stylex.js";
+import { colors, iconSizes, radii, space } from "../theme/tokens.stylex.js";
 import { Divider } from "./Divider.js";
 import { Icon } from "./Icon.js";
 import { interact } from "./interaction.js";
 import { PopupItem } from "./PopupItem.js";
+import { Text } from "./Text.js";
 export function MenuItems({ items, primitive }) {
     const navigate = useNavigate();
     return items.map((entry, index) => entry === 'separator' ? (_jsx(Divider, { style: styles.separator }, `separator-${index}`)) : (_jsxs(BaseMenu.Item, { onClick: () => {
@@ -15,7 +16,7 @@ export function MenuItems({ items, primitive }) {
                 entry.onSelect();
             else
                 void navigate(entry.to);
-        }, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "menu", isHighlighted: state.highlighted, isDanger: entry.isDanger ?? false })), children: [entry.icon === undefined ? null : (_jsx("span", { ...stylex.props(styles.icon, entry.isDanger && styles.dangerIcon), children: _jsx(Icon, { name: entry.icon }) })), entry.label] }, entry.id)));
+        }, render: (props, state) => (_jsx(PopupItem, { ...props, kind: "menu", isHighlighted: state.highlighted, isDanger: entry.isDanger ?? false })), children: [entry.mark === undefined ? null : (_jsx("span", { ...stylex.props(styles.mark), children: _jsx(Text, { variant: "caption", children: entry.mark.charAt(0) }) })), entry.icon === undefined ? null : (_jsx("span", { ...stylex.props(styles.icon, entry.isDanger && styles.dangerIcon), children: _jsx(Icon, { name: entry.icon }) })), entry.label] }, entry.id)));
 }
 const styles = stylex.create({
     separator: {
@@ -26,6 +27,16 @@ const styles = stylex.create({
         display: 'flex',
         color: colors.secondaryForeground
     },
+    mark: {
+        display: 'grid',
+        flexShrink: 0,
+        placeItems: 'center',
+        width: iconSizes.md,
+        height: iconSizes.md,
+        color: colors.onBrandSolidForeground,
+        backgroundColor: colors.brandSolid,
+        borderRadius: radii.sm
+    },
     dangerIcon: {
         color: 'inherit'
     }

package/dist/components/SegmentedControl.d.ts

@@ -3,6 +3,7 @@ import type { Size } from './Size.ts';
 export type SegmentedOption<Value extends string> = {
     value: Value;
     label: string;
+    count?: number;
 };
 type SegmentedControlProps<Value extends string> = {
     label: string;

package/dist/components/SegmentedControl.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
 import * as stylex from '@stylexjs/stylex';
-import { borders, colors, fontWeights, motion, radii } from "../theme/tokens.stylex.js";
+import { borders, colors, fontSizes, fontWeights, lineHeights, motion, radii, space } from "../theme/tokens.stylex.js";
 import { interact } from "./interaction.js";
 import { buttonCorners, controlSizes, focusRing } from "./controlLook.js";
 export function SegmentedControl({ label, value, options, size = 'md', disabled = false, onChange, style }) {
@@ -10,7 +10,7 @@ export function SegmentedControl({ label, value, options, size = 'md', disabled
     return (_jsxs(RadioGroup, { "aria-label": label, value: value, disabled: disabled, onValueChange: (next) => {
             interact({ primitive: 'SegmentedControl', event: 'change', label });
             onChange(next);
-        }, className: stylex.props(styles.group, style).className, children: [_jsx("span", { ...stylex.props(styles.indicator(index, options.length)) }), options.map((option) => (_jsx(Radio.Root, { value: option.value, className: (state) => stylex.props(styles.option, controlSizes[size], buttonCorners[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled, focusRing.visible).className, children: option.label }, option.value)))] }));
+        }, className: stylex.props(styles.group, style).className, children: [_jsx("span", { ...stylex.props(styles.indicator(index, options.length)) }), options.map((option) => (_jsxs(Radio.Root, { value: option.value, className: (state) => stylex.props(styles.option, controlSizes[size], buttonCorners[size], !disabled && styles.hoverable, state.checked && styles.optionChecked, disabled && styles.disabled, focusRing.visible).className, children: [option.label, option.count === undefined ? null : (_jsx("span", { ...stylex.props(styles.count), children: option.count }))] }, option.value)))] }));
 }
 const styles = stylex.create({
     group: {
@@ -44,6 +44,7 @@ const styles = stylex.create({
         position: 'relative',
         zIndex: 1,
         display: 'inline-flex',
+        gap: `calc(${space.xs} + ${space.xxs})`,
         alignItems: 'center',
         justifyContent: 'center',
         color: colors.secondaryForeground,
@@ -64,5 +65,11 @@ const styles = stylex.create({
     },
     disabled: {
         color: colors.disabledForeground
+    },
+    count: {
+        fontSize: fontSizes.captionLg,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.caption,
+        color: colors.tertiaryForeground
     }
 });

package/dist/components/Sidebar.d.ts

@@ -6,6 +6,7 @@ export type SidebarLink = {
     to: AppPath;
     icon: IconName;
     count?: number | null;
+    countTone?: 'quiet' | 'brand';
 };
 type SidebarProps = {
     workspace: string;

package/dist/components/Sidebar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from '@stylexjs/stylex';
 import { NavLink } from 'react-router';
-import { breakpoints, colors, controls, iconSizes, layers, motion, radii, shadows, space, widths } from "../theme/tokens.stylex.js";
+import { breakpoints, colors, controls, fontSizes, fontWeights, iconSizes, layers, lineHeights, motion, radii, shadows, space, widths } from "../theme/tokens.stylex.js";
 import { Badge } from "./Badge.js";
 import { focusRing } from "./controlLook.js";
 import { Button } from "./Button.js";
@@ -16,7 +16,8 @@ export function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimatin
         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, align: "start", 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)))] }) }) })] }));
+                                    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 : item.countTone ===
+                                        'brand' ? (_jsx("span", { ...stylex.props(styles.count), children: item.count })) : (_jsx(Badge, { variant: "transparent", children: item.count }))] }, item.to)))] }) }) })] }));
 }
 const styles = stylex.create({
     sidebar: {
@@ -132,6 +133,21 @@ const styles = stylex.create({
         color: colors.primaryForeground,
         backgroundColor: colors.transparentHover
     },
+    count: {
+        display: 'inline-flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: `calc(${space.lg} + ${space.xxs})`,
+        height: `calc(${space.lg} + ${space.xxs})`,
+        paddingInline: `calc(${space.xs} + ${space.xxs} / 2)`,
+        fontSize: fontSizes.captionSm,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.caption,
+        color: colors.onBrandSolidForeground,
+        backgroundColor: colors.brandSolid,
+        borderRadius: radii.full
+    },
     itemLabel: {
         flexGrow: 1
     }

package/dist/components/TableRow.d.ts

@@ -2,8 +2,9 @@ import type { ReactNode } from 'react';
 type TableRowProps = {
     label: string;
     isCurrent?: boolean;
+    size?: 'md' | 'lg';
     onClick: () => void;
     children: ReactNode;
 };
-export declare function TableRow({ label, isCurrent, onClick, children }: TableRowProps): import("react").JSX.Element;
+export declare function TableRow({ label, isCurrent, size, onClick, children }: TableRowProps): import("react").JSX.Element;
 export {};