@trypattern/sdk 0.1.8 → 0.1.10

package/dist/components/PlainSidebar.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import * as stylex from '@stylexjs/stylex';
+import { NavLink } from 'react-router';
+import { borders, breakpoints, colors, controls, fontSizes, fontWeights, layers, lineHeights, motion, radii, shadows, space, widths } from "../theme/tokens.stylex.js";
+import { Avatar } from "./Avatar.js";
+import { Badge } from "./Badge.js";
+import { focusRing, transparentLook } from "./controlLook.js";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { interact } from "./interaction.js";
+import { MenuItems } from "./MenuItems.js";
+import { Popup } from "./Popup.js";
+import { ScrollArea } from "./ScrollArea.js";
+import { Text } from "./Text.js";
+export function PlainSidebar({ title, user, accountMenu, links, isToggled, isAnimating, onFollowLink, onSearch }) {
+    const followLink = (link) => {
+        interact({ primitive: 'AppFrame', event: 'navigate', label: link.label });
+        onFollowLink();
+    };
+    return (_jsxs("nav", { ...stylex.props(styles.sidebar, isToggled && styles.sidebarToggled, isAnimating && styles.sidebarAnimating), children: [_jsx("div", { ...stylex.props(styles.header), children: _jsx("span", { ...stylex.props(styles.title), children: title }) }), onSearch === undefined ? null : (_jsx(Button, { variant: "secondary", icon: "search", shortcut: ['mod', 'k'], isFullWidth: true, onClick: onSearch, children: "Search" })), _jsx("div", { ...stylex.props(styles.body), children: _jsx(ScrollArea, { children: _jsx("div", { ...stylex.props(styles.group), children: 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, weight: "light" }), _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))) }) }) }), user === null ? null : (_jsxs(BaseMenu.Root, { children: [_jsxs(BaseMenu.Trigger, { className: (state) => stylex.props(styles.account, transparentLook.rest, transparentLook.hoverable, state.open && transparentLook.open, styles.accountText, focusRing.visible).className, children: [_jsx(Avatar, { name: user.name, imageUrl: user.avatarUrl }), _jsxs("span", { ...stylex.props(styles.who), children: [_jsx("span", { ...stylex.props(styles.name), children: user.name }), _jsx("span", { ...stylex.props(styles.email), children: user.email })] }), _jsx(Icon, { name: "chevronUpDown", tone: "secondary" })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: "top", align: "start", sideOffset: 4, className: stylex.props(styles.positioner).className, children: _jsx(BaseMenu.Popup, { render: (props, state) => (_jsx(Popup, { ...props, kind: "menu", isOpen: state.open, transitionStatus: state.transitionStatus })), children: _jsx(MenuItems, { items: accountMenu, primitive: "Menu" }) }) }) })] }))] }));
+}
+const styles = stylex.create({
+    sidebar: {
+        position: {
+            default: 'relative',
+            [breakpoints.compact]: 'fixed'
+        },
+        insetBlock: {
+            default: null,
+            [breakpoints.compact]: 0
+        },
+        insetInlineStart: {
+            default: null,
+            [breakpoints.compact]: 0
+        },
+        zIndex: {
+            default: null,
+            [breakpoints.compact]: layers.sidebar
+        },
+        display: 'flex',
+        visibility: {
+            default: null,
+            [breakpoints.compact]: 'hidden'
+        },
+        flexShrink: 0,
+        flexDirection: 'column',
+        gap: space.lg,
+        width: widths.sidebar,
+        height: '100%',
+        paddingBlock: space.lg,
+        paddingInline: space.md,
+        backgroundColor: colors.page,
+        borderInlineEndColor: colors.borderDefault,
+        borderInlineEndStyle: {
+            default: 'solid',
+            [breakpoints.compact]: 'none'
+        },
+        borderInlineEndWidth: borders.thin,
+        boxShadow: {
+            default: null,
+            [breakpoints.compact]: shadows.extraLarge
+        },
+        transform: {
+            default: null,
+            [breakpoints.compact]: 'translateX(-100%)'
+        }
+    },
+    sidebarAnimating: {
+        transitionTimingFunction: motion.slideEasing,
+        transitionDuration: motion.slide,
+        transitionProperty: 'transform, visibility'
+    },
+    sidebarToggled: {
+        visibility: {
+            default: null,
+            [breakpoints.compact]: 'visible'
+        },
+        transform: {
+            default: null,
+            [breakpoints.compact]: 'translateX(0)'
+        }
+    },
+    header: {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        height: controls.heightMd,
+        paddingInline: controls.paddingSm
+    },
+    title: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.semibold,
+        lineHeight: lineHeights.bodySm,
+        color: colors.primaryForeground,
+        whiteSpace: 'nowrap'
+    },
+    body: {
+        flexGrow: 1,
+        minHeight: 0
+    },
+    group: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: borders.thin
+    },
+    item: {
+        display: 'flex',
+        gap: space.sm,
+        alignItems: 'center',
+        height: {
+            default: controls.heightMd,
+            [breakpoints.compact]: controls.heightXl
+        },
+        paddingInline: controls.paddingSm,
+        color: {
+            default: colors.secondaryForeground,
+            ':hover': colors.primaryForeground
+        },
+        textDecoration: 'none',
+        backgroundColor: {
+            default: 'transparent',
+            ':hover': colors.transparentHover
+        },
+        borderRadius: radii.md
+    },
+    itemCurrent: {
+        color: colors.primaryForeground,
+        backgroundColor: colors.transparentHover
+    },
+    itemLabel: {
+        flexGrow: 1
+    },
+    account: {
+        display: 'flex',
+        flexShrink: 0,
+        gap: controls.gapMd,
+        alignItems: 'center',
+        width: '100%',
+        height: controls.heightXl,
+        paddingInline: controls.paddingXs,
+        textAlign: 'start',
+        outlineOffset: 0,
+        borderRadius: radii.lg
+    },
+    accountText: {
+        color: colors.primaryForeground
+    },
+    who: {
+        display: 'flex',
+        flexGrow: 1,
+        flexDirection: 'column',
+        minWidth: 0
+    },
+    name: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: fontSizes.bodySm,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.caption,
+        color: colors.primaryForeground,
+        whiteSpace: 'nowrap'
+    },
+    email: {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: fontSizes.captionLg,
+        lineHeight: lineHeights.caption,
+        color: colors.secondaryForeground,
+        whiteSpace: 'nowrap'
+    },
+    positioner: {
+        zIndex: layers.menu,
+        outline: 'none'
+    }
+});

