@trypattern/sdk 0.1.25 → 0.1.27

package/dist/app.d.ts

@@ -10,6 +10,7 @@ import type { Clock } from './clock.ts';
 import type { Gate } from './gate.ts';
 import { ActionsStore } from './actions.ts';
 import type { Action, ActionsBuilder } from './actions.ts';
+import { Device } from './builtins/Device.ts';
 import { Toasts } from './builtins/Toasts.ts';
 import { PageStore } from './page.ts';
 import type { BuiltInModels } from './registered.ts';
@@ -83,6 +84,7 @@ export type StoresOf<Group extends Tables, Custom, Item extends Action = Action>
     app: AppStore;
     actions: ActionsStore<Item>;
     toasts: Toasts;
+    device: Device;
     page: PageStore;
 } & TableStores<Group> & PublicStores<Group> & BlockStores<Group> & Custom;
 type BlockTablesMissing<Name extends string> = StaticTypeError<`The ${Name} block keeps its rows in Pattern's own tables: add them to tables in schema.ts (for bookings, ...bookingTables from '@trypattern/sdk/schema'), then run app migration add_${Name}`>;

package/dist/app.js

@@ -10,6 +10,7 @@ import { AppSettings } from "./builtins/AppSettings.js";
 import { BUILT_IN_GROUPS, builtInActions } from "./builtins/actions.js";
 import { Palette } from "./builtins/Palette.js";
 import { SignIn } from "./builtins/SignIn.js";
+import { Device } from "./builtins/Device.js";
 import { Toasts } from "./builtins/Toasts.js";
 import { PageStore } from "./page.js";
 import { assertNotBuilding, snapshotsOf } from "./store.js";
@@ -126,15 +127,16 @@ export function defineApp(definition) {
                 new block.Store(cache.persisted(`stores.${block.name}`), api.services)
             ]));
             const toasts = new Toasts(cache.persisted('stores.toasts'), {});
