@trypattern/sdk 0.0.0-stage → 0.1.1

package/dist/components/frame.d.ts

@@ -0,0 +1,4 @@
+export type Frame = {
+    onToggleSidebar: () => void;
+};
+export declare const FrameContext: import("react").Context<Frame | null>;

package/dist/components/frame.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const FrameContext = createContext(null);

package/dist/components/icons.d.ts

@@ -0,0 +1,59 @@
+import type { AppIconName } from '../registered.ts';
+type FilledDrawing = {
+    readonly fill: string | readonly string[];
+    readonly rule?: 'evenodd';
+};
+export type IconDrawing = string | readonly string[] | FilledDrawing;
+export type IconName = keyof typeof builtInIcons | AppIconName;
+declare const builtInIcons: {
+    home: string[];
+    folder: string[];
+    settings: string[];
+    sun: {
+        fill: string[];
+    };
+    moon: {
+        fill: string;
+    };
+    monitor: {
+        fill: string[];
+        rule: "evenodd";
+    };
+    close: string;
+    chevronUpDown: string;
+    check: string;
+    plus: string;
+    trash: string[];
+    checkCircle: string[];
+    alertCircle: string[];
+    chevronDown: string;
+    chevronRight: string;
+    search: string[];
+    panelLeft: string[];
+    more: {
+        fill: string[];
+    };
+    help: string[];
+    bell: string[];
+    enter: string;
+    arrowLeft: string;
+    arrowUp: string;
+    arrowUpRight: string;
+    circle: string;
+    copy: string[];
+    arrowDown: string;
+    logOut: string[];
+};
+export declare const builtInIconNames: string[];
+export declare function defineIcons<const Icons extends Record<string, IconDrawing>>(icons: Icons): Icons;
+export declare function setAppIcons(icons: Readonly<Record<string, IconDrawing>>): void;
+export declare function shapeOf(name: IconName): {
+    paths: readonly string[];
+    isFilled: boolean;
+    rule?: never;
+} | {
+    paths: string[];
+    isFilled: boolean;
+    rule: "evenodd" | undefined;
+};
+export {};

package/dist/components/icons.js

