@trypattern/sdk 0.0.0-stage → 0.1.0

package/dist/tables.js

@@ -0,0 +1,216 @@
+import { z } from 'zod';
+import { canSee, changeRefusal, clashesWith, createRefusal, listRefusal, refusalOutcome, publicRow, readScope } from "./access.js";
+import { EntityStore, WriteRefused, entityCalls } from "./entityStore.js";
+import { MemoryServer } from "./memoryApi.js";
+import { StoreBase } from "./store.js";
+import { seededRows } from "./table.js";
+const STATUS_OUTCOMES = { 401: 'forbidden', 403: 'forbidden', 404: 'missing', 409: 'conflict' };
+export class HttpTableApi {
+    #table;
+    #gate;
+    #url;
+    #onSignedOut;
+    constructor(table, gate, onSignedOut, base = '/api/tables') {
+        this.#table = table;
+        this.#gate = gate;
+        this.#onSignedOut = onSignedOut;
+        this.#url = `${base}/${table.name}`;
+    }
+    list() {
+        return this.#call('list', 'GET', '', undefined, z.array(this.#table.row));
+    }
+    listPublic() {
+        return this.#call('listPublic', 'GET', '/public', undefined, z.array(this.#table.publicRow));
+    }
+    create(row) {
+        return this.#call('create', 'POST', '', row, this.#table.row);
+    }
+    update(row) {
+        return this.#call('update', 'PUT', `/${row.id}`, row, this.#table.row);
+    }
+    async remove(id) {
+        await this.#call('remove', 'DELETE', `/${id}`, undefined, z.unknown());
+    }
+    #call(call, method, path, body, reply) {
+        const name = `${this.#table.name}.${call}`;
+        return this.#gate.pass(name, async () => {
+            const response = await fetch(`${this.#url}${path}`, {
+                method,
+                headers: { 'content-type': 'application/json' },
+                ...(body === undefined ? {} : { body: JSON.stringify(body) })
+            });
+            if (response.status === 401)
+                this.#onSignedOut();
+            const refused = STATUS_OUTCOMES[response.status];
+            if (refused !== undefined && method !== 'GET') {
+                throw new WriteRefused(refused);
+            }
+            if (!response.ok)
+                throw new Error(`${name}: HTTP ${response.status}`);
+            return reply.parse(await response.json());
+        });
+    }
+}
+export class MemoryTableApi {
+    #table;
+    #viewer;
+    #server;
+    #saved;
+    constructor(table, seed, viewer, options) {
+        this.#table = table;
+        this.#viewer = viewer;
+        this.#server = new MemoryServer(table.name, options);
+        this.#saved = seed;
+    }
+    list() {
+        return this.#server.reply('list', () => {
+            const viewer = this.#viewer();
+            if (listRefusal(this.#table, viewer) !== undefined) {
+                throw new Error(`${this.#table.name}.list: not allowed`);
+            }
+            return this.#saved.filter((row) => canSee(this.#table, viewer, row));
+        });
+    }
+    listPublic() {
+        return this.#server.reply('listPublic', () => this.#saved.map((row) => publicRow(this.#table, row)));
+    }
+    create(row) {
+        return this.#server.reply('create', () => {
+            const viewer = this.#viewer();
+            const refusal = createRefusal(this.#table, viewer);
+            if (refusal !== undefined)
+                throw new WriteRefused(refusalOutcome(refusal));
+            if (this.#table.owned && viewer === null) {
+                throw new WriteRefused('forbidden');
+            }
+            const saved = this.#table.owned && viewer !== null
+                ? { ...row, ownerId: viewer.userId }
+                : { ...row };
+            this.#refuseClash(saved);
+            this.#saved = [...this.#saved, saved];
+            return saved;
+        });
+    }
+    update(row) {
+        return this.#server.reply('update', () => {
+            const existing = this.#allowedChange('update', row.id);
+            const saved = existing.ownerId === undefined
+                ? { ...row }
+                : { ...row, ownerId: existing.ownerId };
+            this.#refuseClash(saved);
+            this.#saved = this.#saved.map((item) => item.id === saved.id ? saved : item);
+            return saved;
+        });
+    }
+    remove(id) {
+        return this.#server.reply('remove', () => {
+            this.#allowedChange('delete', id);
+            this.#saved = this.#saved.filter((item) => item.id !== id);
+        });
+    }
+    #allowedChange(operation, id) {
+        const existing = this.#saved.find((item) => item.id === id);
+        const refusal = changeRefusal(this.#table, operation, this.#viewer(), existing);
+        if (refusal !== undefined || existing === undefined) {
+            throw new WriteRefused(refusalOutcome(refusal ?? 'missing'));
+        }
+        return existing;
+    }
+    #refuseClash(row) {
+        if (clashesWith(this.#table, this.#saved, row)) {
+            throw new WriteRefused('conflict');
+        }
+    }
+}
+function eachTable(tables, api) {
+    return Object.fromEntries(Object.entries(tables).map(([key, table]) => [key, api(table)]));
+}
+export function httpTables(tables, gate, onSignedOut) {
+    return eachTable(tables, (table) => new HttpTableApi(table, gate, onSignedOut));
+}
+export function memoryTables(tables, seed, viewer, options) {
+    return eachTable(tables, (table) => new MemoryTableApi(table, seededRows(seed, table.name), viewer, options));
+}
+export function tableCalls(tables) {
+    return Object.values(tables).flatMap((table) => [...entityCalls, ...(table.public.length > 0 ? ['listPublic'] : [])].map((call) => `${table.name}.${call}`));
+}
+export function publicStoreName(table) {
+    return `public${table.charAt(0).toUpperCase()}${table.slice(1)}`;
+}
+export class PublicTableStore extends StoreBase {
+    #loading;
+    constructor(table, { api, cache }) {
+        super({
+            list: () => api.listPublic(),
+            cache: cache.scope(`anon:${publicStoreName(table.name)}`, z.array(table.publicRow))
+        });
+    }
+    initialState() {
+        const cached = this.deps.cache.read();
+        return {
+            status: cached === undefined ? 'idle' : 'ready',
+            items: cached ?? []
+        };
+    }
+    load() {
+        this.#loading ??= this.#fetch().finally(() => {
+            this.#loading = undefined;
+        });
+        return this.#loading;
+    }
+    async #fetch() {
+        if (this.state.status !== 'ready')
+            this.set({ status: 'loading' });
+        try {
+            const items = await this.deps.list();
+            this.deps.cache.write(items);
+            this.set({ status: 'ready', items });
+        }
+        catch {
+            if (this.state.status === 'loading')
+                this.set({ status: 'failed' });
+        }
+    }
+}
+export class TableStore extends EntityStore {
+    #table;
+    #viewer;
+    #publicView;
+    constructor(table, { api, cache, viewer, publicView }) {
+        super({
+            api,
+            writes: table.writes,
+            cache: cache.scope(() => `${viewer()?.userId ?? 'anon'}:${table.name}`, z.array(table.row))
+        });
+        this.#table = table;
+        this.#viewer = viewer;
+        this.#publicView = publicView;
+    }
+    get mayRead() {
+        return readScope(this.#table, this.#viewer()) !== 'none';
+    }
+    load() {
+        return this.mayRead ? super.load() : Promise.resolve();
+    }
+    async create(fields) {
+        const ownerId = this.#viewer()?.userId;
+        return this.#refreshPublic(await super.create({
+            ...fields,
+            id: crypto.randomUUID(),
+            createdAt: new Date().toISOString(),
+            ...(this.#table.owned && ownerId !== undefined ? { ownerId } : {})
+        }));
+    }
+    async update(row) {
+        return this.#refreshPublic(await super.update(row));
+    }
+    async remove(id) {
+        return this.#refreshPublic(await super.remove(id));
+    }
+    #refreshPublic(outcome) {
+        if (outcome === 'saved' || outcome === 'conflict') {
+            void this.#publicView?.load();
+        }
+        return outcome;
+    }
+}

