smoodly 0.0.51 → 0.0.53

package/dist/admin/shell/presence.d.ts

@@ -15,10 +15,11 @@ export type PresenceState = {
     status: PresenceStatus;
     others: PresenceEntry[];
 };
-/** The slice of a Realtime channel presence uses. */
+/** The channel presence uses: the service's socket (presence-socket.ts). */
 export type PresenceChannel = {
     subscribe(onStatus: (status: string) => void): void;
-    /** A session token for the socket (spec 2026-09-26 security pass §1): the channel policies admit by auth.uid(). */
+    /** The session renewed (its new pass): reconnect with a fresh ticket. The space's object admits a live session of a
+     *  member only. */
     setAuth(token: string): Promise<unknown>;
     track(state: Record<string, unknown>): Promise<unknown>;
     untrack(): Promise<unknown>;
@@ -39,31 +40,18 @@ export type Presence = {
     track(target: PresenceTarget | null): void;
     /** After a guarded op acked: tell the others. */
     announce(target: PresenceTarget, savedAt: string | null): void;
-    /** The session token was refreshed: re-authenticate the socket so the channel outlives the old token. No-op unless joined. */
+    /** The session renewed: reconnect the socket with a fresh ticket so the channel outlives the old pass. No-op unless joined. */
     setAuth(token: string): void;
     onSaved(listener: (event: SavedEvent) => void): () => void;
     getState(): PresenceState;
     subscribe(listener: () => void): () => void;
     dispose(): void;
 };
-export declare const shortName: (email: string) => string;
 /** The short names editing `target`, other than me, sorted and deduped. */
 export declare function editorsOf(others: PresenceEntry[], target: PresenceTarget): string[];
+/** A target as the channel carries it: one of the three kinds, a string id and locale. The service's object reads it too. */
+export declare const isTarget: (v: unknown) => v is PresenceTarget;
 export declare function createPresence(opts: {
     email: string;
     connect: () => PresenceChannel;
 }): Presence;
-/** What the shell needs from the auth client to follow refreshes — supabase-js's `auth` satisfies it. */
-export type RefreshSource = {
-    onAuthStateChange(cb: (event: string, session: {
-        access_token: string;
-    } | null) => void): {
-        data: {
-            subscription: {
-                unsubscribe(): void;
-            };
-        };
-    };
-};
-/** Re-send every refreshed session token to the socket (spec 2026-09-26 security pass §1). Returns the stop function. */
-export declare function followTokenRefresh(auth: RefreshSource, presence: Pick<Presence, "setAuth">): () => void;

package/dist/admin/shell/presence.js

@@ -1,15 +1,16 @@
 // Editing presence (spec 2026-09-26 concurrency §5): who has what open, and a
 // "saved" announcement, over ONE channel per space. Framework-free: the channel
-// is injected (presence-realtime.ts builds the supabase-js one; tests fake it),
+// is injected (presence-socket.ts builds the one over the service's socket; tests fake it),
 // the React glue is presence-context.tsx. Never awaited by anything — a failed
 // join leaves the admin exactly as without presence.
 const sameTarget = (a, b) => a.kind === b.kind && a.id === b.id && a.locale === b.locale;
-export const shortName = (email) => email.split("@")[0];
+const shortName = (email) => email.split("@")[0];
 /** The short names editing `target`, other than me, sorted and deduped. */
 export function editorsOf(others, target) {
     return [...new Set(others.filter((o) => sameTarget(o, target)).map((o) => shortName(o.email)))].sort();
 }
-const isTarget = (v) => typeof v === "object" && v !== null
+/** A target as the channel carries it: one of the three kinds, a string id and locale. The service's object reads it too. */
+export const isTarget = (v) => typeof v === "object" && v !== null
     && ["page", "entry", "global"].includes(v.kind)
     && typeof v.id === "string" && typeof v.locale === "string";
 export function createPresence(opts) {
@@ -93,11 +94,3 @@ export function createPresence(opts) {
         },
     };
 }
-/** Re-send every refreshed session token to the socket (spec 2026-09-26 security pass §1). Returns the stop function. */
-export function followTokenRefresh(auth, presence) {
-    const { data } = auth.onAuthStateChange((event, session) => {
-        if (event === "TOKEN_REFRESHED" && session)
-            presence.setAuth(session.access_token);
-    });
-    return () => data.subscription.unsubscribe();
-}