@@ -0,0 +1,111 @@
+const builtInIcons = {
+    home: [
+        'M14.25 20.25H18.25C19.3546 20.25 20.25 19.3546 20.25 18.25V9.90496C20.25 9.32928 20.0019 8.78149 19.5702 8.40225L13.3202 2.91021C12.5644 2.24604 11.4356 2.24604 10.6798 2.91021L4.42977 8.40225C3.99813 8.78149 3.75 9.32928 3.75 9.90496V18.25C3.75 19.3546 4.64543 20.25 5.75 20.25H9.75V16.75C9.75 15.6454 10.6454 14.75 11.75 14.75H12.25C13.3546 14.75 14.25 15.6454 14.25 16.75V20.25Z'
+    ],
+    folder: [
+        'M9.13202 3.75H4.75C3.64543 3.75 2.75 4.64543 2.75 5.75V17.25C2.75 18.3546 3.64543 19.25 4.75 19.25H19.25C20.3546 19.25 21.25 18.3546 21.25 17.25V7.75C21.25 6.64543 20.3546 5.75 19.25 5.75H12.8124C12.2915 5.75 11.7911 5.54674 11.4177 5.18345L10.5267 4.31655C10.1534 3.95326 9.65297 3.75 9.13202 3.75Z',
+        'M2.75 12.75V11.75C2.75 10.6454 3.64543 9.75 4.75 9.75H19.25C20.3546 9.75 21.25 10.6454 21.25 11.75V12.75'
+    ],
+    settings: [
+        'M7.878 5.21415L7.17474 5.05186C6.58003 4.91462 5.95657 5.09343 5.525 5.525C5.09343 5.95657 4.91462 6.58003 5.05186 7.17474L5.21415 7.878C5.40122 8.6886 5.06696 9.53036 4.37477 9.99182L3.51965 10.5619C3.03881 10.8825 2.75 11.4221 2.75 12C2.75 12.5779 3.03881 13.1175 3.51965 13.4381L4.37477 14.0082C5.06696 14.4696 5.40122 15.3114 5.21415 16.122L5.05186 16.8253C4.91462 17.42 5.09343 18.0434 5.525 18.475C5.95657 18.9066 6.58003 19.0854 7.17474 18.9481L7.878 18.7858C8.6886 18.5988 9.53036 18.933 9.99182 19.6252L10.5619 20.4804C10.8825 20.9612 11.4221 21.25 12 21.25C12.5779 21.25 13.1175 20.9612 13.4381 20.4804L14.0082 19.6252C14.4696 18.933 15.3114 18.5988 16.122 18.7858L16.8253 18.9481C17.42 19.0854 18.0434 18.9066 18.475 18.475C18.9066 18.0434 19.0854 17.42 18.9481 16.8253L18.7858 16.122C18.5988 15.3114 18.933 14.4696 19.6252 14.0082L20.4804 13.4381C20.9612 13.1175 21.25 12.5779 21.25 12C21.25 11.4221 20.9612 10.8825 20.4804 10.5619L19.6252 9.99182C18.933 9.53036 18.5988 8.6886 18.7858 7.878L18.9481 7.17473C19.0854 6.58003 18.9066 5.95657 18.475 5.525C18.0434 5.09343 17.42 4.91462 16.8253 5.05186L16.122 5.21415C15.3114 5.40122 14.4696 5.06696 14.0082 4.37477L13.4381 3.51965C13.1175 3.03881 12.5779 2.75 12 2.75C11.4221 2.75 10.8825 3.03881 10.5619 3.51965L9.99182 4.37477C9.53036 5.06696 8.6886 5.40122 7.878 5.21415Z',
+        'M14.75 12C14.75 13.5188 13.5188 14.75 12 14.75C10.4812 14.75 9.25 13.5188 9.25 12C9.25 10.4812 10.4812 9.25 12 9.25C13.5188 9.25 14.75 10.4812 14.75 12Z'
+    ],
+    sun: {
+        fill: [
+            'M13 2C13 1.44772 12.5523 1 12 1C11.4477 1 11 1.44772 11 2V3C11 3.55228 11.4477 4 12 4C12.5523 4 13 3.55228 13 3V2Z',
+            'M13 21C13 20.4477 12.5523 20 12 20C11.4477 20 11 20.4477 11 21V22C11 22.5523 11.4477 23 12 23C12.5523 23 13 22.5523 13 22V21Z',
+            'M19.777 4.22295C20.1675 4.61347 20.1675 5.24664 19.777 5.63716L19.0669 6.34716C18.6764 6.73768 18.0433 6.73768 17.6527 6.34716C17.2622 5.95664 17.2622 5.32347 17.6527 4.93295L18.3627 4.22295C18.7533 3.83242 19.3864 3.83242 19.777 4.22295Z',
+            'M6.34726 19.0671C6.73779 18.6766 6.73779 18.0434 6.34726 17.6529C5.95674 17.2624 5.32357 17.2624 4.93305 17.6529L4.22305 18.3629C3.83253 18.7534 3.83253 19.3866 4.22305 19.7771C4.61357 20.1676 5.24674 20.1676 5.63726 19.7771L6.34726 19.0671Z',
+            'M20 12C20 11.4477 20.4477 11 21 11H22C22.5523 11 23 11.4477 23 12C23 12.5523 22.5523 13 22 13H21C20.4477 13 20 12.5523 20 12Z',
+            'M2 11C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H3C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11H2Z',
+            'M17.6527 17.6529C18.0433 17.2624 18.6764 17.2624 19.0669 17.6529L19.777 18.3629C20.1675 18.7534 20.1675 19.3866 19.777 19.7771C19.3864 20.1676 18.7533 20.1676 18.3627 19.7771L17.6527 19.0671C17.2622 18.6766 17.2622 18.0434 17.6527 17.6529Z',
+            'M5.63726 4.22295C5.24674 3.83242 4.61357 3.83242 4.22305 4.22295C3.83253 4.61347 3.83253 5.24664 4.22305 5.63716L4.93305 6.34716C5.32357 6.73768 5.95674 6.73768 6.34726 6.34716C6.73779 5.95664 6.73779 5.32347 6.34726 4.93295L5.63726 4.22295Z',
+            'M7.75736 7.75736C10.1005 5.41421 13.8995 5.41421 16.2426 7.75736C18.5858 10.1005 18.5858 13.8995 16.2426 16.2426C13.8995 18.5858 10.1005 18.5858 7.75736 16.2426C5.41421 13.8995 5.41421 10.1005 7.75736 7.75736Z'
+        ]
+    },
+    moon: {
+        fill: 'M12.0517 3.59971C12.2712 3.28123 12.2873 2.86472 12.0931 2.53021C11.8989 2.19569 11.5292 2.00315 11.1438 2.03581C6.0214 2.46985 2 6.76372 2 11.9979C2 17.5197 6.47632 21.996 11.9981 21.996C17.2324 21.996 21.5264 17.9745 21.9602 12.8519C21.9929 12.4664 21.8003 12.0968 21.4658 11.9026C21.1313 11.7084 20.7148 11.7246 20.3963 11.9441C19.4302 12.61 18.2602 12.9998 16.9961 12.9998C13.6824 12.9998 10.9961 10.3135 10.9961 6.99976C10.9961 5.73577 11.3858 4.56582 12.0517 3.59971Z'
+    },
+    monitor: {
+        fill: [
+            'M6 3C3.79086 3 2 4.79086 2 7V12H22V7C22 4.79086 20.2091 3 18 3H6Z',
+            'M2 14H22C22 16.2091 20.2091 18 18 18H15V21C15 21.5523 14.5523 22 14 22H10C9.44772 22 9 21.5523 9 21V18H6C3.79086 18 2 16.2091 2 14ZM11 18V20H13V18H11Z'
+        ],
+        rule: 'evenodd'
+    },
+    close: 'M6 6l12 12M18 6 6 18',
+    chevronUpDown: 'M8 9.5 12 5.5l4 4M8 14.5l4 4 4-4',
+    check: 'M5 12.5 9.5 17 19 7.5',
+    plus: 'M12 5v14M5 12h14',
+    trash: [
+        'M4.75 6.75h14.5',
+        'M9.75 6.75v-1a2 2 0 0 1 2-2h.5a2 2 0 0 1 2 2v1',
+        'M6.75 6.75l.8 11.6a2 2 0 0 0 2 1.9h4.9a2 2 0 0 0 2-1.9l.8-11.6'
+    ],
+    checkCircle: [
+        'M3.5 12a8.5 8.5 0 1 0 17 0a8.5 8.5 0 1 0 -17 0',
+        'M8.75 12.25l2.25 2.25 4.25-4.5'
+    ],
+    alertCircle: [
+        'M3.5 12a8.5 8.5 0 1 0 17 0a8.5 8.5 0 1 0 -17 0',
+        'M12 8v4.5',
+        'M11.5 15.75a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0'
+    ],
+    chevronDown: 'M7 10l5 5 5-5',
+    chevronRight: 'M10 7l5 5-5 5',
+    search: ['M4.5 11a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0 -13 0', 'M16 16l4 4'],
+    panelLeft: [
+        'M6.5 4.5h11a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3h-11a3 3 0 0 1 -3 -3v-9a3 3 0 0 1 3 -3Z',
+        'M9.5 4.5v15'
+    ],
+    more: {
+        fill: [
+            'M4.5 12a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0',
+            'M10.5 12a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0',
+            'M16.5 12a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0'
+        ]
+    },
+    help: [
+        'M3.5 12a8.5 8.5 0 1 0 17 0a8.5 8.5 0 1 0 -17 0',
+        'M9.75 9.5a2.25 2.25 0 1 1 3.4 1.95c-.7.4-1.15.9-1.15 1.55v.25',
+        'M11.5 16.5a0.5 0.5 0 1 0 1 0a0.5 0.5 0 1 0 -1 0'
+    ],
+    bell: [
+        'M6.5 16.5h11l-1.25-2V10a4.25 4.25 0 0 0-8.5 0v4.5Z',
+        'M10.25 19a1.9 1.9 0 0 0 3.5 0'
+    ],
+    enter: 'M19 5v6.5a3 3 0 0 1-3 3H5.5M9 10.5l-4 4 4 4',
+    arrowLeft: 'M19 12H5M11 6l-6 6 6 6',
+    arrowUp: 'M12 19V5M6 11l6-6 6 6',
+    arrowUpRight: 'M7 17L17 7M8 7h9v9',
+    circle: 'M3.5 12a8.5 8.5 0 1 0 17 0a8.5 8.5 0 1 0 -17 0',
+    copy: [
+        'M10 9h8.5a1.5 1.5 0 0 1 1.5 1.5V19a1.5 1.5 0 0 1-1.5 1.5H10A1.5 1.5 0 0 1 8.5 19v-8.5A1.5 1.5 0 0 1 10 9z',
+        'M15.5 9V5.5A1.5 1.5 0 0 0 14 4H5.5A1.5 1.5 0 0 0 4 5.5V14a1.5 1.5 0 0 0 1.5 1.5H8.5'
+    ],
+    arrowDown: 'M12 5v14M6 13l6 6 6-6',
+    logOut: [
+        'M14 4.5H7.5a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2H14',
+        'M19.5 12H10M16 8.5l3.5 3.5-3.5 3.5'
+    ]
+};
+const builtIns = new Map(Object.entries(builtInIcons));
+let appIcons = new Map();
+export const builtInIconNames = Object.keys(builtInIcons);
+export function defineIcons(icons) {
+    return icons;
+}
+export function setAppIcons(icons) {
+    appIcons = new Map(Object.entries(icons));
+}
+export function shapeOf(name) {
+    const drawing = appIcons.get(name) ?? builtIns.get(name) ?? [];
+    if (typeof drawing === 'string')
+        return { paths: [drawing], isFilled: false };
+    if (isPathList(drawing))
+        return { paths: drawing, isFilled: false };
+    return { paths: [drawing.fill].flat(), isFilled: true, rule: drawing.rule };
+}
+function isPathList(drawing) {
+    return Array.isArray(drawing);
+}