package/dist/theme/reset.css

@@ -0,0 +1,84 @@
+@layer reset {
+  :root {
+    color-scheme: light dark;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body,
+  #root {
+    height: 100%;
+    overflow: hidden;
+    overscroll-behavior: none;
+  }
+
+  body {
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  input,
+  textarea,
+  [contenteditable]:not([contenteditable='false']) {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  a,
+  button,
+  label,
+  select,
+  summary,
+  [role='button'],
+  [role='link'],
+  input[type='button'],
+  input[type='checkbox'],
+  input[type='color'],
+  input[type='file'],
+  input[type='radio'],
+  input[type='range'],
+  input[type='reset'],
+  input[type='submit'] {
+    cursor: default;
+  }
+
+  button {
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  figure,
+  blockquote,
+  ul,
+  ol {
+    margin: 0;
+  }
+}

package/dist/theme/scales.d.ts

@@ -0,0 +1,76 @@
+export declare const ascendingScales: {
+    readonly space: readonly ["xxs", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"];
+    readonly controlHeights: readonly ["heightXs", "heightSm", "heightMd", "heightLg", "heightXl"];
+    readonly controlPaddings: readonly ["paddingXs", "paddingSm", "paddingMd", "paddingLg", "paddingXl"];
+    readonly controlGaps: readonly ["gapXs", "gapSm", "gapMd", "gapLg", "gapXl"];
+    readonly contentWidths: readonly ["contentXs", "contentSm", "contentMd", "contentLg"];
+    readonly iconSizes: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly fontSizes: readonly ["captionXs", "captionSm", "captionBase", "captionLg", "bodySm", "bodyBase", "bodyLg", "heading6", "heading5", "heading4", "heading3", "heading2", "heading1"];
+    readonly lineHeights: readonly ["captionXs", "caption", "title", "bodySm", "body", "heading6", "heading5", "heading4", "heading3", "heading2", "heading1"];
+};
+export declare const scaleGroups: {
+    readonly space: "space";
+    readonly controlHeights: "controls";
+    readonly controlPaddings: "controls";
+    readonly controlGaps: "controls";
+    readonly contentWidths: "widths";
+    readonly iconSizes: "iconSizes";
+    readonly fontSizes: "fontSizes";
+    readonly lineHeights: "lineHeights";
+};
+export declare const textInControls: readonly [{
+    readonly size: "xs";
+    readonly height: "heightXs";
+    readonly lineHeight: "caption";
+}, {
+    readonly size: "sm";
+    readonly height: "heightSm";
+    readonly lineHeight: "bodySm";
+}, {
+    readonly size: "md";
+    readonly height: "heightMd";
+    readonly lineHeight: "bodySm";
+}, {
+    readonly size: "lg";
+    readonly height: "heightLg";
+    readonly lineHeight: "bodySm";
+}, {
+    readonly size: "xl";
+    readonly height: "heightXl";
+    readonly lineHeight: "body";
+}];
+export declare const textLines: readonly [{
+    readonly lineHeight: "captionXs";
+    readonly fontSize: "captionXs";
+}, {
+    readonly lineHeight: "caption";
+    readonly fontSize: "captionLg";
+}, {
+    readonly lineHeight: "title";
+    readonly fontSize: "bodyBase";
+}, {
+    readonly lineHeight: "bodySm";
+    readonly fontSize: "bodySm";
+}, {
+    readonly lineHeight: "body";
+    readonly fontSize: "bodyBase";
+}, {
+    readonly lineHeight: "heading6";
+    readonly fontSize: "heading6";
+}, {
+    readonly lineHeight: "heading5";
+    readonly fontSize: "heading5";
+}, {
+    readonly lineHeight: "heading4";
+    readonly fontSize: "heading4";
+}, {
+    readonly lineHeight: "heading3";
+    readonly fontSize: "heading3";
+}, {
+    readonly lineHeight: "heading2";
+    readonly fontSize: "heading2";
+}, {
+    readonly lineHeight: "heading1";
+    readonly fontSize: "heading1";
+}];
+export declare const pixelGroups: readonly ["space", "controls", "iconSizes", "fontSizes", "lineHeights", "borders", "radii", "widths"];

package/dist/theme/scales.js

@@ -0,0 +1,82 @@
+export const ascendingScales = {
+    space: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+    controlHeights: ['heightXs', 'heightSm', 'heightMd', 'heightLg', 'heightXl'],
+    controlPaddings: [
+        'paddingXs',
+        'paddingSm',
+        'paddingMd',
+        'paddingLg',
+        'paddingXl'
+    ],
+    controlGaps: ['gapXs', 'gapSm', 'gapMd', 'gapLg', 'gapXl'],
+    contentWidths: ['contentXs', 'contentSm', 'contentMd', 'contentLg'],
+    iconSizes: ['xs', 'sm', 'md', 'lg', 'xl'],
+    fontSizes: [
+        'captionXs',
+        'captionSm',
+        'captionBase',
+        'captionLg',
+        'bodySm',
+        'bodyBase',
+        'bodyLg',
+        'heading6',
+        'heading5',
+        'heading4',
+        'heading3',
+        'heading2',
+        'heading1'
+    ],
+    lineHeights: [
+        'captionXs',
+        'caption',
+        'title',
+        'bodySm',
+        'body',
+        'heading6',
+        'heading5',
+        'heading4',
+        'heading3',
+        'heading2',
+        'heading1'
+    ]
+};
+export const scaleGroups = {
+    space: 'space',
+    controlHeights: 'controls',
+    controlPaddings: 'controls',
+    controlGaps: 'controls',
+    contentWidths: 'widths',
+    iconSizes: 'iconSizes',
+    fontSizes: 'fontSizes',
+    lineHeights: 'lineHeights'
+};
+export const textInControls = [
+    { size: 'xs', height: 'heightXs', lineHeight: 'caption' },
+    { size: 'sm', height: 'heightSm', lineHeight: 'bodySm' },
+    { size: 'md', height: 'heightMd', lineHeight: 'bodySm' },
+    { size: 'lg', height: 'heightLg', lineHeight: 'bodySm' },
+    { size: 'xl', height: 'heightXl', lineHeight: 'body' }
+];
+export const textLines = [
+    { lineHeight: 'captionXs', fontSize: 'captionXs' },
+    { lineHeight: 'caption', fontSize: 'captionLg' },
+    { lineHeight: 'title', fontSize: 'bodyBase' },
+    { lineHeight: 'bodySm', fontSize: 'bodySm' },
+    { lineHeight: 'body', fontSize: 'bodyBase' },
+    { lineHeight: 'heading6', fontSize: 'heading6' },
+    { lineHeight: 'heading5', fontSize: 'heading5' },
+    { lineHeight: 'heading4', fontSize: 'heading4' },
+    { lineHeight: 'heading3', fontSize: 'heading3' },
+    { lineHeight: 'heading2', fontSize: 'heading2' },
+    { lineHeight: 'heading1', fontSize: 'heading1' }
+];
+export const pixelGroups = [
+    'space',
+    'controls',
+    'iconSizes',
+    'fontSizes',
+    'lineHeights',
+    'borders',
+    'radii',
+    'widths'
+];

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

@@ -0,0 +1,218 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const breakpoints: {
+    compact: string;
+    reducedMotion: string;
+    coarsePointer: string;
+};
+export declare const colors: stylex.VarGroup<Readonly<{
+    blackFill: string;
+    blackTransparent: string;
+    borderDefault: string;
+    borderInverted: string;
+    borderOnStandout: string;
+    borderStrong: string;
+    borderStrongSolid: string;
+    borderSubtle: string;
+    brandBorderDefault: string;
+    brandBorderFocus: string;
+    brandBorderSubtle: string;
+    brandGradientSubtle: string;
+    brandForeground: string;
+    brandSolid: string;
+    brandSolidActive: string;
+    brandSolidHover: string;
+    brandSubtle: string;
+    brandSubtleHover: string;
+    card: string;
+    component: string;
+    componentActive: string;
+    componentHover: string;
+    componentOnContainerStrong: string;
+    componentOnContainerStrongHover: string;
+    componentOnContainerSubtle: string;
+    componentOnContainerSubtleHover: string;
+    componentOnInverted: string;
+    componentOnSunken: string;
+    container: string;
+    containerRecessed: string;
+    dangerBorderDefault: string;
+    dangerBorderSubtle: string;
+    dangerForeground: string;
+    dangerSolid: string;
+    dangerSolidActive: string;
+    dangerSolidHover: string;
+    dangerSubtle: string;
+    dangerSubtleActive: string;
+    dangerSubtleHover: string;
+    disabled: string;
+    divider: string;
+    disabledForeground: string;
+    invertedSolid: string;
+    invertedSolidActive: string;
+    invertedSolidHover: string;
+    modal: string;
+    onBrandSolidForeground: string;
+    onBrandSubtleForeground: string;
+    onDangerSolidForeground: string;
+    onDangerSubtleForeground: string;
+    onInvertedForeground: string;
+    onPositiveSolidForeground: string;
+    onPositiveSubtleForeground: string;
+    onStandoutPrimaryForeground: string;
+    onStandoutSecondaryForeground: string;
+    onWarningSolidForeground: string;
+    onWarningSubtleForeground: string;
+    page: string;
+    positiveBorderDefault: string;
+    positiveForeground: string;
+    positiveSolid: string;
+    positiveSolidHover: string;
+    positiveSubtle: string;
+    positiveSubtleHover: string;
+    primaryForeground: string;
+    secondaryForeground: string;
+    secondaryForegroundSolid: string;
+    shell: string;
+    standout: string;
+    sunken: string;
+    tertiaryForeground: string;
+    transparent: string;
+    transparentActive: string;
+    transparentHover: string;
+    warningBorderDefault: string;
+    warningForeground: string;
+    warningSolid: string;
+    warningSolidHover: string;
+    warningSubtle: string;
+    warningSubtleHover: string;
+    whiteFill: string;
+    dangerText: string;
+    indicatorBorder: string;
+    overlay: string;
+}>, symbol>;
+export declare const space: stylex.VarGroup<Readonly<{
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+}>, symbol>;
+export declare const controls: stylex.VarGroup<Readonly<{
+    heightXs: string;
+    heightSm: string;
+    heightMd: string;
+    heightLg: string;
+    heightXl: string;
+    paddingXs: string;
+    paddingSm: string;
+    paddingMd: string;
+    paddingLg: string;
+    paddingXl: string;
+    gapXs: string;
+    gapSm: string;
+    gapMd: string;
+    gapLg: string;
+    gapXl: string;
+}>, symbol>;
+export declare const iconSizes: stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}>, symbol>;
+export declare const borders: stylex.VarGroup<Readonly<{
+    hairline: string;
+    thin: string;
+}>, symbol>;
+export declare const widths: stylex.VarGroup<Readonly<{
+    contentXs: string;
+    contentSm: string;
+    contentMd: string;
+    contentLg: string;
+    sidebar: string;
+    toast: string;
+}>, symbol>;
+export declare const layers: {
+    scrim: string;
+    sidebar: string;
+    menu: string;
+    tooltip: string;
+    dialog: string;
+    toast: string;
+};
+export declare const radii: stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+    xxxxl: string;
+    full: string;
+}>, symbol>;
+export declare const fontSizes: stylex.VarGroup<Readonly<{
+    captionXs: string;
+    captionSm: string;
+    captionBase: string;
+    captionLg: string;
+    bodySm: string;
+    bodyBase: string;
+    bodyLg: string;
+    heading6: string;
+    heading5: string;
+    heading4: string;
+    heading3: string;
+    heading2: string;
+    heading1: string;
+}>, symbol>;
+export declare const lineHeights: stylex.VarGroup<Readonly<{
+    captionXs: string;
+    caption: string;
+    title: string;
+    bodySm: string;
+    body: string;
+    heading6: string;
+    heading5: string;
+    heading4: string;
+    heading3: string;
+    heading2: string;
+    heading1: string;
+}>, symbol>;
+export declare const fonts: stylex.VarGroup<Readonly<{
+    sans: string;
+    mono: string;
+}>, symbol>;
+export declare const fontFeatures: stylex.VarGroup<Readonly<{
+    sans: string;
+    kbd: string;
+}>, symbol>;
+export declare const fontWeights: stylex.VarGroup<Readonly<{
+    normal: string;
+    semimedium: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+}>, symbol>;
+export declare const shadows: stylex.VarGroup<Readonly<{
+    border: string;
+    default: string;
+    large: string;
+    extraLarge: string;
+}>, symbol>;
+export declare const motion: stylex.VarGroup<Readonly<{
+    easeOut: string;
+    easeInOut: string;
+    slideEasing: string;
+    instant: string;
+    exit: string;
+    fast: string;
+    base: string;
+    slide: string;
+    pulse: string;
+    spin: string;
+}>, symbol>;