package/dist/admin/shell/session.d.ts

@@ -1,22 +1,29 @@
-import { type Session, type SupabaseClient } from "@supabase/supabase-js";
-import type { AuthConfig } from "../auth-config.ts";
-export type { AuthConfig };
-export type Arrival = "invite" | "recovery";
-/** What an auth email link says it is: GoTrue's implicit flow puts `type=` in the fragment; a query form is accepted too. */
-export declare function arrivalOf(hash: string, search: string): Arrival | null;
+import { type SignInConfig, type StoredSession } from "../session-flow.ts";
+export type SessionUser = StoredSession["user"];
 export type SessionState = {
     status: "loading";
 } | {
     status: "signed_out";
+    reason: "signed_out" | "refused";
+    message?: string;
 } | {
     status: "signed_in";
-    session: Session;
+    user: SessionUser;
 };
-export declare function useAdminSession(auth: AuthConfig): {
-    client: SupabaseClient;
+export declare function useSpaceSession({ apiUrl, spaceId, signIn }: {
+    apiUrl: string;
+    spaceId: string;
+    signIn: SignInConfig;
+}): {
     state: SessionState;
+    /** The current pass, read per call. */
     token: () => string | null;
-    /** The email link this visit arrived on, until the Set password screen is done. */
-    arrival: Arrival | null;
-    clearArrival: () => void;
+    /** Renews now (once at a time); true when a fresh pass is in hand. A refused refresh sends the person to sign in. */
+    renew: () => Promise<boolean>;
+    /** Ends this site's session; the signed-out page follows. */
+    signOut: () => Promise<void>;
+    /** Sends the person to sign in. */
+    signInAgain: () => Promise<void>;
+    /** Hears every new pass (a renewal here or in another tab). */
+    onRenew: (listener: (pass: string) => void) => () => void;
 };

package/dist/admin/shell/session.js

@@ -1,54 +1,121 @@
 "use client";
-// The editor's session, browser side: one Supabase client for the AUTH
-// project (smoodly.io's in the cloud, the customer's own in self-host —
-// the app passes the URL and publishable key). The token getter reads a
-// ref so the ops facade, created once, always sends the current token.
-// An auth email link (invite, reset) says what it is in the URL before
-// the client consumes the fragment; the shell shows Set password for it
-// (spec 2026-09-25 members management §6).
-import { useEffect, useRef, useState } from "react";
-import { createClient } from "@supabase/supabase-js";
-/** What an auth email link says it is: GoTrue's implicit flow puts `type=` in the fragment; a query form is accepted too. */
-export function arrivalOf(hash, search) {
-    const fromHash = new URLSearchParams(hash.replace(/^#/, "")).get("type");
-    const type = fromHash ?? new URLSearchParams(search).get("type");
-    return type === "invite" || type === "recovery" ? type : null;
-}
-export function useAdminSession(auth) {
-    const browser = typeof window !== "undefined";
-    // Read BEFORE the client exists: it consumes and strips the fragment as soon as it is constructed.
-    const [arrival, setArrival] = useState(() => browser ? arrivalOf(window.location.hash, window.location.search) : null);
-    const [client] = useState(() => createClient(auth.url, auth.key, {
-        // Own storage key: a self-hoster's own supabase-js client in the same
-        // browser must never share the admin's session slot (DESIGN.md §1).
-        auth: { autoRefreshToken: browser, persistSession: browser, detectSessionInUrl: browser, storageKey: "smoodly-auth" },
-    }));
+// The editor's session for this site's space, browser side (spec 2026-10-16 sign-in and the dashboard §2, §6): no
+// credentials are typed here. On load a one-time code in the fragment is exchanged and stripped; a stored session is
+// used, renewed five minutes before its pass expires; with neither, the person is sent to sign in (smoodly.io, or the
+// local Worker's dev page) and comes back with a code. A refused pass renews once, then sends them to sign in again;
+// Sign out ends this site's session and shows the signed-out page rather than redirecting, which would sign them
+// straight back in while their smoodly.io session lives. Another tab's renewal or sign out is adopted from the
+// `storage` event. The pure steps are admin/session-flow.ts.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { codeFrom, endSession, exchange, readSession, renew, RENEW_BEFORE_MS, resume, signInAddress, STORAGE_KEY } from "../session-flow.js";
+/** A renewal's timer fires up to this much later, so two tabs rarely post the same refresh at once. */
+const JITTER_MS = 30000;
+export function useSpaceSession({ apiUrl, spaceId, signIn }) {
     const [state, setState] = useState({ status: "loading" });
-    const current = useRef(null);
+    const [expiresAt, setExpiresAt] = useState(null);
+    const held = useRef(null);
+    const listeners = useRef(new Set());
+    const inflight = useRef(null);
+    const stores = () => ({ local: window.localStorage, tab: window.sessionStorage });
+    const adopt = useCallback((s) => {
+        held.current = s;
+        setExpiresAt(s.expiresAt);
+        setState({ status: "signed_in", user: s.user });
+        for (const l of listeners.current)
+            l(s.pass);
+    }, []);
+    const signInAgain = useCallback(async () => {
+        const back = window.location.origin + window.location.pathname + window.location.search;
+        window.location.assign(await signInAddress(signIn, spaceId, back, stores()));
+    }, [signIn, spaceId]);
+    const renewNow = useCallback(() => {
+        // A tab with no session (signed out here or in another tab) renews nothing and never redirects by itself.
+        if (!held.current)
+            return Promise.resolve(false);
+        inflight.current ?? (inflight.current = (async () => {
+            try {
+                const s = await renew(apiUrl, spaceId, stores(), held.current?.refresh ?? null);
+                if (s) {
+                    adopt(s);
+                    return true;
+                }
+                held.current = null;
+                await signInAgain();
+                return false;
+            }
+            catch {
+                // Offline or the service down: the session stays; the next call or timer tries again.
+                return false;
+            }
+            finally {
+                inflight.current = null;
+            }
+        })());
+        return inflight.current;
+    }, [apiUrl, spaceId, adopt, signInAgain]);
     useEffect(() => {
-        let active = true;
-        const apply = (session) => {
-            current.current = session;
-            setState(session ? { status: "signed_in", session } : { status: "signed_out" });
-        };
-        client.auth.getSession().then(({ data }) => {
-            if (!active)
+        let live = true;
+        void (async () => {
+            const code = codeFrom(window.location.hash);
+            if (code) {
+                // The code is good once: out of the address bar and the history entry before anything else.
+                window.history.replaceState(window.history.state, "", window.location.pathname + window.location.search);
+                const got = await exchange(apiUrl, spaceId, code, stores());
+                if (!live)
+                    return;
+                if ("refused" in got)
+                    setState({ status: "signed_out", reason: "refused", message: got.refused });
+                else
+                    adopt(got);
                 return;
-            apply(data.session);
-        }).catch(() => {
-            if (!active)
+            }
+            // The stored session, as it is or renewed; a service that cannot be reached keeps a still-valid pass and
+            // refuses, with a way back, only once it has expired (session-flow.ts resume).
+            const step = await resume(apiUrl, spaceId, stores(), Date.now());
+            if (!live)
                 return;
-            apply(null);
-        });
-        const { data } = client.auth.onAuthStateChange((event, session) => {
-            if (event === "PASSWORD_RECOVERY")
-                setArrival("recovery");
-            apply(session);
-        });
-        return () => {
-            active = false;
-            data.subscription.unsubscribe();
+            if (step.kind === "adopt")
+                adopt(step.session);
+            else if (step.kind === "refused")
+                setState({ status: "signed_out", reason: "refused", message: step.message });
+            else
+                await signInAgain();
+        })();
+        const onStorage = (e) => {
+            if (e.key !== STORAGE_KEY(spaceId))
+                return;
+            const s = readSession(window.localStorage, spaceId);
+            if (s) {
+                if (s.refresh !== held.current?.refresh)
+                    adopt(s);
+            }
+            else if (held.current) {
+                held.current = null;
+                setState({ status: "signed_out", reason: "signed_out" });
+            }
         };
-    }, [client]);
-    return { client, state, token: () => current.current?.access_token ?? null, arrival, clearArrival: () => setArrival(null) };
+        window.addEventListener("storage", onStorage);
+        return () => { live = false; window.removeEventListener("storage", onStorage); };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // Renew five minutes before the pass expires, a little later per tab.
+    useEffect(() => {
+        if (expiresAt === null)
+            return;
+        const wait = Math.max(0, expiresAt - RENEW_BEFORE_MS - Date.now()) + Math.floor(Math.random() * JITTER_MS);
+        const timer = setTimeout(() => { void renewNow(); }, wait);
+        return () => clearTimeout(timer);
+    }, [expiresAt, renewNow]);
+    return {
+        state,
+        token: () => held.current?.pass ?? null,
+        renew: renewNow,
+        signOut: async () => {
+            held.current = null;
+            setExpiresAt(null);
+            await endSession(apiUrl, spaceId, stores());
+            setState({ status: "signed_out", reason: "signed_out" });
+        },
+        signInAgain,
+        onRenew: (listener) => { listeners.current.add(listener); return () => { listeners.current.delete(listener); }; },
+    };
 }

package/dist/admin/ui/LocaleSwitcher.d.ts

@@ -1,8 +1,4 @@
 import type { AdminRegistry } from "../serialize.ts";
-/** Above this many supported locales the switch is a dropdown. */
-export declare const SEGMENTED_MAX = 3;
-/** "fi" → "Fi": the locale code as the pill reads it. */
-export declare const localeLabel: (locale: string) => string;
 export declare function LocaleSwitcher({ registry, present, parentLocales, value, adding, onSwitch, onAdd }: {
     registry: AdminRegistry;
     /** The locales the record has; `[value]` while nothing is loaded. */

package/dist/admin/ui/LocaleSwitcher.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Segmented } from "./primitives.js";
 /** Above this many supported locales the switch is a dropdown. */
-export const SEGMENTED_MAX = 3;
+const SEGMENTED_MAX = 3;
 /** "fi" → "Fi": the locale code as the pill reads it. */
-export const localeLabel = (locale) => locale.charAt(0).toUpperCase() + locale.slice(1);
+const localeLabel = (locale) => locale.charAt(0).toUpperCase() + locale.slice(1);
 export function LocaleSwitcher({ registry, present, parentLocales, value, adding, onSwitch, onAdd }) {
     const supported = registry.locales.supported;
     const missing = supported.filter((l) => !present.includes(l) && l !== value);

package/dist/admin/ui/primitives.d.ts

@@ -105,17 +105,6 @@ export declare function Segmented<T extends string>({ options, value, onChange,
         className?: string;
     } | undefined;
 }): import("react").JSX.Element;
-/** A pill row (the f.radio look, spec 2026-09-14 §5): no track, the chosen pill filled in the
- *  soft accent. For a small choice inside a table row, where a segmented control reads as tabs. */
-export declare function Pills<T extends string>({ options, value, onChange, disabled, title, label }: {
-    options: readonly T[];
-    value: T;
-    onChange(v: T): void;
-    disabled?: boolean;
-    /** Why the row is off, on every pill. */
-    title?: string;
-    label?(o: T): ReactNode;
-}): import("react").JSX.Element;
 export declare function StatusBadge({ status }: {
     status: string;
 }): import("react").JSX.Element;
@@ -133,9 +122,6 @@ export declare function SectionLabel({ children, action, caps, style }: {
     caps?: boolean;
     style?: CSSProperties;
 }): import("react").JSX.Element;
-export declare function Divider({ bleed }: {
-    bleed?: number;
-}): import("react").JSX.Element;
 /** The lines under a publish-validation banner: one per field, each focusing its widget
  *  when the screen can reveal it (spec 2026-09-14 §2). */
 export declare function FieldErrorList({ fields, onReveal }: {
@@ -151,6 +137,10 @@ export declare function Banner({ tone, children, onDismiss, revealKey }: {
      *  list shrinks as fields are fixed, so typing never scrolls. */
     revealKey?: string;
 }): import("react").JSX.Element;
+/** An upload's progress (spec 2026-10-18 media on R2 and Images §9): a bar and the percentage of the bytes sent. */
+export declare function UploadProgress({ fraction }: {
+    fraction: number;
+}): import("react").JSX.Element;
 export declare function cx(...parts: (string | false | null | undefined)[]): string;
 /** One line of a form's info block: a muted label, the value right-aligned and clipped. */
 export declare function InfoRow({ label, value, mono }: {

package/dist/admin/ui/primitives.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The design system's primitives, ported 1:1 from the handoff's
-// components/ set (design_handoff_smoodly_cms). Structure and dynamic
+// components/ set (the cool-blue look, in the tree until 2026-10-19; the shipped
+// tokens are design_handoff_smoodly_neutral/). Structure and dynamic
 // values live here; every static rule, and all hover/focus state, lives in
 // theme.tsx's stylesheet.
 import { Fragment, useEffect, useRef } from "react";
@@ -105,11 +106,6 @@ export function Segmented({ options, value, onChange, stretch, disabled, label,
             return (_jsx("button", { type: "button", className: cx("sm-seg__opt", extra?.className), "aria-pressed": o === value, disabled: disabled || extra?.disabled, title: extra?.title, onClick: () => onChange(o), children: label ? label(o) : o }, o));
         }) }));
 }
-/** A pill row (the f.radio look, spec 2026-09-14 §5): no track, the chosen pill filled in the
- *  soft accent. For a small choice inside a table row, where a segmented control reads as tabs. */
-export function Pills({ options, value, onChange, disabled, title, label }) {
-    return (_jsx("div", { className: cx("sm-pills", disabled && "sm-pills--disabled"), role: "radiogroup", children: options.map((o) => (_jsx("button", { type: "button", className: "sm-pill", "aria-pressed": o === value, disabled: disabled, title: title, onClick: () => onChange(o), children: label ? label(o) : o }, o))) }));
-}
 /* ── data ────────────────────────────────────────────────────────────── */
 // Keyed by the product labels of ui/status-label.ts (lowercased by StatusBadge).
 const STATUS_TONE = {
@@ -141,9 +137,6 @@ export function SaveIndicator({ state, pending = false }) {
 export function SectionLabel({ children, action, caps, style }) {
     return (_jsxs("div", { className: cx("sm-sectionlabel", caps && "sm-sectionlabel--caps"), style: style, children: [_jsx("span", { className: "sm-label", children: children }), action && _jsx("span", { style: { color: "var(--accent)", fontWeight: 600, fontSize: "var(--text-sm)" }, children: action })] }));
 }
-export function Divider({ bleed = 0 }) {
-    return _jsx("div", { className: "sm-divider", style: { margin: `0 -${bleed}px` } });
-}
 /** The lines under a publish-validation banner: one per field, each focusing its widget
  *  when the screen can reveal it (spec 2026-09-14 §2). */
 export function FieldErrorList({ fields, onReveal }) {
@@ -161,6 +154,11 @@ export function Banner({ tone, children, onDismiss, revealKey }) {
     }, [revealKey]);
     return (_jsxs("div", { ref: ref, className: `sm-banner sm-banner--${tone}`, role: tone === "error" ? "alert" : undefined, children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: children }), onDismiss && (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss", style: { background: "transparent", border: 0, color: "inherit", cursor: "pointer", font: "inherit", padding: 0 }, children: "\u00D7" }))] }));
 }
+/** An upload's progress (spec 2026-10-18 media on R2 and Images §9): a bar and the percentage of the bytes sent. */
+export function UploadProgress({ fraction }) {
+    const pct = Math.round(Math.min(1, Math.max(0, fraction)) * 100);
+    return (_jsxs("div", { className: "sm-upload", role: "progressbar", "aria-label": "Uploading", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, children: [_jsx("div", { className: "sm-upload__track", children: _jsx("div", { className: "sm-upload__fill", style: { width: `${pct}%` } }) }), _jsxs("span", { className: "sm-upload__pct", children: ["Uploading\u2026 ", pct, "%"] })] }));
+}
 export function cx(...parts) {
     return parts.filter(Boolean).join(" ");
 }

package/dist/admin/ui/theme.js

@@ -230,6 +230,8 @@ body:has(.sm-admin){margin:0}
    lit tile a build in flight, the warning tile a build that has not landed or a site that did not answer. */
 .sm-rail__deploy{margin-top:auto}
 .sm-rail__deploy+.sm-rail__foot{margin-top:0}
+/* A publish on its way to the site (plan 2026-10-14 publish through the queue): a quiet line above the Deploy tile
+   and the avatar, the warning colour when a delivery landed late or with an error. */
 .sm-rail__badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-round);background:var(--accent);color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center}
 .sm-rail__tile--lit{background:var(--accent-soft);color:var(--accent);animation:sm-rail-pulse 1.6s ease-in-out infinite}
 .sm-rail__tile--warn{background:var(--warn-soft);color:var(--warn)}
@@ -681,7 +683,6 @@ body:has(.sm-admin){margin:0}
 .sm-counter--over{color:var(--warn)}
 /* The page glyph beside the page title in the empty-selection inspector head. */
 .sm-pageglyph{width:10px;height:13px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}
-.sm-divider{height:1px;background:var(--line);flex:none}
 .sm-sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:8px}
 /* The overline: a small uppercase tracked heading for a group — the
    inspector's Spacing & layout / Advanced, the picker's Add to <zone> and
@@ -970,6 +971,11 @@ body:has(.sm-admin){margin:0}
 }
 /* The picker's drop bar: tall enough to aim a drag at (2026-09-25). */
 .sm-dropzone--bar{padding:28px 10px;font-size:var(--text-sm)}
+.sm-upload{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;max-width:280px;font-size:var(--text-sm);color:var(--text-muted)}
+.sm-upload__track{height:6px;border-radius:999px;background:var(--surface-inset);overflow:hidden}
+.sm-upload__fill{height:100%;background:var(--accent);border-radius:999px;transition:width 120ms linear}
+.sm-upload__pct{font-variant-numeric:tabular-nums}
+.sm-mediascreen__upload{padding:8px 20px 0}
 .sm-mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
 .sm-mediacard{
   display:flex;flex-direction:column;gap:4px;padding:6px;background:transparent;border:1.5px solid transparent;
@@ -999,7 +1005,7 @@ body:has(.sm-admin){margin:0}
 .sm-media__actions{display:flex;gap:6px}
 .sm-media__chip{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--surface-inset);border-radius:var(--radius-btn)}
 .sm-crop{display:grid;grid-template-columns:1fr 240px;gap:14px;min-height:0}
-.sm-crop__stage{position:relative;user-select:none;touch-action:none;background:var(--surface-inset);border-radius:var(--radius-md);overflow:hidden}
+.sm-crop__stage{position:relative;align-self:start;user-select:none;touch-action:none;background:var(--surface-inset);border-radius:var(--radius-md);overflow:hidden}
 .sm-crop__stage>img{display:block;width:100%;height:auto;pointer-events:none}
 .sm-crop__shade{position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
 .sm-crop__rect{position:absolute;outline:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);cursor:move;background:transparent}
@@ -1010,6 +1016,11 @@ body:has(.sm-admin){margin:0}
 .sm-crop__side{display:flex;flex-direction:column;gap:10px}
 .sm-crop__preview{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}
 .sm-crop__preview>img{position:absolute;max-width:none;display:block}
+.sm-crop__ghost{position:absolute;outline:1.5px dashed rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
+.sm-crop__follows{margin-left:4px;color:var(--accent)}
+.sm-crop__previews{display:flex;gap:8px;align-items:flex-start}
+.sm-crop__figure{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:4px}
+.sm-crop__figure>figcaption{font-size:11px;color:var(--text-muted)}
 .sm-mediascreen{display:grid;grid-template-columns:1fr 300px;column-gap:var(--gutter);flex:1;min-height:0}
 .sm-mediascreen__grid{padding:var(--table-pad);overflow:auto;background:var(--surface-form);border-radius:var(--radius-card-lg)}
 .sm-mediascreen__inspector{

package/dist/admin/validate.js

@@ -14,6 +14,7 @@ import { rowsProblems } from "../custom/rows.js";
 import { isCalendarDay, isInstant } from "./forms/date-picker.js";
 import { fits, misfitMessage } from "./drift.js";
 import { isSegment } from "../paths.js";
+import { isCrop } from "../media.js";
 /** A slug outside the path grammar, at publish (spec 2026-09-28 ASCII slugs §3). */
 export const SLUG_GRAMMAR_MESSAGE = "Use lowercase letters, digits and single hyphens, like my-post.";
 const subfields = (d) => d.fields && typeof d.fields === "object" ? d.fields : {};
@@ -81,7 +82,15 @@ function validateValue(path, value, d, errors, elements, scope) {
             errors.push({ field: path, message: "Not a date and time." });
         return;
     }
-    if (d.type === "image" || d.type === "video" || d.type === "file")
+    if (d.type === "image") {
+        // The crop window writes fractions inside the image (spec 2026-10-18 media on R2 and Images §6); the server cuts them.
+        const v = value;
+        const crops = v.crops === undefined ? [] : v.crops && typeof v.crops === "object" && !Array.isArray(v.crops) ? Object.values(v.crops) : [null];
+        if ((v.crop !== undefined && !isCrop(v.crop)) || crops.some((c) => !isCrop(c)))
+            errors.push({ field: path, message: "A crop lies outside the image." });
+        return;
+    }
+    if (d.type === "video" || d.type === "file")
         return;
     if (d.type === "list") {
         if (!Array.isArray(value))

package/dist/api-client.d.ts

@@ -0,0 +1,26 @@
+import type { ResolvedConfig } from "./config.ts";
+import { type PushBody } from "./push.ts";
+import { type ContentReads, type DeliveryReads } from "./site.ts";
+export type SmoodlyApiOptions = {
+    /** Without a trailing slash: `https://api.smoodly.io`, locally `http://localhost:8787`. */
+    apiUrl: string;
+    spaceId: string;
+    /** The secret key on a server, the publishable key where only published content is read. */
+    key: string;
+    config: ResolvedConfig;
+    /** Test seam; default the global fetch. */
+    fetch?: typeof fetch;
+    /** The schema push before the first call (spec 2026-10-16 the control plane §4): default, under NODE_ENV=development,
+     *  the config and the site's address as `live`; `false` sends none. A config change reloads the glue module in both
+     *  dev servers, which makes a new client and so a new push; an unchanged registry costs the service nothing. */
+    push?: false | PushBody;
+};
+/** The content API refused a read: its status, its code (`unauthorized`, `not_found`, `validation`, `internal`) and its message. */
+export declare class SmoodlyApiError extends Error {
+    readonly status: number;
+    readonly code: string;
+    constructor(status: number, code: string, message: string);
+}
+/** A site's reads over the content API: the same face as the service's own site, so the read layer and the shells run
+ *  unchanged. Every call counts as one read for the adapters' counters. */
+export declare function createSmoodlyApi(options: SmoodlyApiOptions): ContentReads & DeliveryReads;

package/dist/api-client.js

@@ -0,0 +1,107 @@
+// The site's reads over the content API (spec 2026-10-14 §1): one HTTP call per read, the key in the Authorization
+// header, the envelope `{ ok, data, tags }`. The statics (cacheKey, styles, custom, code pages) are computed from the
+// config exactly as the service's site computes them (site.ts siteStatics), so a cache key never disagrees across
+// the wire. A document's tags ride on the hit (SiteHit.tags), where the read layer takes them.
+import { countRead } from "./read-counter.js";
+import { pushBody, pushSchema } from "./push.js";
+import { siteOptions, siteStatics, } from "./site.js";
+/** The content API refused a read: its status, its code (`unauthorized`, `not_found`, `validation`, `internal`) and its message. */
+export class SmoodlyApiError extends Error {
+    constructor(status, code, message) {
+        super(message);
+        this.status = status;
+        this.code = code;
+        this.name = "SmoodlyApiError";
+    }
+}
+/** A site's reads over the content API: the same face as the service's own site, so the read layer and the shells run
+ *  unchanged. Every call counts as one read for the adapters' counters. */
+export function createSmoodlyApi(options) {
+    const apiUrl = options.apiUrl.replace(/\/+$/, "");
+    const base = `${apiUrl}/v1/spaces/${encodeURIComponent(options.spaceId)}`;
+    const doFetch = options.fetch ?? fetch;
+    const statics = siteStatics(siteOptions(options.config));
+    const localeOf = (o) => o?.locale ?? statics.locales.default;
+    const env = typeof process === "undefined" ? {} : process.env;
+    const push = options.push ?? (env.NODE_ENV === "development" ? pushBody(options.config, env, "live") : false);
+    /** One push per client, awaited by every call until it settles; its failure is logged, never thrown. */
+    let pushed = null;
+    const pushOnce = (body) => (pushed ?? (pushed = pushSchema({ apiUrl, spaceId: options.spaceId, key: options.key, fetch: doFetch }, body).then(() => undefined, (e) => console.error(`smoodly: the schema push failed — ${e instanceof Error ? e.message : String(e)}; the site runs against the schema the space has.`))));
+    async function call(path, params) {
+        if (push)
+            await pushOnce(push);
+        countRead();
+        const url = new URL(`${base}${path}`);
+        for (const [k, v] of Object.entries(params))
+            if (v !== undefined && v !== "")
+                url.searchParams.set(k, v);
+        let res;
+        try {
+            res = await doFetch(url.toString(), { headers: { authorization: `Bearer ${options.key}`, accept: "application/json" } });
+        }
+        catch (e) {
+            throw new TypeError(`smoodly: can't reach SMOODLY_API_URL (${apiUrl}): ${e instanceof Error ? e.message : String(e)}`);
+        }
+        const body = (await res.json().catch(() => null));
+        if (!body || !body.ok) {
+            throw new SmoodlyApiError(res.status, body?.code ?? "internal", body?.message ?? `smoodly: SMOODLY_API_URL (${apiUrl}) answered ${res.status} with no message.`);
+        }
+        return { data: body.data, tags: body.tags };
+    }
+    const draftParam = (o) => ({ draft: o?.draft ? "1" : undefined });
+    /** The response's tags on a published hit (the read layer takes them from there); a draft carries none. */
+    const withTags = (hit, tags, draft) => hit && hit.kind !== "redirect" && !draft ? { ...hit, tags: hit.tags ?? tags } : hit;
+    return {
+        locales: statics.locales,
+        homePageSlug: statics.homePageSlug,
+        cacheKey: statics.cacheKey,
+        styles: statics.styles,
+        custom: statics.custom,
+        codePage: statics.codePage,
+        async locate(locale, path) {
+            return (await call("/locate", { locale, path })).data;
+        },
+        async targetPaths(target) {
+            return (await call("/target-paths", { kind: target.kind, id: target.id })).data;
+        },
+        async load(target, locale, path, o) {
+            const draft = !!o?.draft || !!o?.version;
+            const r = await call("/load", { kind: target.kind, id: target.id, locale, path, draft: o?.draft ? "1" : undefined, version: o?.version });
+            return withTags(r.data, r.tags, draft);
+        },
+        async lookup(locale, path) {
+            const r = await call("/lookup", { locale, path });
+            return withTags(r.data.hit, r.tags, false);
+        },
+        async lookupWithGlobals(locale, path, items) {
+            const r = await call("/lookup", { locale, path, globals: items.map((i) => i.name).join(",") });
+            return { hit: withTags(r.data.hit, r.tags, false), globals: new Map(Object.entries(r.data.globals)) };
+        },
+        async getPagesTree(o) {
+            return (await call("/pages", { locale: localeOf(o), ...draftParam(o) })).data;
+        },
+        async getPage(target, o) {
+            return (await call("/page", { locale: localeOf(o), target, ...draftParam(o) })).data;
+        },
+        async getEntries(collection, o = {}) {
+            const { locale: _l, draft: _d, ...query } = o;
+            const q = Object.keys(query).length ? JSON.stringify(query) : undefined;
+            return (await call(`/entries/${encodeURIComponent(collection)}`, { locale: localeOf(o), query: q, ...draftParam(o) })).data;
+        },
+        async getEntry(collection, target, o) {
+            return (await call(`/entry/${encodeURIComponent(collection)}`, { locale: localeOf(o), target, ...draftParam(o) })).data;
+        },
+        async getEntriesTree(collection, o) {
+            return (await call(`/entries-tree/${encodeURIComponent(collection)}`, { locale: localeOf(o), ...draftParam(o) })).data;
+        },
+        async getGlobal(item, o) {
+            return (await call(`/global/${encodeURIComponent(item.name)}`, { locale: localeOf(o), ...draftParam(o) })).data;
+        },
+        async addresses(locale) {
+            return (await call("/addresses", { locale })).data;
+        },
+        async newestPublishedAt() {
+            return (await call("/status", {})).data.newestPublishedAt;
+        },
+    };
+}