package/dist/components/Screen.d.ts

@@ -2,12 +2,14 @@ import type { ReactNode } from 'react';
 import type { AppPath } from '../registered.ts';
 type ScreenProps = {
     title: string;
+    eyebrow?: string;
     parent?: {
         label: string;
         to: AppPath;
     };
     actions?: ReactNode;
+    width?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
     children: ReactNode;
 };
-export declare function Screen({ title, parent, actions, children }: ScreenProps): import("react").JSX.Element;
+export declare function Screen({ title, eyebrow, parent, actions, width, children }: ScreenProps): import("react").JSX.Element;
 export {};

package/dist/components/Screen.js

@@ -3,13 +3,17 @@ import * as stylex from '@stylexjs/stylex';
 import { use } from 'react';
 import { borders, colors, controls, space } from "../theme/tokens.stylex.js";
 import { FrameContext } from "./frame.js";
+import { PlainScreen } from "./PlainScreen.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
 import { Link } from "./Link.js";
 import { ScrollArea } from "./ScrollArea.js";
 import { Text } from "./Text.js";
-export function Screen({ title, parent, actions, children }) {
+export function Screen({ title, eyebrow, parent, actions, width = 'md', children }) {
     const frame = use(FrameContext);
+    if (frame?.look === 'plain') {
+        return (_jsx(PlainScreen, { title: title, eyebrow: eyebrow, parent: parent, actions: actions, width: width, onToggleSidebar: frame.onToggleSidebar, children: children }));
+    }
     return (_jsxs("div", { ...stylex.props(styles.screen), children: [_jsxs("header", { ...stylex.props(styles.header), children: [_jsxs("div", { ...stylex.props(styles.leading), children: [frame === null ? null : (_jsx(IconButton, { icon: "panelLeft", label: "Toggle sidebar", onClick: frame.onToggleSidebar })), _jsxs("div", { ...stylex.props(styles.breadcrumb), children: [parent === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(Link, { to: parent.to, tone: "secondary", children: parent.label }), _jsx(Icon, { name: "chevronRight", tone: "tertiary" })] })), _jsx(Text, { as: "h1", variant: "label", tone: "primary", isTruncated: true, children: title })] })] }), _jsx("div", { ...stylex.props(styles.actions), children: actions })] }), _jsx(ScrollArea, { style: styles.body, children: children })] }));
 }
 const styles = stylex.create({

package/dist/components/Sidebar.js

@@ -15,7 +15,8 @@ export function Sidebar({ workspace, workspaceMenu, links, isToggled, isAnimatin
         interact({ primitive: 'AppFrame', event: 'navigate', label: link.label });
         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, 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 === '/', 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)))] }) }) })] }));
