smoodly 0.0.50 → 0.0.52

package/dist/env.js

@@ -1,50 +1,49 @@
-// The one config shape (spec 2026-09-04 §4/§6). Self-host sets three
-// names (the live site alone needs two); the cloud sets five. The two defaults are what keep a single
-// code path: a default for an absent value is not a mode branch.
-import { createSmoodlyClient } from "./client.js";
-import { readCurrentSpace } from "./current-space.js";
-const SITE_NEEDS = ["SMOODLY_URL", "SMOODLY_SECRET_KEY"];
-const ADMIN_NEEDS = [...SITE_NEEDS, "SMOODLY_PUBLISHABLE_KEY"];
+// The one config shape (spec 2026-09-04 §4/§6; spec 2026-10-14 §1; spec 2026-10-16 the control plane §5). A site and
+// its admin read over Smoodly's API with three names — the API's address (https://api.smoodly.io unless set), the
+// space, the space's secret key (sk_) — and may hold the space's publishable key (pk_); the admin learns where editors
+// sign in from the service (GET /v1/auth). Media addresses come with the content, so the site names no media host
+// (spec 2026-10-18 media on R2 and Images §7).
+const SITE_NEEDS = ["SMOODLY_SPACE_ID", "SMOODLY_SECRET_KEY"];
+/** Smoodly's hosted API; SMOODLY_API_URL is set only for another address (the repo's loop, a staging service). */
+export const DEFAULT_API_URL = "https://api.smoodly.io";
+/** The admin learns where to sign in from the service, so it needs what the site needs. */
+const ADMIN_NEEDS = SITE_NEEDS;
+const NEEDS = { site: SITE_NEEDS, admin: ADMIN_NEEDS };
+const isHttp = (v) => /^https?:\/\/[^/\s]+/.test(v);
 const DEPLOYING = "https://smoodly.io/docs/getting-started/deploying";