package/dist/components/interaction.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export type Interaction = {
+    primitive: 'AppFrame' | 'Button' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup';
+    event: 'click' | 'change' | 'select' | 'open' | 'close' | 'submit' | 'navigate';
+    label: string;
+    page: string | null;
+};
+type Reported = Omit<Interaction, 'page'>;
+export declare function setInteractionSink(next: (interaction: Reported) => void): void;
+export declare function interact(interaction: Reported): void;
+export declare function textOf(node: ReactNode): string;
+export {};

package/dist/components/interaction.js

@@ -0,0 +1,22 @@
+import { Children, isValidElement } from 'react';
+let sink = () => undefined;
+export function setInteractionSink(next) {
+    sink = next;
+}
+export function interact(interaction) {
+    sink(interaction);
+}
+export function textOf(node) {
+    return Children.toArray(node)
+        .map((part) => {
+        if (typeof part === 'string' || typeof part === 'number') {
+            return String(part);
+        }
+        if (isValidElement(part)) {
+            return textOf(part.props.children);
+        }
+        return '';
+    })
+        .join('')
+        .trim();
+}

package/dist/components/spacing.d.ts

@@ -0,0 +1,118 @@
+import * as stylex from '@stylexjs/stylex';
+export type SpaceName = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+export declare const gaps: Readonly<{
+    readonly none: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", 0>;
+    }>;
+    readonly xxs: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly xs: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly xl: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly xxl: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly xxxl: Readonly<{
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+    }>;
+}>;
+export declare const paddings: Readonly<{
+    readonly none: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+    }>;
+    readonly xxs: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly xs: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly xl: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly xxl: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+    readonly xxxl: Readonly<{
+        readonly padding: stylex.StyleXClassNameFor<"padding", string>;
+    }>;
+}>;
+export declare const paddingBlocks: Readonly<{
+    readonly none: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+    }>;
+    readonly xxs: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+    }>;
+    readonly xs: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+    }>;
+    readonly xl: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+    }>;
+    readonly xxl: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+    }>;
+    readonly xxxl: Readonly<{
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+    }>;
+}>;
+export declare const paddingInlines: Readonly<{
+    readonly none: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+    }>;
+    readonly xxs: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly xs: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly sm: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly md: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly lg: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly xl: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly xxl: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+    readonly xxxl: Readonly<{
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+    }>;
+}>;