+    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, 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)))] }) }) })] }));
 }
 const styles = stylex.create({
     sidebar: {

package/dist/components/TextField.d.ts

@@ -18,8 +18,10 @@ type TextFieldProps = {
     inputMode?: 'text' | 'email' | 'numeric' | 'decimal' | 'tel' | 'url' | 'search';
     maxLength?: number;
     pattern?: string;
+    multiline?: boolean;
+    rows?: number;
     size?: Size;
     style?: Placement;
 };
-export declare function TextField({ label, isLabelHidden, description, error, onChange, size, style, ...input }: TextFieldProps): import("react").JSX.Element;
+export declare function TextField({ label, isLabelHidden, description, error, onChange, multiline, rows, size, style, ...input }: TextFieldProps): import("react").JSX.Element;
 export {};

package/dist/components/TextField.js

@@ -2,19 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Field } from '@base-ui/react/field';
 import * as stylex from '@stylexjs/stylex';
 import { useRef } from 'react';
-import { borders, colors, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
+import { borders, colors, controls, fontSizes, fontWeights, lineHeights, motion, shadows, space } from "../theme/tokens.stylex.js";
 import { controlSizes } from "./controlLook.js";
 import { interact } from "./interaction.js";
-export function TextField({ label, isLabelHidden = false, description, error, onChange, size = 'md', style, ...input }) {
+export function TextField({ label, isLabelHidden = false, description, error, onChange, multiline = false, rows = 3, size = 'md', style, ...input }) {
     const isInvalid = error !== undefined;
     const valueOnFocus = useRef('');
-    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsx(Field.Control, { ...input, "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
+    return (_jsxs(Field.Root, { invalid: isInvalid, disabled: input.disabled ?? false, className: stylex.props(styles.field, style).className, children: [isLabelHidden ? null : (_jsx(Field.Label, { className: stylex.props(styles.label).className, children: label })), _jsx(Field.Control, { ...input, ...(multiline ? { render: _jsx("textarea", { rows: rows }) } : {}), "aria-label": isLabelHidden ? label : undefined, onChange: (event) => onChange?.(event.currentTarget.value), onFocus: (event) => {
                     valueOnFocus.current = event.currentTarget.value;
                 }, onBlur: (event) => {
                     if (event.currentTarget.value !== valueOnFocus.current) {
                         interact({ primitive: 'TextField', event: 'change', label });
                     }
-                }, className: stylex.props(styles.input, controlSizes[size], isInvalid && styles.invalid, input.disabled === true && styles.disabled).className }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
+                }, className: stylex.props(styles.input, controlSizes[size], multiline && styles.multiline, multiline && multilinePaddings[size], isInvalid && styles.invalid, input.disabled === true && styles.disabled).className }), description === undefined ? null : (_jsx(Field.Description, { className: stylex.props(styles.note).className, children: description })), error === undefined ? null : (_jsx(Field.Error, { match: true, className: stylex.props(styles.error).className, children: error }))] }));
 }
 const focusRing = `inset 0 0 0 ${borders.hairline} ${colors.brandBorderFocus}, 0 0 0 ${borders.thin} ${colors.brandBorderFocus}, ${shadows.default}`;
 const invalidRing = `inset 0 0 0 ${borders.hairline} ${colors.dangerBorderDefault}, 0 0 0 ${borders.thin} ${colors.dangerBorderDefault}, ${shadows.default}`;
@@ -49,6 +49,10 @@ const styles = stylex.create({
             color: colors.tertiaryForeground
         }
     },
+    multiline: {
+        height: 'auto',
+        resize: 'vertical'
+    },
     invalid: {
         boxShadow: {
             default: invalidRing,
@@ -75,3 +79,20 @@ const styles = stylex.create({
         color: colors.dangerText
     }
 });
+const multilinePaddings = stylex.create({
+    xs: {
+        paddingBlock: `calc((${controls.heightXs} - ${lineHeights.caption}) / 2)`
+    },
+    sm: {
+        paddingBlock: `calc((${controls.heightSm} - ${lineHeights.bodySm}) / 2)`
+    },
+    md: {
+        paddingBlock: `calc((${controls.heightMd} - ${lineHeights.bodySm}) / 2)`
+    },
+    lg: {
+        paddingBlock: `calc((${controls.heightLg} - ${lineHeights.bodySm}) / 2)`
+    },
+    xl: {
+        paddingBlock: `calc((${controls.heightXl} - ${lineHeights.bodySm}) / 2)`
+    }
+});

package/dist/components/choiceContext.d.ts

@@ -0,0 +1,4 @@
+export declare const ChoiceContext: import("react").Context<{
+    value: string | null;
+}>;
+export declare function useChosen(): string | null;

package/dist/components/choiceContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+export const ChoiceContext = createContext({
+    value: null
+});
+export function useChosen() {
+    return useContext(ChoiceContext).value;
+}

package/dist/components/frame.d.ts

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

package/dist/components/icons.d.ts

@@ -43,6 +43,9 @@ declare const builtInIcons: {
     copy: string[];
     arrowDown: string;
     logOut: string[];
+    today: string;
+    checklist: string;
+    chart: string;
 };
 export declare const builtInIconNames: string[];
 export declare function defineIcons<const Icons extends Record<string, IconDrawing>>(icons: Icons): Icons;

package/dist/components/icons.js

@@ -87,7 +87,10 @@ const builtInIcons = {
     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'
-    ]
+    ],
+    today: 'M11.998 3.291V1.768M5.84 18.159L4.763 19.236M11.998 22.233V20.709M19.233 4.765L18.156 5.842M20.707 12H22.23M18.156 18.159L19.233 19.236M1.766 12H3.289M4.763 4.765L5.84 5.842M15.71 8.288C17.761 10.338 17.761 13.662 15.71 15.712C13.66 17.763 10.336 17.763 8.286 15.712C6.235 13.662 6.235 10.338 8.286 8.288C10.336 6.238 13.66 6.238 15.71 8.288Z',
+    checklist: 'M11.75 16.25H20.25M11.75 7.75H20.25M3.75 8.625L5.417 9.75L8.75 5.25M3.75 17.625L5.417 18.75L8.75 14.25',
+    chart: 'M2.75 4.75V17.25C2.75 18.355 3.645 19.25 4.75 19.25H21.25M6.75 15.25L10 12C10.552 11.448 11.448 11.448 12 12C12.552 12.552 13.448 12.552 14 12L18.75 7.25M14.75 6.75H19.25V11.25'
 };
 const builtIns = new Map(Object.entries(builtInIcons));
 let appIcons = new Map();

package/dist/components/interaction.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 export type Interaction = {
-    primitive: 'AppFrame' | 'Button' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup';
+    primitive: 'AppFrame' | 'Button' | 'Card' | 'IconButton' | 'Link' | 'ListRow' | 'Select' | 'Switch' | 'Checkbox' | 'SegmentedControl' | 'Menu' | 'ContextMenu' | 'CommandMenu' | 'TextField' | 'Form' | 'Dialog' | 'RadioGroup' | 'ChoiceGroup';
     event: 'click' | 'change' | 'select' | 'open' | 'close' | 'submit' | 'navigate';
     label: string;
     page: string | null;

package/dist/entityStore.d.ts

@@ -30,6 +30,7 @@ export type EntityDeps<T extends Entity> = {
     api: EntityApi<T>;
     cache: Cached<readonly T[]>;
     writes: Writes;
+    initial?: readonly T[] | undefined;
 };
 export declare class WriteRefused extends Error {
     readonly outcome: Exclude<WriteOutcome, 'saved' | 'failed'>;

package/dist/entityStore.js

@@ -54,7 +54,7 @@ export class EntityStore extends StoreBase {
     #generation = 0;
     #loading;
     initialState() {
-        const cached = this.deps.cache.read();
+        const cached = this.deps.initial ?? this.deps.cache.read();
         return {
             status: cached === undefined ? 'idle' : 'ready',
             items: cached ?? [],

package/dist/index.d.ts

@@ -35,6 +35,8 @@ export type { MemoryApiOptions } from './memoryApi.ts';
 export { StoreBase, keepEqualParts, snapshotsOf } from './store.ts';
 export type { Snapshots, StoreClass, StoreConfig } from './store.ts';
 export type { Json, Persisted, StateOf, StateSpec } from './state.ts';
+export { imageSources, media, mediaPath } from './media.ts';
+export type { ImageSources, Media, MediaImage } from './media.ts';
 export { defineTables } from './table.ts';
 export type { Access, Columns, Fields, Level, PublicRow, Row, Seed, Table, TableDefinition, TableOf, Tables, Value, Writes } from './table.ts';
 export { HttpTableApi, MemoryTableApi, PublicTableStore, TableStore, httpTables, memoryTables, publicStoreName, tableCalls } from './tables.ts';

package/dist/index.js

@@ -16,6 +16,7 @@ export { EntityStore, WriteRefused, entityCalls } from "./entityStore.js";
 export { Gate } from "./gate.js";
 export { MemoryEntityApi, MemoryServer } from "./memoryApi.js";
 export { StoreBase, keepEqualParts, snapshotsOf } from "./store.js";
+export { imageSources, media, mediaPath } from "./media.js";
 export { defineTables } from "./table.js";
 export { HttpTableApi, MemoryTableApi, PublicTableStore, TableStore, httpTables, memoryTables, publicStoreName, tableCalls } from "./tables.js";
 export { ModelBase, command, commandsOf, createModels, modelSnapshotsOf, parseMessage, sendMessage, splitType } from "./model.js";

package/dist/media.d.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod';
+import type { Row } from './table.ts';
+export declare const media: import("./table.ts").TableOf<"media", {
+    readonly columns: {
+        readonly key: z.ZodString;
+        readonly width: z.ZodNumber;
+        readonly height: z.ZodNumber;
+        readonly placeholder: z.ZodNullable<z.ZodString>;
+        readonly alt: z.ZodString;
+        readonly type: z.ZodString;
+        readonly bytes: z.ZodNumber;
+    };
+    readonly access: {
+        readonly read: "anyone";
+        readonly create: "server";
+        readonly update: "admin";
+        readonly delete: "admin";
+    };
+    readonly writes: "confirmed";
+}>;
+export type Media = Row<typeof media>;
+export type MediaImage = Pick<Media, 'key' | 'width' | 'height' | 'placeholder' | 'alt'>;
+export declare const MEDIA_LIMIT_BYTES: number;
+export declare const IMAGE_WIDTHS: readonly [320, 640, 960, 1280, 1920];
+export declare function mediaPath(key: string): string;
+export declare function transformsOn(hostname: string): boolean;
+export type ImageSources = {
+    src: string;
+    srcSet: string | undefined;
+    width: number;
+    height: number;
+};
+export declare function imageSources(image: MediaImage, { aspect, transforms }: {
+    aspect?: number | undefined;
+    transforms: boolean;
+}): ImageSources;

package/dist/media.js

@@ -0,0 +1,74 @@
+import { z } from 'zod';
+import { patternTable } from "./table.js";
+export const media = patternTable('media', {
+    columns: {
+        key: z.string(),
+        width: z.number().int(),
+        height: z.number().int(),
+        placeholder: z.string().nullable(),
+        alt: z.string().min(1),
+        type: z.string(),
+        bytes: z.number().int()
+    },
+    access: {
+        read: 'anyone',
+        create: 'server',
+        update: 'admin',
+        delete: 'admin'
+    },
+    writes: 'confirmed'
+});
+export const MEDIA_LIMIT_BYTES = 10 * 1024 * 1024;
+export const IMAGE_WIDTHS = [320, 640, 960, 1280, 1920];
+const QUALITY = 82;
+const FALLBACK_WIDTH = 960;
+const LOCAL_HOSTS = new Set(['localhost', '127.0.0.1', '[::1]', '::1']);
+export function mediaPath(key) {
+    return `/media/${key}`;
+}
+export function transformsOn(hostname) {
+    return !LOCAL_HOSTS.has(hostname) && !hostname.endsWith('.localhost');
+}
+function largestWidth(image, aspect) {
+    return Math.max(1, Math.floor(aspect === undefined
+        ? image.width
+        : Math.min(image.width, image.height * aspect)));
+}
+function transformed(key, width, aspect) {
+    const options = [
+        `width=${width}`,
+        ...(aspect === undefined
+            ? []
+            : [`height=${Math.max(1, Math.round(width / aspect))}`]),
+        `quality=${QUALITY}`,
+        'format=auto',
+        `fit=${aspect === undefined ? 'scale-down' : 'cover'}`
+    ];
+    return `/cdn-cgi/image/${options.join(',')}${mediaPath(key)}`;
+}
+export function imageSources(image, { aspect, transforms }) {
+    const largest = largestWidth(image, aspect);
+    const height = aspect === undefined
+        ? image.height
+        : Math.max(1, Math.round(largest / aspect));
+    if (!transforms) {
+        return {
+            src: mediaPath(image.key),
+            srcSet: undefined,
+            width: largest,
+            height
+        };
+    }
+    const widths = [
+        ...IMAGE_WIDTHS.filter((width) => width < largest),
+        largest
+    ].filter((width, index, all) => all.indexOf(width) === index);
+    return {
+        src: transformed(image.key, Math.min(FALLBACK_WIDTH, largest), aspect),
+        srcSet: widths
+            .map((width) => `${transformed(image.key, width, aspect)} ${width}w`)
+            .join(', '),
+        width: largest,
+        height
+    };
+}

package/dist/patternAccess.d.ts

@@ -0,0 +1,21 @@
+import { z } from 'zod';
+export declare const TABLES_READ = "tables:read";
+export declare const ASSERTION_SECONDS = 60;
+export declare const NEXT_PAGE_HEADER = "x-pattern-next";
+export declare const assertionKey: z.ZodObject<{
+    kid: z.ZodString;
+    kty: z.ZodLiteral<"OKP">;
+    crv: z.ZodLiteral<"Ed25519">;
+    x: z.ZodString;
+    d: z.ZodString;
+}, z.core.$strip>;
+export type AssertionKey = z.output<typeof assertionKey>;
+export declare function signTablesAssertion(key: AssertionKey, { sub, aud }: {
+    sub: string;
+    aud: string;
+}, now: number): Promise<string>;
+export declare function verifiedTablesAssertion(token: string, { hostname, keys, now }: {
+    hostname: string;
+    keys: Readonly<Record<string, string>>;
+    now: number;
+}): Promise<string | undefined>;

package/dist/patternAccess.js

@@ -0,0 +1,110 @@
+import { z } from 'zod';
+export const TABLES_READ = 'tables:read';
+export const ASSERTION_SECONDS = 60;
+export const NEXT_PAGE_HEADER = 'x-pattern-next';
+const CLOCK_SKEW_SECONDS = 30;
+const ED25519 = { name: 'Ed25519' };
+export const assertionKey = z.object({
+    kid: z.string().min(1),
+    kty: z.literal('OKP'),
+    crv: z.literal('Ed25519'),
+    x: z.string(),
+    d: z.string()
+});
+const assertionHeader = z.object({
+    alg: z.literal('EdDSA'),
+    typ: z.literal('JWT'),
+    kid: z.string()
+});
+const assertionClaims = z.object({
+    sub: z.email(),
+    aud: z.string(),
+    scope: z.literal(TABLES_READ),
+    iat: z.int(),
+    exp: z.int()
+});
+const encoder = new TextEncoder();
+function base64url(bytes) {
+    return btoa(String.fromCharCode(...bytes))
+        .replaceAll('+', '-')
+        .replaceAll('/', '_')
+        .replaceAll('=', '');
+}
+function bytesOf(text) {
+    try {
+        const binary = atob(text.replaceAll('-', '+').replaceAll('_', '/'));
+        return Uint8Array.from(binary, (letter) => letter.charCodeAt(0));
+    }
+    catch {
+        return undefined;
+    }
+}
+function jsonOf(text) {
+    const bytes = bytesOf(text);
+    if (bytes === undefined)
+        return undefined;
+    try {
+        return JSON.parse(new TextDecoder().decode(bytes));
+    }
+    catch {
+        return undefined;
+    }
+}
+function encoded(value) {
+    return base64url(encoder.encode(JSON.stringify(value)));
+}
+export async function signTablesAssertion(key, { sub, aud }, now) {
+    const privateKey = await crypto.subtle.importKey('jwk', { kty: key.kty, crv: key.crv, x: key.x, d: key.d }, ED25519, false, ['sign']);
+    const signed = `${encoded({ alg: 'EdDSA', typ: 'JWT', kid: key.kid })}.${encoded({
+        sub,
+        aud,
+        scope: TABLES_READ,
+        iat: now,
+        exp: now + ASSERTION_SECONDS
+    })}`;
+    const signature = await crypto.subtle.sign(ED25519, privateKey, encoder.encode(signed));
+    return `${signed}.${base64url(new Uint8Array(signature))}`;
+}
+async function isSignedBy(publicKey, signed, signature) {
+    const keyBytes = bytesOf(publicKey);
+    const signatureBytes = bytesOf(signature);
+    if (keyBytes === undefined || signatureBytes === undefined)
+        return false;
+    try {
+        const key = await crypto.subtle.importKey('raw', keyBytes, ED25519, false, [
+            'verify'
+        ]);
+        return await crypto.subtle.verify(ED25519, key, signatureBytes, encoder.encode(signed));
+    }
+    catch {
+        return false;
+    }
+}
+export async function verifiedTablesAssertion(token, { hostname, keys, now }) {
+    const [header, claims, signature, ...rest] = token.split('.');
+    if (header === undefined ||
+        claims === undefined ||
+        signature === undefined ||
+        rest.length > 0) {
+        return undefined;
+    }
+    const parsedHeader = assertionHeader.safeParse(jsonOf(header));
+    if (!parsedHeader.success)
+        return undefined;
+    const { kid } = parsedHeader.data;
+    const publicKey = Object.hasOwn(keys, kid) ? keys[kid] : undefined;
+    if (publicKey === undefined)
+        return undefined;
+    if (!(await isSignedBy(publicKey, `${header}.${claims}`, signature))) {
+        return undefined;
+    }
+    const parsed = assertionClaims.safeParse(jsonOf(claims));
+    if (!parsed.success)
+        return undefined;
+    const { sub, aud, iat, exp } = parsed.data;
+    const isFresh = exp > iat &&
+        exp - iat <= ASSERTION_SECONDS &&
+        iat <= now + CLOCK_SKEW_SECONDS &&
+        now < exp;
+    return aud === hostname && isFresh ? sub.toLowerCase() : undefined;
+}