@trypattern/sdk 0.1.11 → 0.1.13

package/dist/cli/starter.js

@@ -0,0 +1,140 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { media } from "../media.js";
+import { photoFacts } from "../server/media.js";
+import { starterSql } from "../server/tables.js";
+export const STARTER_ROWS = 'starter/rows.ts';
+export const STARTER_PHOTOS = 'starter/photos';
+const PHOTO_NAME = /^[\w][\w.-]*$/;
+function record(value) {
+    return typeof value === 'object' && value !== null
+        ? value
+        : {};
+}
+function textOf(row, key) {
+    const value = row[key];
+    return typeof value === 'string' ? value.trim() : '';
+}
+async function readPhoto(root, raw) {
+    const id = textOf(raw, 'id');
+    const photo = textOf(raw, 'photo');
+    const alt = textOf(raw, 'alt');
+    const where = `${STARTER_ROWS}: the media row ${id === '' ? 'without an id' : id}`;
+    if (id === '')
+        throw new Error(`${where} needs an id`);
+    if (!PHOTO_NAME.test(photo)) {
+        throw new Error(`${where} names its photo by its file name in ${STARTER_PHOTOS}, like photo: 'peonies.jpg'`);
+    }
+    if (alt === '') {
+        throw new Error(`${where} needs alt: describe the photo for someone who can't see it`);
+    }
+    const path = `${STARTER_PHOTOS}/${photo}`;
+    if (!existsSync(join(root, path))) {
+        throw new Error(`${where} names ${path}, which isn't there`);
+    }
+    const bytes = readFileSync(join(root, path));
+    const facts = await photoFacts(bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength));
+    if ('problem' in facts)
+        throw new Error(`${path}: ${facts.problem}`);
+    return { ...facts, id, alt, path };
+}
+function readRows(name, table, rows) {
+    if (table.owned) {
+        throw new Error(`${STARTER_ROWS} can't fill ${name}: its rows belong to whoever makes them, and nobody has signed in when a site first goes live`);
+    }
+    return rows.map((raw) => {
+        const { id, ...fields } = record(raw);
+        if (typeof id !== 'string' || id === '') {
+            throw new Error(`${STARTER_ROWS}: every ${name} row needs an id`);
+        }
+        const parsed = table.fields.safeParse(fields);
+        if (!parsed.success) {
+            const issue = parsed.error.issues[0];
+            throw new Error(`${STARTER_ROWS}: the ${name} row ${id} ${issue === undefined ? 'is not valid' : `has ${issue.path.join('.') || 'a field'} wrong: ${issue.message}`}`);
+        }
+        return { id, ...parsed.data };
+    });
+}
+function refuseRepeatedIds(name, rows) {
+    const seen = new Set();
+    for (const row of rows) {
+        if (seen.has(row['id'])) {
+            throw new Error(`${name} has two rows with the id ${String(row['id'])}`);
+        }
+        seen.add(row['id']);
+    }
+}
+export async function readStarter(root, tables) {
+    const file = join(root, STARTER_ROWS);
+    if (!existsSync(file))
+        return undefined;
+    const module = await import(__rewriteRelativeImportExtension(pathToFileURL(file).href));
+    const starter = record(module)['starter'];
+    if (typeof starter !== 'object' || starter === null) {
+        throw new Error(`${STARTER_ROWS} must export \`starter\``);
+    }
+    const photos = [];
+    const rows = {};
+    for (const [name, list] of Object.entries(starter)) {
+        const table = tables[name];
+        if (table === undefined) {
+            throw new Error(`${STARTER_ROWS} has rows for ${name}, which isn't in tables in schema.ts`);
+        }
+        if (!Array.isArray(list)) {
+            throw new Error(`${STARTER_ROWS}: ${name} must be a list of rows`);
+        }
+        if (table.name === media.name) {
+            for (const raw of list)
+                photos.push(await readPhoto(root, record(raw)));
+            refuseRepeatedIds(`${STARTER_ROWS} media`, photos);
+            continue;
+        }
+        rows[name] = readRows(name, table, list);
+        refuseRepeatedIds(`${STARTER_ROWS} ${name}`, rows[name]);
+    }
+    return { photos, rows: rows };
+}
+export function withStarter(seed, starter) {
+    if (starter === undefined)
+        return seed;
+    const photoRows = starter.photos.map((photo) => ({
+        id: photo.id,
+        key: photo.key,
+        width: photo.width,
+        height: photo.height,
+        placeholder: null,
+        alt: photo.alt,
+        type: photo.type,
+        bytes: photo.bytes
+    }));
+    const added = {
+        ...starter.rows,
+        ...(photoRows.length === 0 ? {} : { media: photoRows })
+    };
+    const merged = { ...seed };
+    for (const [name, list] of Object.entries(added)) {
+        const starterRows = (list ?? []);
+        const starterIds = new Set(starterRows.map((row) => row['id']));
+        const seedRows = (merged[name] ?? []);
+        merged[name] = [
+            ...seedRows.filter((row) => !starterIds.has(row['id'])),
+            ...starterRows
+        ];
+    }
+    return merged;
+}
+export function starterContentOf(tables, starter) {
+    return {
+        photos: starter.photos.map(({ id, path, alt }) => ({ id, path, alt })),
+        sql: starterSql(tables, starter.rows)
+    };
+}