package/dist/components/spacing.js

@@ -0,0 +1,46 @@
+import * as stylex from '@stylexjs/stylex';
+import { space } from "../theme/tokens.stylex.js";
+export const gaps = stylex.create({
+    none: { gap: 0 },
+    xxs: { gap: space.xxs },
+    xs: { gap: space.xs },
+    sm: { gap: space.sm },
+    md: { gap: space.md },
+    lg: { gap: space.lg },
+    xl: { gap: space.xl },
+    xxl: { gap: space.xxl },
+    xxxl: { gap: space.xxxl }
+});
+export const paddings = stylex.create({
+    none: { padding: 0 },
+    xxs: { padding: space.xxs },
+    xs: { padding: space.xs },
+    sm: { padding: space.sm },
+    md: { padding: space.md },
+    lg: { padding: space.lg },
+    xl: { padding: space.xl },
+    xxl: { padding: space.xxl },
+    xxxl: { padding: space.xxxl }
+});
+export const paddingBlocks = stylex.create({
+    none: { paddingBlock: 0 },
+    xxs: { paddingBlock: space.xxs },
+    xs: { paddingBlock: space.xs },
+    sm: { paddingBlock: space.sm },
+    md: { paddingBlock: space.md },
+    lg: { paddingBlock: space.lg },
+    xl: { paddingBlock: space.xl },
+    xxl: { paddingBlock: space.xxl },
+    xxxl: { paddingBlock: space.xxxl }
+});
+export const paddingInlines = stylex.create({
+    none: { paddingInline: 0 },
+    xxs: { paddingInline: space.xxs },
+    xs: { paddingInline: space.xs },
+    sm: { paddingInline: space.sm },
+    md: { paddingInline: space.md },
+    lg: { paddingInline: space.lg },
+    xl: { paddingInline: space.xl },
+    xxl: { paddingInline: space.xxl },
+    xxxl: { paddingInline: space.xxxl }
+});