+            const device = new Device(cache.persisted('stores.device'), {});
             const clash = clashOf([
-                ['session', 'app', 'actions', 'toasts', 'page'],
+                ['session', 'app', 'actions', 'toasts', 'device', 'page'],
                 Object.keys(data.tables),
                 Object.keys(data.publicViews),
                 Object.keys(blockStores),
                 Object.keys(custom)
             ]);
             if (clash !== undefined) {
-                throw new Error(`Two stores are called "${clash}". The built-in session, app, actions, toasts and page stores, each table, each table's public view, each block and each store in src/stores/index.ts need their own name.`);
+                throw new Error(`Two stores are called "${clash}". The built-in session, app, actions, toasts, device and page stores, each table, each table's public view, each block and each store in src/stores/index.ts need their own name.`);
             }
             const actions = new ActionsStore(this.#page, [...(definition.actions ?? []), ...builtInActions], [
                 ...(definition.actionGroups ?? []),
@@ -145,6 +147,7 @@ export function defineApp(definition) {
                 app,
                 actions,
                 toasts,
+                device,
                 page: this.#page,
                 ...data.tables,
                 ...data.publicViews,

package/dist/builtins/Device.d.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+import type { Persisted } from '../state.ts';
+declare const Device_base: import("../store.ts").StoreClass<{
+    today: z.ZodDefault<z.ZodString>;
+    isCompact: z.ZodDefault<z.ZodBoolean>;
+}, [], Record<never, never>>;
+export declare class Device extends Device_base {
+    #private;
+    constructor(persisted: Persisted, services: Record<never, never>);
+    protected initialState(): {
+        today: string;
+        isCompact: boolean;
+    };
+}
+export {};

package/dist/builtins/Device.js

@@ -0,0 +1,52 @@
+import { z } from 'zod';
+import { defineStore } from "../store.js";
+const Store = defineStore();
+const COMPACT = '(max-width: 767px)';
+function dayOf(at) {
+    const month = String(at.getMonth() + 1).padStart(2, '0');
+    const day = String(at.getDate()).padStart(2, '0');
+    return `${at.getFullYear()}-${month}-${day}`;
+}
+function msUntilTomorrow(at) {
+    const tomorrow = new Date(at);
+    tomorrow.setHours(24, 0, 1, 0);
+    return tomorrow.getTime() - at.getTime();
+}
+function compactQuery() {
+    return typeof window === 'undefined' || !('matchMedia' in window)
+        ? undefined
+        : window.matchMedia(COMPACT);
+}
+export class Device extends Store({
+    state: {
+        today: z.string().default(''),
+        isCompact: z.boolean().default(false)
+    }
+}) {
+    #midnight;
+    constructor(persisted, services) {
+        super(persisted, services);
+        const query = compactQuery();
+        if (query === undefined)
+            return;
+        query.addEventListener('change', () => this.set({ isCompact: query.matches }));
+        const refresh = () => this.#refreshToday();
+        window.addEventListener('focus', refresh);
+        document.addEventListener('visibilitychange', refresh);
+        this.#waitForMidnight();
+    }
+    initialState() {
+        return {
+            today: dayOf(new Date()),
+            isCompact: compactQuery()?.matches ?? false
+        };
+    }
+    #refreshToday() {
+        this.set({ today: dayOf(new Date()) });
+        this.#waitForMidnight();
+    }
+    #waitForMidnight() {
+        clearTimeout(this.#midnight);
+        this.#midnight = setTimeout(() => this.#refreshToday(), msUntilTomorrow(new Date()));
+    }
+}

package/dist/components/Text.d.ts

@@ -5,13 +5,14 @@ type TextProps = {
     children: ReactNode;
     variant?: 'hero' | 'display' | 'section' | 'heading' | 'subheading' | 'title' | 'lead' | 'intro' | 'label' | 'body' | 'caption' | 'code';
     tone?: Tone;
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'heavy';
     align?: 'start' | 'center' | 'end';
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3';
     isTruncated?: boolean;
     isSelectable?: boolean;
     style?: Placement;
 };
-export declare function Text({ children, variant, tone, align, as, isTruncated, isSelectable, style }: TextProps): import("react").DetailedReactHTMLElement<Readonly<{
+export declare function Text({ children, variant, tone, weight, align, as, isTruncated, isSelectable, style }: TextProps): import("react").DetailedReactHTMLElement<Readonly<{
     className?: string;
     'data-style-src'?: string;
     style?: Readonly<{

package/dist/components/Text.js

@@ -2,8 +2,8 @@ import * as stylex from '@stylexjs/stylex';
 import { createElement } from 'react';
 import { breakpoints, fontSizes, fontWeights, fonts, lineHeights, trackings } from "../theme/tokens.stylex.js";
 import { tones } from "./tones.js";
-export function Text({ children, variant = 'body', tone = 'inherit', align, as = 'span', isTruncated = false, isSelectable = false, style }) {
-    return createElement(as, stylex.props(as !== 'span' && styles.block, variants[variant], tones[tone], align !== undefined && alignments[align], isTruncated && styles.truncated, isSelectable && styles.selectable, style), children);
+export function Text({ children, variant = 'body', tone = 'inherit', weight, align, as = 'span', isTruncated = false, isSelectable = false, style }) {
+    return createElement(as, stylex.props(as !== 'span' && styles.block, variants[variant], tones[tone], weight !== undefined && weights[weight], align !== undefined && alignments[align], isTruncated && styles.truncated, isSelectable && styles.selectable, style), children);
 }
 const styles = stylex.create({
     block: {
@@ -22,11 +22,12 @@ const styles = stylex.create({
 });
 const variants = stylex.create({
     hero: {
+        fontFamily: fonts.heading,
         fontSize: {
             default: fontSizes.heading1,
             [breakpoints.compact]: fontSizes.heading2
         },
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: {
             default: lineHeights.heading1,
             [breakpoints.compact]: lineHeights.heading2
@@ -34,11 +35,12 @@ const variants = stylex.create({
         letterSpacing: trackings.hero
     },
     display: {
+        fontFamily: fonts.heading,
         fontSize: {
             default: fontSizes.heading2,
             [breakpoints.compact]: fontSizes.heading3
         },
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: {
             default: lineHeights.heading2,
             [breakpoints.compact]: lineHeights.heading3
@@ -46,11 +48,12 @@ const variants = stylex.create({
         letterSpacing: trackings.display
     },
     section: {
+        fontFamily: fonts.heading,
         fontSize: {
             default: fontSizes.heading3,
             [breakpoints.compact]: fontSizes.heading5
         },
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: {
             default: lineHeights.heading3,
             [breakpoints.compact]: lineHeights.heading5
@@ -58,14 +61,16 @@ const variants = stylex.create({
         letterSpacing: trackings.section
     },
     heading: {
+        fontFamily: fonts.heading,
         fontSize: fontSizes.heading5,
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: lineHeights.heading5,
         letterSpacing: trackings.heading
     },
     subheading: {
+        fontFamily: fonts.heading,
         fontSize: fontSizes.heading6,
-        fontWeight: fontWeights.medium,
+        fontWeight: fontWeights.heading,
         lineHeight: lineHeights.heading6
     },
     title: {
@@ -86,23 +91,23 @@ const variants = stylex.create({
     label: {
         fontSize: {
             default: fontSizes.bodySm,
-            [breakpoints.compact]: fontSizes.bodyBase
+            [breakpoints.compact]: fontSizes.bodyCompact
         },
         fontWeight: fontWeights.medium,
         lineHeight: {
             default: lineHeights.bodySm,
-            [breakpoints.compact]: lineHeights.body
+            [breakpoints.compact]: lineHeights.bodyCompact
         }
     },
     body: {
         fontSize: {
             default: fontSizes.bodySm,
-            [breakpoints.compact]: fontSizes.bodyBase
+            [breakpoints.compact]: fontSizes.bodyCompact
         },
         fontWeight: fontWeights.normal,
         lineHeight: {
             default: lineHeights.bodySm,
-            [breakpoints.compact]: lineHeights.body
+            [breakpoints.compact]: lineHeights.bodyCompact
         }
     },
     caption: {
@@ -117,6 +122,13 @@ const variants = stylex.create({
         lineHeight: lineHeights.bodySm
     }
 });
+const weights = stylex.create({
+    normal: { fontWeight: fontWeights.normal },
+    medium: { fontWeight: fontWeights.medium },
+    semibold: { fontWeight: fontWeights.semibold },
+    bold: { fontWeight: fontWeights.bold },
+    heavy: { fontWeight: fontWeights.heavy }
+});
 const alignments = stylex.create({
     start: { textAlign: 'start' },
     center: { textAlign: 'center' },

package/dist/registered.d.ts

@@ -2,6 +2,7 @@ import type { AppSnapshotShape, ModelServicesOf, NavigateCommand, PressKeyComman
 import { z } from 'zod';
 import type { Action, DefineActions } from './actions.ts';
 import type { ServiceClient, Services } from './services.ts';
+import type { StoreFactory } from './store.ts';
 import type { Instances, MessagesOf, ModelClassLike, ModelSnapshots } from './model.ts';
 import type { BUILT_IN_GROUPS } from './builtins/actions.ts';
 import type { Account } from './builtins/Account.ts';
@@ -48,7 +49,7 @@ export type ActionContext = {
 };
 export type ModelServices = ModelServicesOf<AppPath>;
 export declare const Model: <S extends import("./state.ts").StateSpec = Record<never, never>, const P extends readonly (keyof S & string)[] = []>(config?: import("./model.ts").ModelConfig<S, P>) => import("./model.ts").ModelClass<AppStores, ModelServices, S, P>;
-export declare const Store: <S extends import("./state.ts").StateSpec = Record<never, never>, const P extends readonly (keyof S & string)[] = []>(config: import("./store.ts").StoreConfig<S, P>) => import("./store.ts").StoreClass<S, P, ServiceClient<Empty>>;
+export declare const Store: StoreFactory<AppServices>;
 export declare const defineActions: DefineActions<ActionContext, RegisteredAction, AppCommand>;
 export declare const appPath: z.ZodCustom<AppPath, AppPath>;
 type ActionInput = Pick<AppAction, 'id' | 'label' | 'group' | 'icon'> & Partial<Pick<AppAction, 'keys' | 'keywords' | 'isDanger' | 'isSearchOnly' | 'isHidden'>> & {

package/dist/rules/checkAllFiles.js

@@ -378,14 +378,6 @@ function misplacedSourceFiles() {
     return ownedFiles(SRC_DIRECTORY).filter((path) => !isWhereItBelongs(relative(SRC_DIRECTORY, path)) || !isInItsFolder(path));
 }
 const SCHEMA_FILE = join(ROOT, 'schema.ts');
-function rowTypeName(table) {
-    const one = table.endsWith('ies')
-        ? `${table.slice(0, -3)}y`
-        : table.endsWith('s')
-            ? table.slice(0, -1)
-            : table;
-    return `${one.charAt(0).toUpperCase()}${one.slice(1)}`;
-}
 function isExported(node) {
     return (ts.canHaveModifiers(node) &&
         (ts.getModifiers(node) ?? []).some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword));
@@ -403,8 +395,6 @@ function schemaFindings() {
         return [];
     const text = readFileSync(SCHEMA_FILE, 'utf8');
     const source = ts.createSourceFile(SCHEMA_FILE, text, ts.ScriptTarget.Latest, true);
-    const tables = [];
-    const rowTypes = new Set();
     let exportsTables = false;
     let exportsAdmins = false;
     const visit = (node) => {
@@ -422,29 +412,6 @@ function schemaFindings() {
                 definesTables(declaration.initializer, source))) {
             exportsTables = true;
         }
-        if (ts.isCallExpression(node) &&
-            node.expression.getText(source) === 'defineTables') {
-            const [definitions] = node.arguments;
-            if (definitions !== undefined &&
-                ts.isObjectLiteralExpression(definitions)) {
-                for (const property of definitions.properties) {
-                    const name = property.name;
-                    if (name !== undefined &&
-                        (ts.isIdentifier(name) || ts.isStringLiteral(name))) {
-                        tables.push({ key: name.text, offset: property.getStart(source) });
-                    }
-                }
-            }
-        }
-        if (ts.isTypeAliasDeclaration(node) &&
-            isExported(node) &&
-            ts.isTypeReferenceNode(node.type) &&
-            node.type.typeName.getText(source) === 'Row') {
-            const [argument] = node.type.typeArguments ?? [];
-            if (argument !== undefined && ts.isTypeQueryNode(argument)) {
-                rowTypes.add(argument.exprName.getText(source));
-            }
-        }
         ts.forEachChild(node, visit);
     };
     visit(source);
@@ -456,18 +423,9 @@ function schemaFindings() {
             }
         ];
     }
-    const missingAdmins = exportsAdmins
+    return exportsAdmins
         ? []
         : [{ offset: 0, fix: 'export const admins: string[] = []' }];
-    return [
-        ...missingAdmins,
-        ...tables
-            .filter(({ key }) => !rowTypes.has(`tables.${key}`))
-            .map(({ key, offset }) => ({
-            offset,
-            fix: `export type ${rowTypeName(key)} = Row<typeof tables.${key}>`
-        }))
-    ];
 }
 const ACCESS_FLOWS_FILE = join(ROOT, 'flows', 'Access.flow.ts');
 function toasterPlacements() {

package/dist/rules/messages.d.ts

@@ -22,7 +22,7 @@ export declare const DEV_ONLY_SIGN_IN_MESSAGE = "The server has exactly one dev-
 export declare const STATE_VIA_HOOKS_MESSAGE = "A screen reads only its model: const issueList = useModel('issueList'), then issueList.issues, issueList.isLoading and issueList.createIssue(). Reading .state, .models, .stores or getSnapshot() directly does not subscribe, so the screen would show stale data. If the screen needs something from a store, add a getter for it to the model.";
 export declare const CLASSES_NOT_FACTORIES_MESSAGE = "A function that returns an object of methods is a class in disguise: write it as a class, with private fields for its state and methods for its behaviour. One shape for everything that has state keeps the codebase predictable. Plain functions are for pure helpers that compute a value (sortProjects, newClientSideId).";
 export declare const ACCESS_FLOWS_MESSAGE = "flows/Access.flow.ts runs Pattern's generated access flows, which prove every table's access rules against the seed on each app test. Keep it: `import { accessFlows } from '@trypattern/sdk/flows'` and `accessFlows({ App })`.";
-export declare const SCHEMA_TABLES_MESSAGE = "schema.ts defines every saved table in one place and says who may do what: `export const tables = defineTables({ issues: { columns: { title: z.string() }, access: { read: 'signedIn', create: 'signedIn', update: 'signedIn', delete: 'signedIn' }, writes: 'optimistic' } })`. It exports a row type for each table, named for one row (`export type Issue = Row<typeof tables.issues>`), and the emails of the people who run the app, `export const admins: string[] = []`, even when there are none yet, so the question is answered on purpose. Add the line shown.";
+export declare const SCHEMA_TABLES_MESSAGE = "schema.ts defines every saved table in one place and says who may do what: `export const tables = defineTables({ issues: { columns: { title: z.string() }, access: { read: 'signedIn', create: 'signedIn', update: 'signedIn', delete: 'signedIn' }, writes: 'optimistic' } })`. When another file needs a table's row type, schema.ts exports it, named for one row (`export type Issue = Row<typeof tables.issues>`). It also exports the emails of the people who run the app, `export const admins: string[] = []`, even when there are none yet, so the question is answered on purpose. Add the line shown.";
 export declare const NO_UNUSED_EXPORTS_MESSAGE = "Export only what another file imports. Nothing imports this, so remove `export` (and the code itself if this file does not use it either). Unused exports hide dead code and make a file look like it offers more than it does. Pattern reads `tables` from schema.ts and `seed` from seed.ts, and vite.config.ts and server/worker.ts default-export their config, so those stay.";
 export declare const NO_RE_EXPORTS_MESSAGE = "Do not pass imports through: a file exports only what it defines. Import the thing from where it lives instead (command from @trypattern/sdk, a component from its own file), so every import names the real source. server/worker.ts is the one exception: Cloudflare runs the Workflow and Durable Object classes its Worker exports, so it may export them from where they live.";
 export declare const EXPLICIT_ACCESS_MESSAGE = "Mark every class member public or private (or protected, to override a base class member), so a reader sees at a glance what other code may call: `public setSort = command(...)`, `public override onPageOpen()`, `private loadIssues()`. Use the word private, never #name, so there is one way to say it. Constructors need neither.";
@@ -30,7 +30,7 @@ export declare const IMPORT_FROM_ROOT_MESSAGE = "Import project files by their p
 export declare const MODEL_MEMBERS_MESSAGE = "A model shows the outside world three kinds of public member, so a reader can tell them apart at a glance: getters are its answers (public get hasNext()), command() fields are what it can do (public openNext = command(() => ...)), and onPageOpen() runs when its page opens. Everything else is private, and a private helper that works something out is a method (private neighbours()), never a getter, because Pattern publishes every getter to the screen and the snapshot. A model has no `actions`: menu entries and shortcuts live in src/actions/.";
 export declare const MODEL_BY_NAME_MESSAGE = "Keep the model whole and read it by name: const issueList = useModel('issueList'), then issueList.isLoading and onClick={issueList.createIssue}. Destructuring it hides where each value comes from and leaves loose names a reader has to trace back.";
 export declare const USE_MODEL_WHERE_MESSAGE = "useModel is for screens (src/screens/) and layouts (src/layouts/). Other components take what they show as props and the commands they call as callbacks, so the screen decides what they read: <IssueListRow issue={issue} onDelete={issueList.deleteIssue} />.";
-export declare const PURE_GETTERS_MESSAGE = "A getter works an answer out from this.state and this.stores.<name>.state and nothing else. It never changes anything (this.set, a store method, this.app.navigate), never waits, and never reads the clock, randomness or a private field, because Pattern caches each getter until the state it read changes, and flows compare its value. Put the change in a command.";
+export declare const PURE_GETTERS_MESSAGE = "A getter works an answer out from this.state and this.stores.<name>.state and nothing else. It never changes anything (this.set, a store method, this.app.navigate), never waits, and never reads the clock, randomness or a private field, because Pattern caches each getter until the state it read changes, and flows compare its value. Put the change in a command. For the date today read this.stores.device.state.today (YYYY-MM-DD on this device, kept current past midnight), and for a phone-width screen this.stores.device.state.isCompact.";
 export declare const ACTIONS_WHERE_MESSAGE = "Menu entries and shortcuts are actions, and actions live only in src/actions/: one file per thing they act on, `export const issueActions = defineActions(({ page, models }) => [action({ id: 'issues.next', label: 'Next issue', keys: ['j'], send: [{ type: 'issueDetail.openNext' }] })])`, listed in src/actions/index.ts. If a person can see it in a menu or press a key for it, it is an action; what it does is a command on a model, and an action only sends commands. Models never build actions.";
 export declare const PURE_ACTIONS_MESSAGE = "An actions file works its entries out from `page` and `models` (each model's state and answers) and nothing else, because Pattern reruns it only when something it read changes, and flows compare the result. It never waits, never uses `this`, never reads the clock or randomness, and imports only types from src/models/, src/stores/ and src/components/. If an entry needs something a model does not answer yet, add a getter to that model.";
 export declare const USE_PRIMITIVES_MESSAGE = "Write <Button>, <IconButton>, <TextField>, <Select>, <Switch> or <Dialog> from @trypattern/sdk/react instead of this element. The primitives carry the focus, keyboard, disabled, pending and error behaviour and the design system's look, so a screen only says what the control does. If no primitive fits, the gap is in the SDK; do not build around it here.";

package/dist/rules/messages.js

@@ -22,7 +22,7 @@ export const DEV_ONLY_SIGN_IN_MESSAGE = 'The server has exactly one dev-only swi
 export const STATE_VIA_HOOKS_MESSAGE = "A screen reads only its model: const issueList = useModel('issueList'), then issueList.issues, issueList.isLoading and issueList.createIssue(). Reading .state, .models, .stores or getSnapshot() directly does not subscribe, so the screen would show stale data. If the screen needs something from a store, add a getter for it to the model.";
 export const CLASSES_NOT_FACTORIES_MESSAGE = 'A function that returns an object of methods is a class in disguise: write it as a class, with private fields for its state and methods for its behaviour. One shape for everything that has state keeps the codebase predictable. Plain functions are for pure helpers that compute a value (sortProjects, newClientSideId).';
 export const ACCESS_FLOWS_MESSAGE = "flows/Access.flow.ts runs Pattern's generated access flows, which prove every table's access rules against the seed on each app test. Keep it: `import { accessFlows } from '@trypattern/sdk/flows'` and `accessFlows({ App })`.";
-export const SCHEMA_TABLES_MESSAGE = "schema.ts defines every saved table in one place and says who may do what: `export const tables = defineTables({ issues: { columns: { title: z.string() }, access: { read: 'signedIn', create: 'signedIn', update: 'signedIn', delete: 'signedIn' }, writes: 'optimistic' } })`. It exports a row type for each table, named for one row (`export type Issue = Row<typeof tables.issues>`), and the emails of the people who run the app, `export const admins: string[] = []`, even when there are none yet, so the question is answered on purpose. Add the line shown.";
+export const SCHEMA_TABLES_MESSAGE = "schema.ts defines every saved table in one place and says who may do what: `export const tables = defineTables({ issues: { columns: { title: z.string() }, access: { read: 'signedIn', create: 'signedIn', update: 'signedIn', delete: 'signedIn' }, writes: 'optimistic' } })`. When another file needs a table's row type, schema.ts exports it, named for one row (`export type Issue = Row<typeof tables.issues>`). It also exports the emails of the people who run the app, `export const admins: string[] = []`, even when there are none yet, so the question is answered on purpose. Add the line shown.";
 export const NO_UNUSED_EXPORTS_MESSAGE = 'Export only what another file imports. Nothing imports this, so remove `export` (and the code itself if this file does not use it either). Unused exports hide dead code and make a file look like it offers more than it does. Pattern reads `tables` from schema.ts and `seed` from seed.ts, and vite.config.ts and server/worker.ts default-export their config, so those stay.';
 export const NO_RE_EXPORTS_MESSAGE = 'Do not pass imports through: a file exports only what it defines. Import the thing from where it lives instead (command from @trypattern/sdk, a component from its own file), so every import names the real source. server/worker.ts is the one exception: Cloudflare runs the Workflow and Durable Object classes its Worker exports, so it may export them from where they live.';
 export const EXPLICIT_ACCESS_MESSAGE = 'Mark every class member public or private (or protected, to override a base class member), so a reader sees at a glance what other code may call: `public setSort = command(...)`, `public override onPageOpen()`, `private loadIssues()`. Use the word private, never #name, so there is one way to say it. Constructors need neither.';
@@ -30,7 +30,7 @@ export const IMPORT_FROM_ROOT_MESSAGE = 'Import project files by their path from
 export const MODEL_MEMBERS_MESSAGE = 'A model shows the outside world three kinds of public member, so a reader can tell them apart at a glance: getters are its answers (public get hasNext()), command() fields are what it can do (public openNext = command(() => ...)), and onPageOpen() runs when its page opens. Everything else is private, and a private helper that works something out is a method (private neighbours()), never a getter, because Pattern publishes every getter to the screen and the snapshot. A model has no `actions`: menu entries and shortcuts live in src/actions/.';
 export const MODEL_BY_NAME_MESSAGE = "Keep the model whole and read it by name: const issueList = useModel('issueList'), then issueList.isLoading and onClick={issueList.createIssue}. Destructuring it hides where each value comes from and leaves loose names a reader has to trace back.";
 export const USE_MODEL_WHERE_MESSAGE = 'useModel is for screens (src/screens/) and layouts (src/layouts/). Other components take what they show as props and the commands they call as callbacks, so the screen decides what they read: <IssueListRow issue={issue} onDelete={issueList.deleteIssue} />.';
-export const PURE_GETTERS_MESSAGE = 'A getter works an answer out from this.state and this.stores.<name>.state and nothing else. It never changes anything (this.set, a store method, this.app.navigate), never waits, and never reads the clock, randomness or a private field, because Pattern caches each getter until the state it read changes, and flows compare its value. Put the change in a command.';
+export const PURE_GETTERS_MESSAGE = 'A getter works an answer out from this.state and this.stores.<name>.state and nothing else. It never changes anything (this.set, a store method, this.app.navigate), never waits, and never reads the clock, randomness or a private field, because Pattern caches each getter until the state it read changes, and flows compare its value. Put the change in a command. For the date today read this.stores.device.state.today (YYYY-MM-DD on this device, kept current past midnight), and for a phone-width screen this.stores.device.state.isCompact.';
 export const ACTIONS_WHERE_MESSAGE = "Menu entries and shortcuts are actions, and actions live only in src/actions/: one file per thing they act on, `export const issueActions = defineActions(({ page, models }) => [action({ id: 'issues.next', label: 'Next issue', keys: ['j'], send: [{ type: 'issueDetail.openNext' }] })])`, listed in src/actions/index.ts. If a person can see it in a menu or press a key for it, it is an action; what it does is a command on a model, and an action only sends commands. Models never build actions.";
 export const PURE_ACTIONS_MESSAGE = "An actions file works its entries out from `page` and `models` (each model's state and answers) and nothing else, because Pattern reruns it only when something it read changes, and flows compare the result. It never waits, never uses `this`, never reads the clock or randomness, and imports only types from src/models/, src/stores/ and src/components/. If an entry needs something a model does not answer yet, add a getter to that model.";
 export const USE_PRIMITIVES_MESSAGE = "Write <Button>, <IconButton>, <TextField>, <Select>, <Switch> or <Dialog> from @trypattern/sdk/react instead of this element. The primitives carry the focus, keyboard, disabled, pending and error behaviour and the design system's look, so a screen only says what the control does. If no primitive fits, the gap is in the SDK; do not build around it here.";

package/dist/start.d.ts

@@ -5,8 +5,8 @@ import type { IconDrawing } from './components/icons.ts';
 import type { Interaction } from './components/interaction.ts';
 import type { ReactApp } from './hooks/appContext.ts';
 import type { Tables } from './table.ts';
-import { borders, colors, controls, fontSizes, fonts, iconSizes, lineHeights, radii, shadows, space, widths } from './theme/tokens.stylex.ts';
-type Themeable = typeof colors | typeof radii | typeof fonts | typeof shadows | typeof space | typeof fontSizes | typeof lineHeights | typeof controls | typeof iconSizes | typeof borders | typeof widths;
+import { borders, colors, controls, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from './theme/tokens.stylex.ts';
+type Themeable = typeof colors | typeof radii | typeof fonts | typeof shadows | typeof space | typeof fontSizes | typeof fontWeights | typeof lineHeights | typeof trackings | typeof controls | typeof iconSizes | typeof borders | typeof widths;
 export type StartOptions = {
     theme?: readonly Theme<Themeable>[];
     icons?: Readonly<Record<string, IconDrawing>>;

package/dist/start.js

@@ -12,7 +12,7 @@ import { manualClock, realClock } from "./clock.js";
 import { Gate } from "./gate.js";
 import { AppProvider } from "./hooks/appContext.js";
 import { routeObjects } from "./routes.js";
-import { borders, breakpoints, colors, controls, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, widths } from "./theme/tokens.stylex.js";
+import { borders, breakpoints, colors, controls, fontFeatures, fontSizes, fontWeights, fonts, iconSizes, lineHeights, radii, shadows, space, trackings, widths } from "./theme/tokens.stylex.js";
 const TEST_SEED = 'patternSeed';
 const INLINE_DATA_ID = 'pattern-data';
 const TEST_ADMINS = 'patternAdmins';

package/dist/store.d.ts

@@ -34,7 +34,8 @@ export declare abstract class DeclaredStore<State extends object, Client = Recor
 export type StoreClass<S extends StateSpec, P extends readonly (keyof S & string)[], Client = Record<never, never>> = (abstract new (persisted: Persisted, services: Client) => DeclaredStore<StateOf<S>, Client>) & {
     readonly config: StoreConfig<S, P>;
 };
-export declare function defineStore<Client>(): <S extends StateSpec = Record<never, never>, const P extends readonly (keyof S & string)[] = []>(config: StoreConfig<S, P>) => StoreClass<S, P, Client>;
+export type StoreFactory<Client> = <S extends StateSpec = Record<never, never>, const P extends readonly (keyof S & string)[] = []>(config: StoreConfig<S, P>) => StoreClass<S, P, Client>;
+export declare function defineStore<Client>(): StoreFactory<Client>;
 export type Snapshots<Group> = {
     [Key in keyof Group]: Group[Key] extends {
         readonly state: infer State;

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

@@ -174,6 +174,7 @@ export declare const fontSizes: stylex.VarGroup<Readonly<{
     bodyMd: string;
     bodyBase: string;
     bodyLg: string;
+    bodyCompact: string;
     heading6: string;
     heading5: string;
     heading4: string;
@@ -194,6 +195,7 @@ export declare const lineHeights: stylex.VarGroup<Readonly<{
     bodySm: string;
     body: string;
     bodyLg: string;
+    bodyCompact: string;
     heading6: string;
     heading5: string;
     heading4: string;
@@ -203,6 +205,7 @@ export declare const lineHeights: stylex.VarGroup<Readonly<{
 }>, symbol>;
 export declare const fonts: stylex.VarGroup<Readonly<{
     sans: string;
+    heading: string;
     mono: string;
 }>, symbol>;
 export declare const fontFeatures: stylex.VarGroup<Readonly<{
@@ -215,6 +218,8 @@ export declare const fontWeights: stylex.VarGroup<Readonly<{
     medium: string;
     semibold: string;
     bold: string;
+    heavy: string;
+    heading: string;
 }>, symbol>;
 export declare const shadows: stylex.VarGroup<Readonly<{
     border: string;

package/dist/theme/tokens.stylex.js

@@ -174,6 +174,7 @@ export const fontSizes = stylex.defineVars({
     bodyMd: '14px',
     bodyBase: '15px',
     bodyLg: '18px',
+    bodyCompact: '15px',
     heading6: '20px',
     heading5: '24px',
     heading4: '28px',
@@ -194,6 +195,7 @@ export const lineHeights = stylex.defineVars({
     bodySm: '20px',
     body: '24px',
     bodyLg: '28px',
+    bodyCompact: '24px',
     heading6: '24px',
     heading5: '32px',
     heading4: '36px',
@@ -203,6 +205,7 @@ export const lineHeights = stylex.defineVars({
 });
 export const fonts = stylex.defineVars({
     sans: '"Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    heading: '"Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, Menlo, monospace'
 });
 export const fontFeatures = stylex.defineVars({
@@ -214,7 +217,9 @@ export const fontWeights = stylex.defineVars({
     semimedium: '450',
     medium: '500',
     semibold: '600',
-    bold: '700'
+    bold: '700',
+    heavy: '800',
+    heading: '500'
 });
 export const shadows = stylex.defineVars({
     border: '0 0 0 1px light-dark(#00000012, #ffffff12)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trypattern/sdk",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "type": "module",
   "files": [
     "dist",