-const isJwt = (v) => v.split(".").length === 3;
-/** A legacy JWT key's role claim ("anon", "service_role"; "authenticated" for a cloud space key); null when it cannot be read. */
-function jwtRole(v) {
-    if (!isJwt(v))
-        return null;
-    try {
-        const role = JSON.parse(atob(v.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"))).role;
-        return typeof role === "string" ? role : null;
-    }
-    catch {
-        return null;
-    }
-}
-/** The live site reads with the URL and the secret key; the admin and presence also need the
- *  publishable key, so their callers pass "admin" (spec 2026-09-30 tester findings §4). A key
- *  in the wrong variable or of no known form is named here, not by a failed read later. */
+/** A Smoodly key: its kind, the space it belongs to, the random part and the stamp (spec 2026-10-16 the control plane §1). */
+const SMOODLY_KEY = (kind) => new RegExp(`^${kind}_sp_(eu_)?[a-z2-7]{20}_[a-z2-7]{32}_[a-z2-7]{16}$`);
+/** The live site and its admin read over the API with its address, the space and the secret key (spec 2026-10-16 the
+ *  control plane §5). A key in the wrong variable or of no known form is named here, not by a failed read later. */
 export function resolveSmoodlyEnv(env, need = "site") {
-    const missing = (need === "admin" ? ADMIN_NEEDS : SITE_NEEDS).filter((name) => !env[name]);
+    const missing = NEEDS[need].filter((name) => !env[name]);
     if (missing.length > 0)
         throw new Error(`smoodly: set ${missing.join(", ")} in .env (Astro) or .env.local (Next.js), or in your host's environment variables (Deploying: ${DEPLOYING}).`);
     const secretKey = env.SMOODLY_SECRET_KEY;
     const publishableKey = env.SMOODLY_PUBLISHABLE_KEY ?? "";
-    if (secretKey.startsWith("sb_publishable_") || jwtRole(secretKey) === "anon") {
-        throw new Error("smoodly: SMOODLY_SECRET_KEY holds a publishable key — copy the secret (service-role) key from your Supabase project.");
+    if (SMOODLY_KEY("pk").test(secretKey)) {
+        throw new Error("smoodly: SMOODLY_SECRET_KEY holds the publishable key (pk_…) — copy the secret key (sk_…) from the space page.");
     }
-    if (!secretKey.startsWith("sb_secret_") && !isJwt(secretKey)) {
-        throw new Error("smoodly: SMOODLY_SECRET_KEY is neither an sb_secret_ key nor a JWT — copy the secret (service-role) key from your Supabase project.");
+    if (!SMOODLY_KEY("sk").test(secretKey)) {
+        throw new Error("smoodly: SMOODLY_SECRET_KEY is not a Smoodly secret key (sk_…) — copy it from the space page.");
     }
-    if (publishableKey.startsWith("sb_secret_") || jwtRole(publishableKey) === "service_role") {
-        throw new Error("smoodly: SMOODLY_PUBLISHABLE_KEY holds a secret key — it reaches the browser; copy the publishable (anon) key from your Supabase project.");
+    if (SMOODLY_KEY("sk").test(publishableKey)) {
+        throw new Error("smoodly: SMOODLY_PUBLISHABLE_KEY holds the secret key (sk_…) — it reaches the browser; copy the publishable key (pk_…) from the space page.");
     }
-    if (publishableKey && !publishableKey.startsWith("sb_publishable_") && !isJwt(publishableKey)) {
-        throw new Error("smoodly: SMOODLY_PUBLISHABLE_KEY is neither an sb_publishable_ key nor a JWT — copy the publishable (anon) key from your Supabase project.");
+    if (publishableKey && !SMOODLY_KEY("pk").test(publishableKey)) {
+        throw new Error("smoodly: SMOODLY_PUBLISHABLE_KEY is not a Smoodly publishable key (pk_…) — copy it from the space page.");
     }
-    const url = env.SMOODLY_URL;
-    if (!/^https?:\/\/[^/\s]+/.test(url)) {
-        throw new Error(`smoodly: SMOODLY_URL "${url}" is not an http(s) address — copy the project URL from your Supabase project.`);
+    const apiUrl = (env.SMOODLY_API_URL || DEFAULT_API_URL).replace(/\/+$/, "");
+    if (!isHttp(apiUrl)) {
+        throw new Error(`smoodly: SMOODLY_API_URL "${apiUrl}" is not an http(s) address — the address of Smoodly's API (locally the service on http://localhost:8787; see Deploying: ${DEPLOYING}).`);
     }
-    return { url, secretKey, publishableKey, authUrl: env.SMOODLY_AUTH_URL || url, authKey: env.SMOODLY_AUTH_KEY || publishableKey };
+    const spaceId = env.SMOODLY_SPACE_ID;
+    return { secretKey, publishableKey, apiUrl, spaceId };
+}
+/** What the API client is built from (createSmoodlyApi): the site's env, the secret key as the key. */
+export function apiEnv(env = process.env) {
+    const e = resolveSmoodlyEnv(env, "site");
+    return { apiUrl: e.apiUrl, spaceId: e.spaceId, key: e.secretKey };
 }
 let siteUrlWarned = false;
 /** The site's own address for the root layout's `metadataBase`, so canonical, hreflang and social
@@ -68,18 +67,7 @@ export function siteUrl(env = process.env) {
 /** `resolveSmoodlyEnv(process.env)` — call lazily, never at module load,
  *  so `next build` without env still succeeds. */
 export const smoodlyEnv = (need = "site") => resolveSmoodlyEnv(process.env, need);
-/** One lookup per process per content project and key: the space never
- *  changes for a key. A failed lookup is not cached, so the next call retries. */
-const spaces = new Map();
-/** The presence config, with the space the database says the secret key acts in —
- *  asked, never read out of the key, so it cannot disagree with where rows land. */
-export function presenceConfig(env, db) {
-    const cacheKey = `${env.url}\n${env.secretKey}`;
-    let space = spaces.get(cacheKey);
-    if (!space) {
-        space = readCurrentSpace(db ?? createSmoodlyClient(env));
-        spaces.set(cacheKey, space);
-        space.catch(() => spaces.delete(cacheKey));
-    }
-    return space.then((spaceId) => ({ url: env.url, key: env.publishableKey, spaceId }));
+/** The presence config from the env: no lookup, the space is the site's own. */
+export function presenceConfig(env) {
+    return { apiUrl: env.apiUrl, spaceId: env.spaceId };
 }

package/dist/fields.d.ts

@@ -1,5 +1,6 @@
 import { type Toolset } from "./toolset.ts";
 import { type ResolvedFile, type ResolvedImage, type ResolvedVideo } from "./media.ts";
+import { type ImageQuality } from "./media-cut.ts";
 import { type Condition, when } from "./conditions.ts";
 export type Descriptor = {
     type: string;
@@ -88,10 +89,17 @@ export declare const f: {
     datetime: () => FieldBuilder<string, {}>;
     number: () => FieldBuilder<number, {}>;
     /** `aspect`: one `"w:h"` or several the crop tool may lock to — a per-use
-     *  constraint, so the component knows its box before the image loads. */
-    image: (opts?: {
+     *  constraint, so the component knows its box before the image loads.
+     *  `crops`: named crops for art direction, a ratio each (spec 2026-10-18 media on R2 and Images §6), framed by the
+     *  editor in one tab each and placed by the view's `media`; the first is the field's main crop. Not with `aspect`.
+     *  `quality` and `maxWidth`: this kind of image's cut quality and srcset cap, over the project's and under a view's
+     *  (spec 2026-10-18 image quality and max width §1). */
+    image: <const C extends Record<string, string> = Record<string, string>>(opts?: {
         aspect?: string | string[];
-    }) => FieldBuilder<ResolvedImage, {}>;
+        crops?: C;
+        quality?: ImageQuality;
+        maxWidth?: number;
+    }) => FieldBuilder<ResolvedImage<Extract<keyof C, string>>, {}>;
     video: () => FieldBuilder<ResolvedVideo, {}>;
     file: () => FieldBuilder<ResolvedFile, {}>;
     richtext: (opts?: {

package/dist/fields.js

@@ -3,6 +3,7 @@
 // keyed by descriptor type. Chaining is immutable.
 import { DEFAULT_TOOLSET } from "./toolset.js";
 import { parseAspect } from "./media.js";
+import { isImageQuality, isMaxWidth, qualityError } from "./media-cut.js";
 import { when } from "./conditions.js";
 /** Normalizes a schema's option list to objects; refuses an empty list,
  *  since a choice with nothing to choose is a schema bug (spec 2026-09-10
@@ -86,9 +87,19 @@ export const f = {
     datetime: () => builder({ type: "datetime" }),
     number: () => builder({ type: "number" }),
     /** `aspect`: one `"w:h"` or several the crop tool may lock to — a per-use
-     *  constraint, so the component knows its box before the image loads. */
+     *  constraint, so the component knows its box before the image loads.
+     *  `crops`: named crops for art direction, a ratio each (spec 2026-10-18 media on R2 and Images §6), framed by the
+     *  editor in one tab each and placed by the view's `media`; the first is the field's main crop. Not with `aspect`.
+     *  `quality` and `maxWidth`: this kind of image's cut quality and srcset cap, over the project's and under a view's
+     *  (spec 2026-10-18 image quality and max width §1). */
     image: (opts) => {
         const aspect = opts?.aspect;
+        const crops = opts?.crops;
+        const quality = opts?.quality, maxWidth = opts?.maxWidth;
+        if (quality !== undefined && !isImageQuality(quality))
+            throw new Error(qualityError(quality, "f.image quality"));
+        if (maxWidth !== undefined && !isMaxWidth(maxWidth))
+            throw new Error("smoodly: f.image maxWidth must be a positive whole number of pixels.");
         if (aspect !== undefined) {
             const list = Array.isArray(aspect) ? aspect : [aspect];
             if (list.length === 0)
@@ -96,7 +107,27 @@ export const f = {
             for (const a of list)
                 parseAspect(a);
         }
-        return builder({ type: "image", ...(aspect !== undefined ? { aspect } : {}) });
+        if (crops !== undefined) {
+            if (aspect !== undefined)
+                throw new Error("smoodly: f.image takes `crops` or `aspect`, not both — each named crop has its own ratio.");
+            const names = Object.keys(crops);
+            if (names.length === 0)
+                throw new Error('smoodly: f.image `crops` names no crop — name one or more, like { desktop: "16:9" }.');
+            for (const name of names) {
+                if (!/^[a-z][a-zA-Z0-9]*$/.test(name))
+                    throw new Error(`smoodly: f.image crop "${name}" is not a name — start with a lowercase letter, then letters and digits, like "mobile".`);
+                try {
+                    parseAspect(crops[name]);
+                }
+                catch {
+                    throw new Error(`smoodly: f.image crop "${name}": "${crops[name]}" is not an aspect — use "w:h", like "16:9".`);
+                }
+            }
+        }
+        return builder({
+            type: "image", ...(aspect !== undefined ? { aspect } : {}), ...(crops !== undefined ? { crops: { ...crops } } : {}),
+            ...(quality !== undefined ? { quality } : {}), ...(maxWidth !== undefined ? { maxWidth } : {}),
+        });
     },
     video: () => builder({ type: "video" }),
     file: () => builder({ type: "file" }),

package/dist/global-id.d.ts

@@ -1,3 +1,5 @@
+/** The namespace a global item's id is derived in: fixed, so an export and an import of the same registry agree on the row. */
+export declare const DEFAULT_SPACE_ID = "00000000-0000-0000-0000-000000000000";
 /** RFC 4122 §4.3 uuid v5: sha1(namespace bytes ‖ name bytes), version 5,
  *  variant 10xx, first 16 bytes of the digest. */
 export declare function globalEntryId(space: string, name: string): Promise<string>;

package/dist/global-id.js

@@ -7,11 +7,13 @@
 // share one table: a name-only id would make space B's footer collide
 // with space A's.
 //
-// No imports — Web Crypto (`globalThis.crypto.subtle`) exists in Node
+// No imports — Web Crypto (`crypto.subtle`) exists in Node
 // >= 20 and in every browser, so this module carries no node builtin
 // into the package root's graph. It matters because every scaffolded
 // component does `import { smoodly } from "smoodly/react"`, which re-exports
 // the root, and a "use client" section's browser build would fail on `node:crypto`.
+/** The namespace a global item's id is derived in: fixed, so an export and an import of the same registry agree on the row. */
+export const DEFAULT_SPACE_ID = "00000000-0000-0000-0000-000000000000";
 const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 /** The namespace's 16 raw bytes — RFC 4122 hashes the bytes, not the text. */
 function uuidBytes(uuid) {
@@ -27,7 +29,7 @@ function uuidBytes(uuid) {
  *  variant 10xx, first 16 bytes of the digest. */
 export async function globalEntryId(space, name) {
     const input = new Uint8Array([...uuidBytes(space), ...new TextEncoder().encode(name)]);
-    const digest = new Uint8Array(await globalThis.crypto.subtle.digest("SHA-1", input));
+    const digest = new Uint8Array(await crypto.subtle.digest("SHA-1", input));
     const bytes = digest.subarray(0, 16);
     bytes[6] = (bytes[6] & 0x0f) | 0x50; // version 5 in the high nibble of octet 6
     bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10xx in the top bits of octet 8

package/dist/image/SmoodlyImage.d.ts

@@ -1,10 +1,12 @@
 import type { CSSProperties, ReactElement } from "react";
 import type { ResolvedImage } from "../media.ts";
-import type { ImageLoader } from "./loaders.ts";
+import type { ImageQuality } from "../media-cut.ts";
 export type SmoodlyImageProps = {
     image: ResolvedImage;
-    /** Overrides the value's aspect for this placement (`"21:9"`). */
+    /** Overrides the value's aspect for this placement (`"21:9"`): the cut is framed around the hotspot. */
     aspect?: string;
+    /** Where each named crop applies, in order: `{ mobile: "(max-width: 767px)" }` (spec 2026-10-18 media §6). */
+    media?: Record<string, string>;
     sizes?: string;
     priority?: boolean;
     loading?: "eager" | "lazy";
@@ -12,10 +14,12 @@ export type SmoodlyImageProps = {
     style?: CSSProperties;
     /** Overrides the resolved alt (rarely right — the editor owns it). */
     alt?: string;
-    loader?: ImageLoader;
-    unoptimized?: boolean;
+    /** This placement's cut quality (50, 60, 75, 85, 95 or 100) and srcset cap, over the field's and the project's (spec
+     *  2026-10-18 image quality and max width §1). */
+    quality?: ImageQuality;
+    maxWidth?: number;
 } & {
     /** Data attributes land on the wrapper box — a section's field mark (spec 2026-09-10 §1). */
     [attr: `data-${string}`]: string | undefined;
 };
-export declare function SmoodlyImage({ image, aspect, sizes, priority, loading, className, style, alt, loader, unoptimized, ...data }: SmoodlyImageProps): ReactElement;
+export declare function SmoodlyImage({ image, aspect, media, sizes, priority, loading, className, style, alt, quality, maxWidth, ...data }: SmoodlyImageProps): ReactElement;

package/dist/image/SmoodlyImage.js

@@ -1,16 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// <SmoodlyImage>: a box at the aspect (declared, chosen or natural), the
-// image inside positioned by crop and hotspot, dimensions set so nothing
-// shifts. Wraps next/image; the only file besides SmoodlyVideo that a
-// site imports from the media layer. Server-safe — no "use client".
-import Image from "next/image";
-import { boxAspectOf, frameFor } from "./crop-math.js";
-export function SmoodlyImage({ image, aspect, sizes, priority, loading, className, style, alt, loader, unoptimized, ...data }) {
-    const box = boxAspectOf(image, aspect);
-    const frame = loader?.handlesCrop ? { left: 0, top: 0, width: 100, height: 100 } : frameFor(image, box);
-    const svg = image.mime === "image/svg+xml";
-    return (_jsx("span", { className: className, ...data, style: { display: "block", position: "relative", overflow: "hidden", aspectRatio: String(box), ...style }, children: _jsx(Image, { src: image.url, alt: alt ?? image.alt, width: image.width, height: image.height, sizes: sizes, priority: priority, loading: loading, unoptimized: unoptimized ?? svg, ...(loader ? { loader: ({ width, quality }) => loader.url(image, { width, quality }) } : {}), style: {
-                position: "absolute", left: `${frame.left}%`, top: `${frame.top}%`,
-                width: `${frame.width}%`, height: `${frame.height}%`, maxWidth: "none",
-            } }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { preconnect } from "react-dom";
+import { imageMarkup } from "./markup.js";
+/** `a:b;c-d:e` as React's style object, in the same order, so React writes the same string back. */
+function styleObject(css) {
+    const out = {};
+    for (const decl of css.split(";")) {
+        const at = decl.indexOf(":");
+        if (at > 0)
+            out[decl.slice(0, at).replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = decl.slice(at + 1);
+    }
+    return out;
+}
+function originOf(url) {
+    try {
+        return new URL(url).origin;
+    }
+    catch {
+        return null;
+    }
+}
+export function SmoodlyImage({ image, aspect, media, sizes, priority, loading, className, style, alt, quality, maxWidth, ...data }) {
+    const m = imageMarkup(image, { aspect, media, sizes, priority, loading, alt, quality, maxWidth });
+    const origin = originOf(image.cut ?? image.url);
+    if (origin)
+        preconnect(origin);
+    const i = m.img;
+    const img = (_jsx("img", { src: i.src, srcSet: i.srcset, sizes: i.sizes, alt: i.alt, width: i.width, height: i.height, loading: i.loading, fetchPriority: i.fetchpriority, decoding: i.decoding, style: styleObject(i.style) }));
+    return (_jsx("span", { className: className, ...data, style: { ...styleObject(m.box), ...style }, children: m.sources.length > 0 ? (_jsxs("picture", { children: [m.sources.map((s) => _jsx("source", { media: s.media, srcSet: s.srcset, sizes: s.sizes, width: s.width, height: s.height, type: s.type }, `${s.media}:${s.type}`)), img] })) : img }));
 }

package/dist/image/SmoodlyVideo.d.ts

@@ -3,5 +3,5 @@ import type { ResolvedVideo } from "../media.ts";
 export type SmoodlyVideoProps = {
     video: ResolvedVideo;
 } & Omit<VideoHTMLAttributes<HTMLVideoElement>, "src" | "poster" | "width" | "height">;
-/** A <video> over the bucket's CDN with its poster and size. No transcoding (spec §9). */
+/** A <video> from the media host with its poster (a cut where there is one) and size. No transcoding (spec §9). */
 export declare function SmoodlyVideo({ video, ...rest }: SmoodlyVideoProps): ReactElement;

package/dist/image/SmoodlyVideo.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/** A <video> over the bucket's CDN with its poster and size. No transcoding (spec §9). */
+import { posterUrl } from "./markup.js";
+/** A <video> from the media host with its poster (a cut where there is one) and size. No transcoding (spec §9). */
 export function SmoodlyVideo({ video, ...rest }) {
-    return (_jsx("video", { src: video.url, poster: video.poster?.url, width: video.width, height: video.height, playsInline: true, ...rest }));
+    return (_jsx("video", { src: video.url, poster: posterUrl(video), width: video.width, height: video.height, playsInline: true, ...rest }));
 }

package/dist/image/index.d.ts

@@ -1,6 +1,5 @@
 export { SmoodlyImage, type SmoodlyImageProps } from "./SmoodlyImage.tsx";
 export { SmoodlyVideo, type SmoodlyVideoProps } from "./SmoodlyVideo.tsx";
-export { imageUrl, nextLoader, type ImageLoader, type ImageUrlOptions } from "./loaders.ts";
 export { frameFor, boxAspectOf, type Frame } from "./crop-math.ts";
-export { smoodlyImages, isPrivateHost, type RemotePattern, type SmoodlyImagesConfig } from "./next-config.ts";
-export type { ResolvedImage, ResolvedVideo, ResolvedFile, Crop, Hotspot } from "../media.ts";
+export type { ResolvedImage, ResolvedCrop, ResolvedVideo, ResolvedFile, Crop, Hotspot } from "../media.ts";
+export type { ImageQuality } from "../media-cut.ts";

package/dist/image/index.js

@@ -1,5 +1,3 @@
 export { SmoodlyImage } from "./SmoodlyImage.js";
 export { SmoodlyVideo } from "./SmoodlyVideo.js";
-export { imageUrl, nextLoader } from "./loaders.js";
 export { frameFor, boxAspectOf } from "./crop-math.js";
-export { smoodlyImages, isPrivateHost } from "./next-config.js";

package/dist/image/markup.d.ts

@@ -0,0 +1,53 @@
+import { type ResolvedImage, type ResolvedVideo } from "../media.ts";
+import { type ImageQuality } from "../media-cut.ts";
+export type ImageMarkupOptions = {
+    /** Overrides the value's ratio for this placement: the cut is framed in CSS around the hotspot. */
+    aspect?: string;
+    sizes?: string;
+    /** Where each named crop applies: `{ mobile: "(max-width: 767px)" }`, in order; the first match wins. */
+    media?: Record<string, string>;
+    priority?: boolean;
+    loading?: "eager" | "lazy";
+    /** Overrides the resolved alt (rarely right — the editor owns it). */
+    alt?: string;
+    /** This placement's cut quality and srcset cap, over the image's own (its field's or project's) and the default 75
+     *  (spec 2026-10-18 image quality and max width §1). */
+    quality?: ImageQuality;
+    maxWidth?: number;
+};
+/** A <source>: `media` for a placed crop, `type` for a format a static build offers (astro/static-media.ts). */
+export type ImageSource = {
+    media?: string;
+    srcset: string;
+    sizes?: string;
+    width: number;
+    height: number;
+    type?: string;
+};
+export type ImageTag = {
+    src: string;
+    srcset?: string;
+    sizes?: string;
+    alt: string;
+    width: number;
+    height: number;
+    loading: "eager" | "lazy";
+    fetchpriority?: "high";
+    decoding: "async";
+    style: string;
+};
+export type ImageMarkup = {
+    box: string;
+    sources: ImageSource[];
+    img: ImageTag;
+};
+export declare function imageMarkup(image: ResolvedImage, options: ImageMarkupOptions): ImageMarkup;
+/** A video's poster: its cut at the src width and its own quality where there is one, else the original. */
+export declare function posterUrl(video: ResolvedVideo): string | undefined;
+/** The markup as HTML, attribute for attribute what React writes for <SmoodlyImage> (Astro's <Image> sets it as is),
+ *  React's spellings included (`srcSet`: attribute names are case-insensitive in HTML). */
+export declare function imageHtml(m: ImageMarkup, box?: {
+    class?: string;
+    style?: string;
+    data?: Record<string, string | undefined>;
+}): string;

package/dist/image/markup.js

@@ -0,0 +1,111 @@
+// One image markup for both frameworks (spec 2026-10-18 media on R2 and Images §7; plan (c) decision 5): what
+// <SmoodlyImage> (React) and <Image> (Astro) render, decided here so both are only markup and a test holds them equal.
+// Plain HTML, no optimizer and no Smoodly JavaScript: a box, an <img> whose srcset lists the cut's widths, or a
+// <picture> with one <source> per crop the view places. Without a cut (locally, an SVG) the original is framed in CSS
+// by crop and hotspot, today's path (crop-math.ts).
+import { CENTER_HOTSPOT, clamp01, parseAspect } from "../media.js";
+import { cutUrl, cutWidths, DEFAULT_QUALITY, isImageQuality, parseCutSegment, qualityError } from "../media-cut.js";
+import { escapeHtml } from "../richtext-href.js";
+import { boxAspectOf, frameFor } from "./crop-math.js";
+/** The `src` of a cut: the widest kept width up to 1280, a browser with no srcset support's fair middle. */
+const SRC_WIDTH = 1280;
+const pct = (n) => `${Math.round(n * 1000) / 1000}%`;
+const frameStyle = (f) => `position:absolute;left:${pct(f.left)};top:${pct(f.top)};width:${pct(f.width)};height:${pct(f.height)};max-width:none`;
+const FULL = frameStyle({ left: 0, top: 0, width: 100, height: 100 });
+const boxStyle = (aspect) => `display:block;position:relative;overflow:hidden;aspect-ratio:${aspect}`;
+/** The rectangle a cut's address names (`…/<left>.<top>.<width>.<height>.<sig>`), or null for none. */
+function rectOfCut(cut) {
+    return cut ? parseCutSegment(cut.slice(cut.lastIndexOf("/") + 1))?.rect ?? null : null;
+}
+function deliveryOf(image, options) {
+    const quality = options.quality ?? image.quality ?? DEFAULT_QUALITY;
+    if (!isImageQuality(quality))
+        throw new Error(qualityError(quality));
+    const maxWidth = options.maxWidth ?? image.maxWidth;
+    return { quality, ...(maxWidth !== undefined ? { maxWidth } : {}) };
+}
+function srcsetOf(cut, width, d) {
+    const widths = cutWidths(width, d.maxWidth);
+    const fit = widths.filter((w) => w <= SRC_WIDTH);
+    return {
+        src: cutUrl(cut, fit.length > 0 ? fit[fit.length - 1] : widths[0], d.quality),
+        srcset: widths.map((w) => `${cutUrl(cut, w, d.quality)} ${w}w`).join(", "),
+    };
+}
+/** A cut shown in a box of another ratio (the view's `aspect`): framed around the hotspot, as the original was. */
+function frameOverCut(image, rect, box) {
+    const spot = image.hotspot ?? CENTER_HOTSPOT;
+    const hotspot = { x: clamp01((spot.x * image.width - rect.left) / rect.width), y: clamp01((spot.y * image.height - rect.top) / rect.height) };
+    return frameStyle(frameFor({ width: rect.width, height: rect.height, hotspot }, box));
+}
+export function imageMarkup(image, options) {
+    const loading = options.priority ? "eager" : options.loading ?? "lazy";
+    const tag = { alt: options.alt ?? image.alt, loading, ...(options.priority ? { fetchpriority: "high" } : {}), decoding: "async" };
+    const sizes = options.sizes ? { sizes: options.sizes } : {};
+    const rect = image.mime === "image/svg+xml" ? null : rectOfCut(image.cut);
+    const spot = image.hotspot ?? CENTER_HOTSPOT;
+    const delivery = deliveryOf(image, options);
+    // Art direction: a <source> per placed crop; each has its own shape, so the box takes it from the chosen source's
+    // width and height, and the image covers it (around the hotspot where there is no cut, locally).
+    const sources = [];
+    for (const [name, media] of Object.entries(options.media ?? {})) {
+        const crop = image.crops?.[name];
+        if (!crop)
+            continue;
+        const own = rectOfCut(crop.cut);
+        sources.push({ media, srcset: own && crop.cut ? srcsetOf(crop.cut, own.width, delivery).srcset : image.url, ...sizes, width: crop.width, height: crop.height });
+    }
+    if (sources.length > 0) {
+        const main = image.crops ? Object.values(image.crops)[0] : undefined;
+        const size = rect ? { width: rect.width, height: rect.height } : main ? { width: main.width, height: main.height } : { width: image.width, height: image.height };
+        return {
+            box: "display:block",
+            sources,
+            img: {
+                ...(rect && image.cut ? { ...srcsetOf(image.cut, rect.width, delivery), ...sizes } : { src: image.url }),
+                ...tag, ...size,
+                style: `display:block;width:100%;height:auto;object-fit:cover;object-position:${pct(spot.x * 100)} ${pct(spot.y * 100)}`,
+            },
+        };
+    }
+    if (rect && image.cut) {
+        const own = rect.width / rect.height;
+        const box = options.aspect ? parseAspect(options.aspect) : own;
+        return {
+            box: boxStyle(box),
+            sources,
+            img: {
+                ...srcsetOf(image.cut, rect.width, delivery), ...sizes, ...tag, width: rect.width, height: rect.height,
+                style: Math.abs(box / own - 1) < 0.005 ? FULL : frameOverCut(image, rect, box),
+            },
+        };
+    }
+    // No cut: the original, framed in CSS by crop and hotspot (an SVG fills its box as it is).
+    const box = boxAspectOf(image, options.aspect);
+    return {
+        box: boxStyle(box),
+        sources,
+        img: { src: image.url, ...tag, width: image.width, height: image.height, style: frameStyle(frameFor(image, box)) },
+    };
+}
+/** A video's poster: its cut at the src width and its own quality where there is one, else the original. */
+export function posterUrl(video) {
+    const poster = video.poster;
+    if (!poster)
+        return undefined;
+    const rect = rectOfCut(poster.cut);
+    return rect && poster.cut ? srcsetOf(poster.cut, rect.width, deliveryOf(poster, {})).src : poster.url;
+}
+const attr = (name, value) => (value === undefined ? "" : ` ${name}="${escapeHtml(String(value))}"`);
+/** The markup as HTML, attribute for attribute what React writes for <SmoodlyImage> (Astro's <Image> sets it as is),
+ *  React's spellings included (`srcSet`: attribute names are case-insensitive in HTML). */
+export function imageHtml(m, box = {}) {
+    const style = box.style ? `${m.box};${box.style}` : m.box;
+    const data = Object.entries(box.data ?? {}).map(([k, v]) => attr(k, v)).join("");
+    const i = m.img;
+    const img = `<img${attr("src", i.src)}${attr("srcSet", i.srcset)}${attr("sizes", i.sizes)}${attr("alt", i.alt)}${attr("width", i.width)}${attr("height", i.height)}`
+        + `${attr("loading", i.loading)}${attr("fetchPriority", i.fetchpriority)}${attr("decoding", i.decoding)}${attr("style", i.style)}/>`;
+    const sources = m.sources.map((s) => `<source${attr("media", s.media)}${attr("srcSet", s.srcset)}${attr("sizes", s.sizes)}${attr("width", s.width)}${attr("height", s.height)}${attr("type", s.type)}/>`).join("");
+    const inner = m.sources.length > 0 ? `<picture>${sources}${img}</picture>` : img;
+    return `<span${attr("class", box.class)}${data}${attr("style", style)}>${inner}</span>`;
+}

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import { collection } from "./collections.ts";
 import { toolset } from "./toolset.ts";
 import { globalItem } from "./global.ts";
 import { marks } from "./marks.ts";
-export { createSupabaseStores, siteOptions } from "./bind.ts";
 export { schemaOf } from "./registration.ts";
 export type { SchemaOr } from "./registration.ts";
 export { EMPTY_PAGE_CONTEXT } from "./page-context.ts";
@@ -25,36 +24,24 @@ export { ASSET_COLLECTION, DEFAULT_MEDIA, MEDIA_TYPES, FULL_CROP, CENTER_HOTSPOT
 export type { Crop, Hotspot, AssetKind, ImageValue, VideoValue, FileValue, AssetMeta, AssetRecord, ResolvedImage, ResolvedVideo, ResolvedFile, } from "./media.ts";
 export { z } from "./zones.ts";
 export { defineConfig } from "./config.ts";
-export { collectionSQL, coreTablesSQL } from "./sql.ts";
-export { SCHEMA_VERSION, SCHEMA_VERSION_KEY, schemaVersionSQL, coreFileVersion, schemaBehind, schemaBehindMessage } from "./schema-version.ts";
 export { draftToken, sameToken, isDraftToken, assertFresh, StaleDraftError } from "./draft-token.ts";
 export type { DraftToken, DraftPointerRow } from "./draft-token.ts";
-export { MemoryPageStore } from "./store.ts";
-export { MemoryAssetStore, assetErrors, kindOf, extensionFor, objectPath, withDownload, PAGE_SIZE as ASSET_PAGE_SIZE } from "./asset-store.ts";
+export { assetErrors, kindOf, extensionFor, objectPath, PAGE_SIZE as ASSET_PAGE_SIZE } from "./asset-store.ts";
 export type { AssetStore, UploadTicket, FinishInput, AssetQuery, AssetPage, BeginUploadInput, CreateAssetInput } from "./asset-store.ts";
 export { imageDimensions } from "./image-dimensions.ts";
-export { SupabasePageStore } from "./supabase-store.ts";
-export { SupabaseAssetStore } from "./supabase-asset-store.ts";
-export { MemoryMemberStore, sortMembers, memberErrors } from "./member-store.ts";
+export type { ImageQuality } from "./media-cut.ts";
+export { sortMembers, memberErrors } from "./member-store.ts";
 export type { MemberStore, MemberRecord, InviteInput, InviteResult } from "./member-store.ts";
-export { SupabaseMemberStore } from "./supabase-member-store.ts";
 export { MEMBER_ROLES, can, normalizeRole, isMemberRole } from "./permissions.ts";
 export type { MemberRole, Capability } from "./permissions.ts";
 export { collectEntryRefs, collectTreeRefs } from "./refs.ts";
 export type { RefEdge, SectionLike } from "./refs.ts";
 export { richtextBlocks, elementSchemas, IMAGE_NODE, ELEMENT_NODE } from "./richtext-walk.ts";
 export type { BlockNode, ElementSchemas, ImageNodeAttrs, ElementNodeAttrs } from "./richtext-walk.ts";
-export { MemoryRefIndex } from "./ref-index.ts";
-export { MemoryPathIndex } from "./path-index.ts";
 export type { PathIndex } from "./path-index.ts";
-export { MemoryEntryStore } from "./entry-store.ts";
-export { SupabaseEntryStore } from "./supabase-entry-store.ts";
-export { SupabasePathIndex } from "./supabase-path-index.ts";
 export type { EntryStore, EntryRecord, EntryLocale, EntryVersion, EntryScan, EntryUsage, ListOptions, CreateEntryOptions, AddEntryLocaleOptions, EntryStoreOptions, Where, WhereValue, SnapshotQuery, SnapshotRow, } from "./entry-store.ts";
 export { entryErrors, compareEntries, DEFAULT_ENTRY_LOCALES, localizedKeys, splitFields, entryLocaleRow, entryFieldsIn, entryRefEdges, entryTitleIn, matchesWhere, } from "./entry-store.ts";
-export { MemoryPublishedStore } from "./published.ts";
-export { SupabasePublishedStore } from "./supabase-published-store.ts";
-export type { PublishedStore, PublishedPageRow, PublishedEntryRow, PublishedRoute, PublishedTreeRow, PublishedQuery, PublishedKey } from "./published.ts";
+export type { DeployStore } from "./deploy-store.ts";
 export { affectedTargets, pageTag, entryTag, globalTag, pagesTreeTag, collectionTag } from "./revalidate.ts";
 export type { AffectedTargets } from "./revalidate.ts";
 export { resolveTree, resolveFields, resolveMedia } from "./resolve.ts";
@@ -83,7 +70,7 @@ export { SMD_KEY } from "./smd-key.ts";
 export type { SmdInternal } from "./smd-key.ts";
 export { CSS_MAX, cssProblem, safeCss, scopedCss } from "./css.ts";
 export { globalEntryId } from "./global-id.ts";
-export { DEFAULT_SPACE_ID } from "./sql-space.ts";
+export { DEFAULT_SPACE_ID } from "./global-id.ts";
 export type { GlobalSchema, GlobalLink } from "./global.ts";
 /** The registration namespace: schemas and their parts. The React pairing (`smoodly.section`, `<smoodly.Section>`) is smoodly/react's. */
 export declare const smoodly: {
@@ -127,8 +114,11 @@ export declare const smoodly: {
 };
 export { NODE_ATTR, ZONE_ATTR, EMPTY_ATTR, BLANK_ATTR, FIELD_ATTR, ITEM_ATTR, EDITOR_ATTR, resolveMarkPath } from "./marks.ts";
 export type { MarkNode, MarkPath, Marks, Scope } from "./marks.ts";
-export { resolveSmoodlyEnv, smoodlyEnv, presenceConfig, siteUrl } from "./env.ts";
+export { apiEnv, resolveSmoodlyEnv, smoodlyEnv, presenceConfig, siteUrl } from "./env.ts";
+export type { SmoodlyEnvNeed } from "./env.ts";
+export { createSmoodlyApi, SmoodlyApiError } from "./api-client.ts";
+export type { SmoodlyApiOptions } from "./api-client.ts";
 export type { SmoodlyEnv, PresenceConfig } from "./env.ts";
-export { clientOptions, createSmoodlyClient } from "./client.ts";
-export { createSmoodlySite, pageContextOf } from "./site.ts";
-export type { SiteOptions, SitePageSchema, SmoodlySite, LoadOptions, PageTreeItem, EntryTreeItem, EntryQuery, } from "./site.ts";
+export { MESSAGE_MAX_AGE_MS, signMessage, verifyMessage } from "./signed-message.ts";
+export { pageContextOf, siteStatics } from "./site.ts";
+export type { SiteOptions, SitePageSchema, ContentReads, DeliveryReads, LoadOptions, PageTreeItem, EntryTreeItem, EntryQuery, } from "./site.ts";