package/dist/components/tones.d.ts

@@ -0,0 +1,28 @@
+import * as stylex from '@stylexjs/stylex';
+export type Tone = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'brand' | 'danger' | 'positive' | 'warning';
+export declare const tones: Readonly<{
+    readonly inherit: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "inherit">;
+    }>;
+    readonly primary: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly secondary: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly tertiary: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly brand: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly danger: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly positive: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+    readonly warning: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+    }>;
+}>;

package/dist/components/tones.js

@@ -0,0 +1,12 @@
+import * as stylex from '@stylexjs/stylex';
+import { colors } from "../theme/tokens.stylex.js";
+export const tones = stylex.create({
+    inherit: { color: 'inherit' },
+    primary: { color: colors.primaryForeground },
+    secondary: { color: colors.secondaryForeground },
+    tertiary: { color: colors.tertiaryForeground },
+    brand: { color: colors.brandForeground },
+    danger: { color: colors.dangerForeground },
+    positive: { color: colors.positiveForeground },
+    warning: { color: colors.warningForeground }
+});

package/dist/entityStore.d.ts

@@ -0,0 +1,46 @@
+import type { WriteOutcome } from './access.ts';
+import type { Cached } from './cache.ts';
+import { StoreBase } from './store.ts';
+import type { Writes } from './table.ts';
+export type Entity = {
+    id: string;
+};
+export type EntityApi<T extends Entity> = {
+    list: () => Promise<readonly T[]>;
+    create: (entity: T) => Promise<T>;
+    update: (entity: T) => Promise<T>;
+    remove: (id: string) => Promise<void>;
+};
+export type EntityCall = keyof EntityApi<Entity>;
+export declare const entityCalls: readonly EntityCall[];
+export type PendingWrite<T extends Entity> = {
+    kind: 'create' | 'update';
+    id: string;
+    row: T;
+} | {
+    kind: 'remove';
+    id: string;
+};
+export type EntitySnapshot<T extends Entity> = {
+    status: 'idle' | 'loading' | 'ready' | 'failed';
+    items: readonly T[];
+    pending: readonly PendingWrite<T>[];
+};
+export type EntityDeps<T extends Entity> = {
+    api: EntityApi<T>;
+    cache: Cached<readonly T[]>;
+    writes: Writes;
+};
+export declare class WriteRefused extends Error {
+    readonly outcome: Exclude<WriteOutcome, 'saved' | 'failed'>;
+    constructor(outcome: Exclude<WriteOutcome, 'saved' | 'failed'>);
+}
+export declare class EntityStore<T extends Entity> extends StoreBase<EntitySnapshot<T>, EntityDeps<T>> {
+    #private;
+    protected initialState(): EntitySnapshot<T>;
+    load(): Promise<void>;
+    create(row: T): Promise<WriteOutcome>;
+    update(row: T): Promise<WriteOutcome>;
+    remove(id: string): Promise<WriteOutcome>;
+    forget(): void;
+}

package/dist/entityStore.js