package/dist/components/Button.d.ts

@@ -1,24 +1,2 @@
-import type { AppPath } from '../registered.ts';
-import type { ReactNode } from 'react';
-import type { IconName } from './icons.ts';
-import type { Placement } from './Placement.ts';
-import type { Size } from './Size.ts';
-type ButtonProps = {
-    children: ReactNode;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent';
-    tone?: 'neutral' | 'brand' | 'danger';
-    size?: Size;
-    to?: AppPath;
-    href?: string;
-    icon?: IconName;
-    trailingIcon?: IconName;
-    shortcut?: readonly string[];
-    type?: 'button' | 'submit';
-    disabled?: boolean;
-    isPending?: boolean;
-    isFullWidth?: boolean;
-    onClick?: () => void;
-    style?: Placement;
-};
-export declare function Button({ children, variant, tone, size, to, href, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style }: ButtonProps): import("react").JSX.Element;
-export {};
+import type { ButtonProps } from './ButtonBody.tsx';
+export declare function Button(props: ButtonProps): import("react").JSX.Element;

package/dist/components/Button.js

@@ -1,252 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button as BaseButton } from '@base-ui/react/button';
-import { Link as RouterLink } from 'react-router';
-import * as stylex from '@stylexjs/stylex';
-import { colors, controls, fontWeights, motion, shadows } from "../theme/tokens.stylex.js";
-import { controlSizes, focusRing } from "./controlLook.js";
-import { Icon } from "./Icon.js";
-import { interact, textOf } from "./interaction.js";
-import { Kbd } from "./Kbd.js";
-import { Spinner } from "./Spinner.js";
-export function Button({ children, variant = 'primary', tone = variant === 'primary' ? 'brand' : 'neutral', size = 'md', to, href, icon, trailingIcon, shortcut, type = 'button', disabled = false, isPending = false, isFullWidth = false, onClick, style }) {
-    const isDisabled = disabled || isPending;
-    const report = () => {
-        interact({ primitive: 'Button', event: 'click', label: textOf(children) });
-        onClick?.();
-    };
-    const className = stylex.props(styles.button, controlSizes[size], icon !== undefined && leadingIconSizes[size], trailingIcon !== undefined && trailingIconSizes[size], looks[`${variant}${toneKeys[tone]}`], !isDisabled && hovers[`${variant}${toneKeys[tone]}`], isDisabled && styles.disabled, isDisabled && variant === 'transparent' && styles.disabledTransparent, isFullWidth && styles.fullWidth, focusRing.visible, style).className;
-    const content = (_jsxs("span", { ...stylex.props(styles.stack), children: [_jsxs("span", { ...stylex.props(styles.content, isPending && styles.hidden), children: [icon === undefined ? null : _jsx(Icon, { name: icon, size: size }), _jsx("span", { ...stylex.props(styles.label, shortcut !== undefined && styles.labelBeforeShortcut), children: children }), trailingIcon === undefined ? null : (_jsx(Icon, { name: trailingIcon, size: size })), shortcut === undefined ? null : _jsx(Kbd, { keys: shortcut })] }), isPending ? (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending), children: _jsx(Spinner, { size: size }) })) : null] }));
-    if (href !== undefined) {
-        return (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", onClick: report, className: className, children: content }));
-    }
-    if (to !== undefined) {
-        return (_jsx(RouterLink, { to: to, onClick: report, className: className, children: content }));
-    }
-    return (_jsx(BaseButton, { type: type, disabled: isDisabled, focusableWhenDisabled: true, "aria-busy": isPending || undefined, onClick: report, className: className, children: content }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonBody } from "./ButtonBody.js";
+export function Button(props) {
+    return _jsx(ButtonBody, { ...props });
 }
-const toneKeys = {
-    neutral: 'Neutral',
-    brand: 'Brand',
-    danger: 'Danger'
-};
-const styles = stylex.create({
-    button: {
-        position: 'relative',
-        display: 'flex',
-        flexShrink: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: 0,
-        fontWeight: fontWeights.medium,
-        whiteSpace: 'nowrap',
-        textDecoration: 'none',
-        touchAction: 'manipulation',
-        outlineOffset: 0,
-        transitionTimingFunction: motion.easeOut,
-        transitionDuration: motion.fast,
-        transitionProperty: 'color, background-color, transform'
-    },
-    fullWidth: {
-        justifyContent: 'flex-start',
-        width: '100%'
-    },
-    stack: {
-        display: 'grid',
-        flexGrow: 1,
-        gridTemplateColumns: 'minmax(0, 1fr)',
-        gap: 'inherit',
-        justifyContent: 'inherit',
-        minWidth: 0,
-        overflow: 'clip'
-    },
-    content: {
-        display: 'flex',
-        gridRowStart: 1,
-        gridColumnStart: 1,
-        gap: 'inherit',
-        alignItems: 'center',
-        justifyContent: 'inherit',
-        minWidth: 0,
-        transitionTimingFunction: motion.easeOut,
-        transitionDuration: motion.base,
-        transitionProperty: 'opacity, transform'
-    },
-    hidden: {
-        opacity: 0,
-        transform: 'translateY(24px)'
-    },
-    pending: {
-        display: 'flex',
-        gridRowStart: 1,
-        gridColumnStart: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        pointerEvents: 'none'
-    },
-    label: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    },
-    labelBeforeShortcut: {
-        flexGrow: 1,
-        textAlign: 'start'
-    },
-    disabled: {
-        color: colors.disabledForeground,
-        backgroundColor: colors.disabled,
-        boxShadow: 'none'
-    },
-    disabledTransparent: {
-        backgroundColor: 'transparent'
-    }
-});
-const leadingIconSizes = stylex.create({
-    xs: { paddingInlineStart: `calc(${controls.paddingXs} - 2px)` },
-    sm: { paddingInlineStart: `calc(${controls.paddingSm} - 2px)` },
-    md: { paddingInlineStart: `calc(${controls.paddingMd} - 4px)` },
-    lg: { paddingInlineStart: `calc(${controls.paddingLg} - 2px)` },
-    xl: { paddingInlineStart: `calc(${controls.paddingXl} - 4px)` }
-});
-const trailingIconSizes = stylex.create({
-    xs: { paddingInlineEnd: `calc(${controls.paddingXs} - 2px)` },
-    sm: { paddingInlineEnd: `calc(${controls.paddingSm} - 2px)` },
-    md: { paddingInlineEnd: `calc(${controls.paddingMd} - 4px)` },
-    lg: { paddingInlineEnd: `calc(${controls.paddingLg} - 2px)` },
-    xl: { paddingInlineEnd: `calc(${controls.paddingXl} - 4px)` }
-});
-const looks = stylex.create({
-    primaryNeutral: {
-        color: colors.onInvertedForeground,
-        backgroundColor: colors.invertedSolid
-    },
-    primaryBrand: {
-        color: colors.onBrandSolidForeground,
-        backgroundColor: colors.brandSolid
-    },
-    primaryDanger: {
-        color: colors.onDangerSolidForeground,
-        backgroundColor: colors.dangerSolid
-    },
-    secondaryNeutral: {
-        color: colors.primaryForeground,
-        backgroundColor: colors.componentOnContainerStrong,
-        boxShadow: shadows.default
-    },
-    secondaryBrand: {
-        color: colors.brandForeground,
-        backgroundColor: colors.componentOnContainerStrong,
-        boxShadow: shadows.default
-    },
-    secondaryDanger: {
-        color: colors.dangerForeground,
-        backgroundColor: colors.componentOnContainerStrong,
-        boxShadow: shadows.default
-    },
-    tertiaryNeutral: {
-        color: colors.secondaryForeground,
-        backgroundColor: colors.component
-    },
-    tertiaryBrand: {
-        color: colors.onBrandSubtleForeground,
-        backgroundColor: colors.brandSubtle
-    },
-    tertiaryDanger: {
-        color: colors.dangerForeground,
-        backgroundColor: colors.dangerSubtle
-    },
-    transparentNeutral: {
-        color: colors.secondaryForeground,
-        backgroundColor: 'transparent'
-    },
-    transparentBrand: {
-        color: colors.brandForeground,
-        backgroundColor: 'transparent'
-    },
-    transparentDanger: {
-        color: colors.dangerForeground,
-        backgroundColor: 'transparent'
-    }
-});
-const hovers = stylex.create({
-    primaryNeutral: {
-        backgroundColor: {
-            default: colors.invertedSolid,
-            ':hover': colors.invertedSolidHover,
-            ':active': colors.invertedSolidActive
-        }
-    },
-    primaryBrand: {
-        backgroundColor: {
-            default: colors.brandSolid,
-            ':hover': colors.brandSolidHover,
-            ':active': colors.brandSolidActive
-        }
-    },
-    primaryDanger: {
-        backgroundColor: {
-            default: colors.dangerSolid,
-            ':hover': colors.dangerSolidHover,
-            ':active': colors.dangerSolidActive
-        }
-    },
-    secondaryNeutral: {
-        backgroundColor: {
-            default: colors.componentOnContainerStrong,
-            ':hover': colors.componentOnContainerStrongHover
-        }
-    },
-    secondaryBrand: {
-        backgroundColor: {
-            default: colors.componentOnContainerStrong,
-            ':hover': colors.componentOnContainerStrongHover
-        }
-    },
-    secondaryDanger: {
-        backgroundColor: {
-            default: colors.componentOnContainerStrong,
-            ':hover': colors.componentOnContainerStrongHover
-        }
-    },
-    tertiaryNeutral: {
-        backgroundColor: {
-            default: colors.component,
-            ':hover': colors.componentHover,
-            ':active': colors.componentActive
-        }
-    },
-    tertiaryBrand: {
-        backgroundColor: {
-            default: colors.brandSubtle,
-            ':hover': colors.brandSubtleHover
-        }
-    },
-    tertiaryDanger: {
-        backgroundColor: {
-            default: colors.dangerSubtle,
-            ':hover': colors.dangerSubtleHover,
-            ':active': colors.dangerSubtleActive
-        }
-    },
-    transparentNeutral: {
-        color: {
-            default: colors.secondaryForeground,
-            ':hover': colors.primaryForeground
-        },
-        backgroundColor: {
-            default: 'transparent',
-            ':hover': colors.transparentHover
-        }
-    },
-    transparentBrand: {
-        backgroundColor: {
-            default: 'transparent',
-            ':hover': colors.transparentHover
-        }
-    },
-    transparentDanger: {
-        backgroundColor: {
-            default: 'transparent',
-            ':hover': colors.dangerSubtleHover
-        }
-    }
-});

package/dist/components/ButtonBody.d.ts

@@ -0,0 +1,25 @@
+import type { AppPath } from '../registered.ts';
+import type { ReactNode } from 'react';
+import type { IconName } from './icons.ts';
+import type { Placement } from './Placement.ts';
+import type { Size } from './Size.ts';
+export type ButtonProps = {
+    children: ReactNode;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'transparent';
+    tone?: 'neutral' | 'brand' | 'danger';
+    size?: Size;
+    to?: AppPath;
+    href?: string;
+    icon?: IconName;
+    trailingIcon?: IconName;
+    shortcut?: readonly string[];
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    isPending?: boolean;
+    isFullWidth?: boolean;
+    onClick?: () => void;
+    style?: Placement;
+};
+export declare function ButtonBody({ children, variant, tone, size, to, href, icon, trailingIcon, shortcut, type, disabled, isPending, isFullWidth, onClick, style, isIconPinned }: ButtonProps & {
+    isIconPinned?: boolean;
+}): import("react").JSX.Element;