@@ -0,0 +1,160 @@
+import { StoreBase } from "./store.js";
+export const entityCalls = [
+    'list',
+    'create',
+    'update',
+    'remove'
+];
+export class WriteRefused extends Error {
+    outcome;
+    constructor(outcome) {
+        super(`The server refused the write: ${outcome}`);
+        this.outcome = outcome;
+    }
+}
+function apply(items, write) {
+    if (write.kind === 'remove') {
+        return items.filter((item) => item.id !== write.id);
+    }
+    const { row } = write;
+    return items.some((item) => item.id === row.id)
+        ? items.map((item) => (item.id === row.id ? row : item))
+        : [...items, row];
+}
+function outcomeOf(failure) {
+    return failure instanceof WriteRefused ? failure.outcome : 'failed';
+}
+function isSameJson(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (typeof a !== 'object' || typeof b !== 'object' || !a || !b)
+        return false;
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    return (aKeys.length === bKeys.length &&
+        aKeys.every((key) => isSameJson(Reflect.get(a, key), Reflect.get(b, key))));
+}
+function sameElements(a, b) {
+    return a.length === b.length && a.every((item, index) => item === b[index]);
+}
+function share(previous, next) {
+    const before = new Map(previous.map((item) => [item.id, item]));
+    const shared = next.map((item) => {
+        const kept = before.get(item.id);
+        return kept !== undefined && isSameJson(kept, item) ? kept : item;
+    });
+    return sameElements(previous, shared) ? previous : shared;
+}
+export class EntityStore extends StoreBase {
+    #server = this.state.items;
+    #queue = [];
+    #completedWrites = 0;
+    #generation = 0;
+    #loading;
+    initialState() {
+        const cached = this.deps.cache.read();
+        return {
+            status: cached === undefined ? 'idle' : 'ready',
+            items: cached ?? [],
+            pending: []
+        };
+    }
+    load() {
+        this.#loading ??= this.#fetch().finally(() => {
+            this.#loading = undefined;
+        });
+        return this.#loading;
+    }
+    create(row) {
+        return this.#write({ kind: 'create', id: row.id, row }, async () => ({
+            kind: 'create',
+            id: row.id,
+            row: await this.deps.api.create(row)
+        }));
+    }
+    update(row) {
+        return this.#write({ kind: 'update', id: row.id, row }, async () => ({
+            kind: 'update',
+            id: row.id,
+            row: await this.deps.api.update(row)
+        }));
+    }
+    remove(id) {
+        return this.#write({ kind: 'remove', id }, async () => {
+            await this.deps.api.remove(id);
+            return { kind: 'remove', id };
+        });
+    }
+    forget() {
+        this.#generation += 1;
+        this.#server = [];
+        this.#queue = [];
+        this.#loading = undefined;
+        this.set({ status: 'idle', items: [], pending: [] });
+    }
+    async #fetch() {
+        if (this.state.status !== 'ready')
+            this.set({ status: 'loading' });
+        const writesBefore = this.#completedWrites;
+        const generation = this.#generation;
+        try {
+            const items = await this.deps.api.list();
+            if (generation !== this.#generation)
+                return;
+            if (writesBefore !== this.#completedWrites)
+                return this.#fetch();
+            this.#server = items;
+            this.deps.cache.write(items);
+            this.#publish({ status: 'ready' });
+        }
+        catch {
+            if (generation !== this.#generation)
+                return;
+            if (this.state.status === 'loading')
+                this.set({ status: 'failed' });
+        }
+    }
+    async #write(write, send) {
+        const generation = this.#generation;
+        this.#queue = [...this.#queue, write];
+        this.#publish();
+        try {
+            const confirmed = await send();
+            if (generation !== this.#generation)
+                return 'failed';
+            this.#saved(confirmed);
+            return 'saved';
+        }
+        catch (failure) {
+            const outcome = outcomeOf(failure);
+            if (outcome === 'missing' && generation === this.#generation) {
+                this.#saved({ kind: 'remove', id: write.id });
+            }
+            return outcome;
+        }
+        finally {
+            if (generation === this.#generation) {
+                this.#queue = this.#queue.filter((queued) => queued !== write);
+                this.#publish();
+            }
+        }
+    }
+    #saved(write) {
+        this.#server = apply(this.#server, write);
+        this.#completedWrites += 1;
+        this.deps.cache.write(this.#server);
+    }
+    #publish(patch = {}) {
+        const { items, pending } = this.state;
+        const shown = this.deps.writes === 'optimistic'
+            ? this.#queue.reduce(apply, this.#server)
+            : this.#server;
+        this.set({
+            ...patch,
+            items: share(items, shown),
+            pending: sameElements(pending, this.#queue) ? pending : this.#queue
+        });
+    }
+}

package/dist/flows/accessFlows.d.ts

@@ -0,0 +1,9 @@
+import type { AppClass, RunningApp } from '../app.ts';
+import type { Tables } from '../table.ts';
+type AnyApp = RunningApp<unknown, {
+    readonly path: string;
+}>;
+export declare function accessFlows<Group extends Tables>({ App }: {
+    App: AppClass<Group, AnyApp>;
+}): void;
+export {};