smoodly 0.0.55 → 0.0.57

package/dist/admin/forms/FieldWidget.js

@@ -10,6 +10,7 @@ import { DatePicker } from "./DatePicker.js";
 import { optionsOf } from "../../fields.js";
 import { isHidden } from "../../conditions.js";
 import { cssProblem } from "../../css.js";
+import { linkProblem } from "../validate.js";
 import { Button, Field, Switch } from "../ui/primitives.js";
 import { fieldLabel } from "../field-label.js";
 import { patchObject } from "./list.js";
@@ -22,6 +23,8 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
     const message = errors?.[path] ?? (below ? errors?.[below] : undefined);
     // The descriptor's default shows while the value is absent (spec 2026-09-10 page fields §1).
     const value = valueProp === undefined && d.default !== undefined ? d.default : valueProp;
+    // A link the site would not render is marked as it is typed; publish refuses it with the same words.
+    const problem = d.type === "link" ? linkProblem(value) : null;
     // The custom section's rows (spec 2026-09-14 §6): the row cards instead of the generic list.
     if (d.widget === "rows") {
         const rows = _jsx(RowsWidget, { descriptor: d, value: value, onChange: onChange, errors: errors, path: path, inlinePath: inlinePath, onEditHere: onEditHere });
@@ -146,7 +149,7 @@ export function FieldWidget({ descriptor: d, value: valueProp, onChange, errors,
     // A <label> activates its first labelable descendant, so it may only wrap a
     // single control — around refList's rows, an object's fieldset or a list's
     // rows it would turn every click into a press of the first button.
-    return (_jsx(Field, { label: label(fieldKey), mark: mark, counter: counter, hint: hint, error: message, asDiv: asDiv, path: path, children: control }));
+    return (_jsx(Field, { label: label(fieldKey), mark: mark, counter: counter, hint: hint, error: message ?? problem ?? undefined, asDiv: asDiv, path: path, children: control }));
 }
 /** The richtext field while it is edited in the canvas (spec 2026-09-10 §5). */
 export function InlineNote({ onEditHere }) {

package/dist/admin/shell/IconRail.js

@@ -14,27 +14,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 2026-09-25; the route is /settings; every member has a page there since
 // Redirects, 2026-09-26, so the shell passes `settings` once the role is
 // known). The user avatar is pinned to the bottom and opens the account
-// flyout: the email, the theme toggle, "Your sites at smoodly.io" and Sign
+// flyout: the email, the theme toggle, "My Account" (at smoodly.io) and Sign
 // out (spec 2026-10-16 sign-in and the dashboard §6).
 //
 // Flyouts: click toggles, Esc closes and returns focus to the trigger,
 // ↑/↓ move between entries, a pointer down outside closes. A child being
 // active highlights its parent tile and the entry inside the menu.
 import { useEffect, useId, useRef, useState } from "react";
-import { Globe, Image, LibraryBig, PanelTop, RadioTower, Settings } from "lucide-react";
+import { ExternalLink, Globe, Image, LibraryBig, PanelTop, RadioTower, Settings } from "lucide-react";
 import { tileCopy } from "./deploy-tile.js";
 import { ThemeToggle } from "../ui/primitives.js";
 import { useAdminHref } from "./base.js";
 import { consoleLinks } from "./console-links.js";
+import { SMOODLY_VERSION } from "../../version.js";
 import { RouteLink } from "./RouteLink.js";
 /** Lucide at the rail's size and stroke (the tile's CSS restates both). */
 const ICON = { size: 18, strokeWidth: 2, "aria-hidden": true };
 /** The app icon, inlined: a package can't ship a file into the host app's
- *  /public. design_handoff_smoodly_neutral/assets/smoodly-logo.svg — the
- *  outer and inner shapes take --logo-outer / --logo-inner (white over
- *  navy on the frame), so a look decides its colours. */
+ *  /public. The wordmark's "s" on a rounded square (chosen 2026-10-23; the
+ *  same tile, green with a white s, is smoodly.io's favicon). The square takes
+ *  --logo-outer and the glyph --logo-inner, so a look decides its colours. */
 function AppIcon() {
-    return (_jsxs("svg", { className: "sm-rail__logo", viewBox: "0 0 28 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: [_jsx("path", { style: { fill: "var(--logo-outer)" }, d: "M0 16.1859C0 7.6335 7.88106 0 16.5324 0H16.6037C23.429 0 28 4.59428 28 10.8141C28 19.3666 20.2618 27 11.3279 27C4.43425 27 0 22.2645 0 16.1859Z" }), _jsx("path", { style: { fill: "var(--logo-inner)" }, d: "M7 14.7932C7 10.6754 10.6591 7 14.6757 7H14.7089C17.8777 7 20 9.21206 20 12.2068C20 16.3247 16.4072 20 12.2594 20C9.05876 20 7 17.7199 7 14.7932Z" })] }));
+    return (_jsxs("svg", { className: "sm-rail__logo", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Smoodly", children: [_jsx("rect", { width: "64", height: "64", rx: "14", style: { fill: "var(--logo-outer)" } }), _jsx("path", { style: { fill: "var(--logo-inner)" }, transform: "translate(14.382 -4.365) scale(0.7123)", d: "M30.5851 22.9763C36.7891 22.9763 45.6052 24.6681 49.3603 26.5237L46.2583 42.2415C41.6869 40.113 35.2653 38.4212 29.4422 38.4212C26.0137 38.4212 23.7825 39.1852 23.7825 40.9862C23.7825 42.1869 24.9797 42.8964 27.1021 43.333L31.5647 44.3153C40.8162 46.3346 45.5508 51.1373 45.5508 58.505C45.5508 73.4587 33.9592 79.1345 18.939 79.1345C11.4833 79.1345 4.24536 77.3335 0.109375 75.6963L3.42905 58.9416C8.97998 61.8341 16.4356 63.6351 21.2247 63.6351C24.6532 63.6351 26.9933 62.7619 26.9933 60.6334C26.9933 59.4327 26.1226 58.505 23.5648 58.0684L19.7553 57.3043C12.5173 55.9399 6.31336 50.9735 6.31336 43.0055C6.31336 30.6169 15.6737 23.0309 30.6939 23.0309L30.5851 22.9763Z" })] }));
+}
+/** A menu link that opens smoodly.io in a new tab, with the arrow that says so. */
+function ExtLink({ href, onClick, children }) {
+    return (_jsxs("a", { role: "menuitem", className: "sm-rail__menu-item", href: href, target: "_blank", rel: "noreferrer", onClick: onClick, children: [_jsx("span", { children: children }), _jsx(ExternalLink, { className: "sm-rail__ext", size: 13, strokeWidth: 1.75, "aria-hidden": "true" })] }));
 }
 export function IconRail({ registry, active, email, settings = true, deploy, onSignOut }) {
     const adminHref = useAdminHref();
@@ -92,9 +97,9 @@ export function IconRail({ registry, active, email, settings = true, deploy, onS
     const collectionsOpen = open === "collections" || (hovered && open === null);
     const name = email?.split("@")[0] ?? "Editor";
     const initials = name.slice(0, 2).toUpperCase();
-    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsx(AppIcon, {}), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(PanelTop, { ...ICON }), adminHref("/pages")), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", onMouseEnter: () => setHovered(true), onMouseLeave: hoverLeave, children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": collectionsOpen, "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsx("span", { className: "sm-rail__tile", children: _jsx(LibraryBig, { ...ICON }) }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsx("ul", { className: "sm-rail__menu sm-rail__menu--collections", role: "menu", id: menuId("collections"), "data-open": collectionsOpen, children: collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: adminHref(`/${c.name}`), "aria-current": c.name === active ? "page" : undefined, onClick: () => { close(); hoverLeave(); }, children: _jsx("span", { children: c.title }) }) }, c.name))) })] })), link("media", "Media", _jsx(Image, { ...ICON }), adminHref("/media")), registry.globals.length > 0 && link("globals", "Site", _jsx(Globe, { ...ICON }), adminHref("/globals")), settings && link("settings", "Settings", _jsx(Settings, { ...ICON }), adminHref("/settings"))] }), deploy && (() => {
+    return (_jsxs("nav", { className: "sm-rail", "aria-label": "Primary", ref: root, onKeyDown: onKeyDown, children: [_jsxs("div", { className: "sm-rail__item", children: [_jsx("button", { type: "button", className: "sm-rail__brand", title: "Smoodly", "aria-haspopup": "menu", "aria-expanded": open === "brand", "aria-controls": menuId("brand"), onClick: () => toggle("brand"), children: _jsx(AppIcon, {}) }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--brand", role: "menu", id: menuId("brand"), "data-open": open === "brand", children: [_jsx("li", { role: "none", children: _jsx(ExtLink, { href: consoleLinks().project, onClick: close, children: "This site at smoodly.io" }) }), _jsx("li", { role: "none", children: _jsx(ExtLink, { href: consoleLinks().docs, onClick: close, children: "Documentation" }) }), _jsxs("li", { className: "sm-rail__menu-version", role: "presentation", children: ["Smoodly ", SMOODLY_VERSION] })] })] }), _jsxs("ul", { className: "sm-rail__list", children: [link("pages", "Pages", _jsx(PanelTop, { ...ICON }), adminHref("/pages")), collections.length > 0 && (_jsxs("li", { className: "sm-rail__item", onMouseEnter: () => setHovered(true), onMouseLeave: hoverLeave, children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-current": collectionActive ? "page" : undefined, "aria-haspopup": "menu", "aria-expanded": collectionsOpen, "aria-controls": menuId("collections"), onClick: () => toggle("collections"), children: [_jsx("span", { className: "sm-rail__tile", children: _jsx(LibraryBig, { ...ICON }) }), _jsx("span", { className: "sm-rail__label", children: "Collections" })] }), _jsx("ul", { className: "sm-rail__menu sm-rail__menu--collections", role: "menu", id: menuId("collections"), "data-open": collectionsOpen, children: collections.map((c) => (_jsx("li", { role: "none", children: _jsx(RouteLink, { role: "menuitem", className: "sm-rail__menu-item", href: adminHref(`/${c.name}`), "aria-current": c.name === active ? "page" : undefined, onClick: () => { close(); hoverLeave(); }, children: _jsx("span", { children: c.title }) }) }, c.name))) })] })), link("media", "Media", _jsx(Image, { ...ICON }), adminHref("/media")), registry.globals.length > 0 && link("globals", "Site", _jsx(Globe, { ...ICON }), adminHref("/globals")), settings && link("settings", "Settings", _jsx(Settings, { ...ICON }), adminHref("/settings"))] }), deploy && (() => {
                 const copy = tileCopy(deploy.status, Date.now());
                 const id = menuId("deploy");
                 return (_jsxs("div", { className: "sm-rail__item sm-rail__deploy", "data-state": deploy.status.state, children: [_jsxs("button", { type: "button", className: "sm-rail__btn", "aria-haspopup": "menu", "aria-expanded": open === "deploy", "aria-controls": id, onClick: () => toggle("deploy"), title: copy.detail, children: [_jsxs("span", { className: `sm-rail__tile${copy.lit ? " sm-rail__tile--lit" : ""}${copy.warn ? " sm-rail__tile--warn" : ""}`, children: [_jsx(RadioTower, { ...ICON }), copy.badge && _jsx("span", { className: "sm-rail__badge", "aria-label": `${copy.badge} changes waiting`, children: copy.badge })] }), _jsx("span", { className: "sm-rail__label", children: copy.label })] }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: id, "data-open": open === "deploy", children: [_jsx("li", { className: "sm-rail__menu-detail", role: "presentation", children: copy.detail }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", disabled: copy.action === null || deploy.busy, title: copy.disabledReason ?? undefined, onClick: () => { close(); deploy.onDeploy(); }, children: copy.action === "retry" ? "Deploy again" : "Deploy now" }) }), copy.disabledReason && _jsx("li", { className: "sm-rail__menu-note", role: "presentation", children: copy.disabledReason })] })] }));
-            })(), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: email ?? name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx("a", { role: "menuitem", className: "sm-rail__menu-item", href: consoleLinks().sites, target: "_blank", rel: "noreferrer", onClick: close, children: "Your sites at smoodly.io" }) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
+            })(), _jsxs("div", { className: "sm-rail__item sm-rail__foot", children: [_jsx("button", { type: "button", className: "sm-rail__user", title: name, "aria-haspopup": "menu", "aria-expanded": open === "user", "aria-controls": menuId("user"), onClick: () => toggle("user"), children: initials }), _jsxs("ul", { className: "sm-rail__menu sm-rail__menu--up", role: "menu", id: menuId("user"), "data-open": open === "user", children: [_jsx("li", { className: "sm-rail__menu-title", role: "presentation", children: email ?? name }), _jsx("li", { role: "none", children: _jsx(ThemeToggle, {}) }), _jsx("li", { role: "none", children: _jsx(ExtLink, { href: consoleLinks().account, onClick: close, children: "My Account" }) }), _jsx("li", { role: "none", children: _jsx("button", { type: "button", role: "menuitem", className: "sm-rail__menu-item", onClick: () => { close(); onSignOut(); }, children: "Sign out" }) })] })] })] }));
 }

package/dist/admin/shell/console-links.d.ts

@@ -2,4 +2,7 @@ export declare function setConsole(url: string, spaceId: string): void;
 export declare const consoleLinks: () => {
     sites: string;
     members: string;
+    project: string;
+    account: string;
+    docs: string;
 };

package/dist/admin/shell/console-links.js

@@ -1,11 +1,16 @@
-// Where the admin points at smoodly.io (spec 2026-10-16 sign-in and the dashboard §5, §6): the account menu's "Your
-// sites at smoodly.io" and the Members page's "Manage members at smoodly.io", deep links into the dashboard the
-// service names (`GET /v1/auth`'s consoleUrl). Set once by the entry from the page's data.
+// Where the admin points at smoodly.io (spec 2026-10-16 sign-in and the dashboard §5, §6): the rail's Smoodly menu
+// (this site, the docs; 2026-10-23), the account menu's "My Account" and the Members page's "Manage members at
+// smoodly.io". The dashboard links are deep links into the console the service names (`GET /v1/auth`'s consoleUrl),
+// set once by the entry from the page's data; the docs are smoodly.io itself.
 let console = { url: "https://smoodly.io", spaceId: "" };
 export function setConsole(url, spaceId) {
     console = { url: url.replace(/\/+$/, ""), spaceId };
 }
+const SITE = "https://smoodly.io";
 export const consoleLinks = () => ({
     sites: `${console.url}/projects`,
     members: `${console.url}/spaces/${encodeURIComponent(console.spaceId)}/members`,
+    project: `${console.url}/spaces/${encodeURIComponent(console.spaceId)}`,
+    account: `${console.url}/account`,
+    docs: `${SITE}/docs`,
 });

package/dist/admin/tree-ops.js

@@ -1,5 +1,6 @@
 import { GLOBAL_NODE_TYPE } from "../global.js";
 import { setAtPath, unsetAtPath } from "./field-paths.js";
+import { optionsOf } from "../fields.js";
 export function zoneOf(tree, id) {
     for (const [zone, nodes] of Object.entries(tree.zones)) {
         if (nodes.some((n) => n.id === id))
@@ -123,12 +124,15 @@ const EMPTY_BY_TYPE = { refList: [], object: {} };
  * broken-image icon or a stray zero, worse than nothing at all. With no
  * sample, leave the key out of `fields` entirely rather than seed a lie. */
 const ABSENT_WHEN_UNSAMPLED = new Set(["image", "video", "file", "number"]);
+/** A required choice shows its first option (FieldWidget renders no blank one), so a new node stores it too — as a
+ *  list item does (forms/list.ts) — and publish never says Required for a choice the editor sees made. */
+const firstChoice = (d) => (d.type === "select" || d.type === "radio") && d.optional !== true ? optionsOf(d.options)[0]?.value : undefined;
 /** Also fills an element node (an `AdminElement` is a section shape plus contexts). Never seeds `styles` or `css`: Default stores nothing (spec 2026-09-14 §2). */
 export function nodeFromSample(section, id) {
     const fields = {};
     const settings = {};
     for (const [key, d] of Object.entries(section.fields)) {
-        const sampled = section.sample?.[key] ?? d.default ?? (d.type === "boolean" ? false : undefined);
+        const sampled = section.sample?.[key] ?? d.default ?? firstChoice(d) ?? (d.type === "boolean" ? false : undefined);
         if (sampled !== undefined)
             fields[key] = sampled;
         else if (ABSENT_WHEN_UNSAMPLED.has(d.type))
@@ -140,7 +144,7 @@ export function nodeFromSample(section, id) {
             fields[key] = EMPTY_BY_TYPE[d.type] ?? "";
     }
     for (const [key, d] of Object.entries(section.settings)) {
-        const v = section.sample?.[key] ?? d.default;
+        const v = section.sample?.[key] ?? d.default ?? firstChoice(d);
         if (v !== undefined)
             settings[key] = v;
     }

package/dist/admin/ui/theme.js

@@ -52,7 +52,7 @@ const TOKENS_LIGHT = `
      dark mode that washed out over the white page, 2026-09-10). */
   --plus-bg:#DDEBE4; --plus-hover:#D0E3D9; --plus-fg:#1C6E5B;
   --plus-icon-bg:#1C6E5B; --plus-icon-fg:#FFFFFF; --plus-shadow:none;
-  --logo-color:var(--accent); --logo-outer:#FFFFFF; --logo-inner:var(--frame);
+  --logo-color:var(--accent); --logo-outer:#0B5A49; --logo-inner:#5FC9A0; /* the rail's app icon: deep green square, mint s (2026-10-23) */
 
   --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);
   --status-changes-fg:var(--amber-700); --status-changes-bg:var(--amber-50);
@@ -92,7 +92,6 @@ const TOKENS_DARK = `
   --btn-secondary-bg:var(--surface); --btn-secondary-hover:#2C3049;
   --switch-bg:var(--line-dashed);
   --toolbar-bg:#0F1120; --toolbar-fg:#EEF0F5;
-  --logo-inner:#151727;
 
   --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);
   --status-changes-fg:var(--amber-300); --status-changes-bg:rgba(232,184,90,.14);
@@ -134,9 +133,9 @@ const SCALE = `
   --outline-row-h:36px; --seg-pad-y:7px; --tabs-pad:3px;
   --plus-h:32px; --plus-pad:0 14px 0 6px; --plus-label:inline;
   --nav-w:72px; --inspector-w:360px; --gutter:20px;
-  /* The frame is 6px above, right of and below the sheet; the rail fills the left edge. */
-  --frame-pad:6px; --frame-pad-top:6px; --shell-gap:0px; --sheet-radius:20px; --sheet-pad:0 24px 24px;
-  --rail-pad:18px 6px 16px; --rail-logo:block; --rail-logo-opacity:.8; --rail-tile-w:44px; --rail-tile-h:40px; --rail-tile-radius:12px;
+  /* The frame is 8px above, right of and below the sheet (6px in the handoff, +2px 2026-10-23); the rail fills the left edge. */
+  --frame-pad:8px; --frame-pad-top:8px; --shell-gap:0px; --sheet-radius:20px; --sheet-pad:0 24px 24px;
+  --rail-pad:18px 6px 16px; --rail-logo:block; --rail-logo-opacity:1; --rail-tile-w:44px; --rail-tile-h:40px; --rail-tile-radius:12px;
   --topbar-pad:0; --back-size:32px; --back-bg:var(--surface);
   --table-pad:8px 12px; --table-top:80px; --canvas-pad:28px 40px 0; --card-pad:16px 18px; --card-gap:12px; --form-pad:32px 40px;
   --border:1px solid var(--line);
@@ -159,8 +158,10 @@ export const ADMIN_CSS = `
 ${cascade(".sm-admin", SCALE, TOKENS_LIGHT, TOKENS_DARK)}
 
 /* The admin owns the viewport; a host <body> margin would push it into a
-   page scrollbar. Scoped by :has, so only a page holding the admin is touched. */
+   page scrollbar, and the page's overscroll bounce would pull the frame off
+   the top edge (2026-10-23). Scoped by :has, so only a page holding the admin is touched. */
 body:has(.sm-admin){margin:0}
+html:has(.sm-admin),body:has(.sm-admin){overscroll-behavior:none}
 .sm-admin,.sm-admin *,.sm-admin *::before,.sm-admin *::after{box-sizing:border-box}
 .sm-admin{
   font-family:var(--font-sans);font-size:var(--text-md);line-height:1.4;
@@ -181,7 +182,7 @@ body:has(.sm-admin){margin:0}
 
 /* ── shell ─────────────────────────────────────────────────────────── */
 /* Rail | main. The shell is the frame (design_handoff_smoodly_neutral/
-   components/AppShell.html): navy, 6px above, right of and below the main
+   components/AppShell.html): navy, 8px above, right of and below the main
    column, which is the white sheet with a 20px radius and its own inner
    padding; the rail fills the frame's left edge.
    The main column stacks the top bar over one tile-shaped region: list,
@@ -204,9 +205,20 @@ body:has(.sm-admin){margin:0}
   padding:var(--rail-pad);background:var(--bar-bg);border-right:var(--bar-border);color:var(--rail-fg);
   font:500 10px/1 var(--font-sans);position:relative;
 }
-/* The logo: white outer / navy inner on the frame, at a little under full
-   opacity so it does not glare (2026-09-25). */
-.sm-rail__logo{width:20px;height:auto;display:var(--rail-logo);flex:none;margin-bottom:6px;opacity:var(--rail-logo-opacity)} /* 20px wide (asked for 2026-09-26; 28px before) */
+/* The app icon (the Smoodly menu's trigger): the deep green square with the
+   mint s, 26px wide (2026-10-23; the lozenge before it was 20px, asked for
+   2026-09-26, at .8 opacity). */
+.sm-rail__brand{appearance:none;background:none;border:0;padding:0;margin-bottom:6px;cursor:pointer;display:block;border-radius:6px;color:inherit}
+/* Hover (2026-10-23): the app icon and the avatar brighten a touch. */
+.sm-rail__logo{transition:filter .15s}
+.sm-rail__brand:hover .sm-rail__logo{filter:brightness(1.3)}
+.sm-rail__user{transition:background .15s}
+.sm-rail__user:hover{background:color-mix(in srgb,var(--accent-soft),#fff 60%)}
+.sm-rail__brand:focus-visible{outline:2px solid var(--rail-active-fg);outline-offset:2px;box-shadow:none}
+.sm-rail__logo{width:26px;height:auto;display:var(--rail-logo);flex:none;opacity:var(--rail-logo-opacity)}
+.sm-rail__ext{width:13px;height:13px;flex:none;margin-left:12px;opacity:.45}
+.sm-rail__menu-item:hover .sm-rail__ext,.sm-rail__menu-item:focus-visible .sm-rail__ext{opacity:.8}
+.sm-rail__menu-version{font-size:var(--text-xs);color:var(--text-subtle);padding:7px 10px 4px;margin-top:3px;border-top:1px solid var(--line)}
 .sm-rail__list{display:flex;flex-direction:column;gap:8px;width:100%;margin:0;padding:0;list-style:none}
 .sm-rail__item{position:relative}
 .sm-rail__btn{
@@ -257,6 +269,7 @@ body:has(.sm-admin){margin:0}
 .sm-rail__menu--up{top:auto;bottom:0}
 /* The Collections flyout opens on hover, so it is roomier (the names at --text-lg) and an invisible
    bridge spans the 6px gap so the pointer can cross from the rail without closing it. */
+.sm-rail__menu--brand{width:220px}
 .sm-rail__menu--collections{width:208px;padding:8px;gap:2px;font-size:var(--text-lg)}
 .sm-rail__menu--collections::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:8px}
 .sm-rail__menu--collections .sm-rail__menu-item{padding:9px 12px}
@@ -636,8 +649,8 @@ body:has(.sm-admin){margin:0}
    below the inset so it reads on the cream ground of the top bar and the
    canvas meta row as well as on a white card. */
 .sm-seg{display:flex;gap:2px;padding:3px;background:var(--seg-bg);border-radius:var(--radius-btn)}
-/* A locale switch: each option wide enough to read as a tab, not a chip. */
-.sm-seg--locale .sm-seg__opt{min-width:64px}
+/* A locale switch: each option wide enough to read as a tab, not a chip; the codes at 12px (2026-10-23). */
+.sm-seg--locale .sm-seg__opt{min-width:64px;font-size:var(--text-sm)}
 /* The Canvas | Structure switch: two icon options. */
 .sm-seg--view .sm-seg__opt{padding:4px 8px;display:grid;place-items:center}
 .sm-seg--stretch{width:100%}

package/dist/admin/validate.d.ts

@@ -19,6 +19,10 @@ export type ValidationScope = {
     fields?: Record<string, unknown>;
     settings?: Record<string, unknown>;
 };
+/** A link field takes only what the site renders (richtext-href.ts's rule): the widget says so as the editor types,
+ *  publish refuses it (register 2026-09-26, the content-surface sweep). */
+export declare const LINK_MESSAGE = "A link starts with https://, http://, mailto:, tel:, / for a page on this site, # or ?.";
+export declare const linkProblem: (value: unknown) => string | null;
 /** The element schemas an element node is validated against (spec 2026-09-08 block nodes §2). */
 export type ElementDescs = Record<string, {
     fields: Record<string, Desc>;

package/dist/admin/validate.js

@@ -14,9 +14,14 @@ 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 { safeHref } from "../richtext-href.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.";
+/** A link field takes only what the site renders (richtext-href.ts's rule): the widget says so as the editor types,
+ *  publish refuses it (register 2026-09-26, the content-surface sweep). */
+export const LINK_MESSAGE = "A link starts with https://, http://, mailto:, tel:, / for a page on this site, # or ?.";
+export const linkProblem = (value) => typeof value === "string" && value.trim() !== "" && safeHref(value) === null ? LINK_MESSAGE : null;
 const subfields = (d) => d.fields && typeof d.fields === "object" ? d.fields : {};
 const itemOf = (d) => d.item && typeof d.item === "object" ? d.item : undefined;
 const isEmpty = (v) => v === undefined || v === null || v === "" || (Array.isArray(v) && v.length === 0);
@@ -47,6 +52,10 @@ function validateValue(path, value, d, errors, elements, scope) {
         errors.push({ field: path, message: SLUG_GRAMMAR_MESSAGE });
         return;
     }
+    if (d.type === "link" && linkProblem(value)) {
+        errors.push({ field: path, message: LINK_MESSAGE });
+        return;
+    }
     if (d.type === "richtext") {
         if (!hasContent(value)) {
             if (!mayBeAbsent(d))

package/dist/astro/components/RichText.astro

@@ -19,5 +19,6 @@ const chunks = richtextChunks(doc);
   // An own name only: `constructor` or `toString` must not find Object's members.
   const View = Object.prototype.hasOwnProperty.call(views.elements, chunk.name) ? views.elements[chunk.name] : undefined;
   if (!View) { console.warn(`smoodly: no src/elements/${chunk.name}.astro for element "${chunk.name}" — skipping.`); return null; }
-  return <View {...chunk.fields} settings={{ ...info.element(chunk.name).defaults, ...chunk.settings }} />;
+  // `styles={{}}` as the React pairing hands it (pairing.tsx: `styles ?? {}`), so a view that reads styles never throws here.
+  return <View {...chunk.fields} settings={{ ...info.element(chunk.name).defaults, ...chunk.settings }} styles={{}} />;
 })}

package/dist/astro/preview.d.ts

@@ -1,8 +1,11 @@
 export declare const DRAFT_COOKIE = "smoodly-draft";
 export declare const PREVIEW_BASE = "/_smoodly/preview";
-export declare function draftCookieValue(secret: string): Promise<string>;
-/** `verify` compares in constant time. */
-export declare function isDraftCookie(value: string | undefined, secret: string): Promise<boolean>;
+/** Seconds: the browser's Max-Age and the signed expiry agree. */
+export declare const DRAFT_COOKIE_MAX_AGE: number;
+/** `2.<expiry ms>.<hex signature>`; `now` is for tests. */
+export declare function draftCookieValue(secret: string, now?: number): Promise<string>;
+/** `verify` compares in constant time; an expired value is refused before the key is touched. */
+export declare function isDraftCookie(value: string | undefined, secret: string, now?: number): Promise<boolean>;
 /** The page path a preview address names ("/" for the base itself), or null when `pathname` is not one. */
 export declare function previewPath(pathname: string): string | null;
 /** The page path a preview address may rewrite to: never the admin, never a preview address again (a

package/dist/astro/preview.js

@@ -1,25 +1,38 @@
 // The preview address and its key (DESIGN.md Vision, preview per framework; spec 2026-10-02 astro cloud
 // fit §7): Astro serves every draft under PREVIEW_BASE, to a browser that holds the draft cookie. The
-// cookie's value is an HMAC of a fixed message under the site's secret key: the draft operation, which
-// only a signed-in editor can call, is the only thing that can make one. Web Crypto only, so the code
-// runs on any host.
+// cookie's value is an HMAC under the site's secret key over a message carrying its expiry: the draft
+// operation, which only a signed-in editor can call, is the only thing that can make one, and a value
+// ends twelve hours after it was made, with the browser's Max-Age (register 2026-10-05: before, one
+// fixed value served every editor for as long as the key stood). Web Crypto only, so the code runs on
+// any host.
 export const DRAFT_COOKIE = "smoodly-draft";
 export const PREVIEW_BASE = "/_smoodly/preview";
+/** Seconds: the browser's Max-Age and the signed expiry agree. */
+export const DRAFT_COOKIE_MAX_AGE = 12 * 3600;
 const encoder = new TextEncoder();
-const MESSAGE = encoder.encode("smoodly-draft:v1");
+const VERSION = "2";
+const message = (expiry) => encoder.encode(`smoodly-draft:v${VERSION}:${expiry}`);
 const keyOf = (secret) => crypto.subtle.importKey("raw", encoder.encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["sign", "verify"]);
-export async function draftCookieValue(secret) {
+/** `2.<expiry ms>.<hex signature>`; `now` is for tests. */
+export async function draftCookieValue(secret, now = Date.now()) {
     if (!secret)
         throw new Error("smoodly: the draft cookie needs SMOODLY_SECRET_KEY.");
-    const signature = await crypto.subtle.sign("HMAC", await keyOf(secret), MESSAGE);
-    return [...new Uint8Array(signature)].map((b) => b.toString(16).padStart(2, "0")).join("");
+    const expiry = now + DRAFT_COOKIE_MAX_AGE * 1000;
+    const signature = await crypto.subtle.sign("HMAC", await keyOf(secret), message(expiry));
+    return `${VERSION}.${expiry}.${[...new Uint8Array(signature)].map((b) => b.toString(16).padStart(2, "0")).join("")}`;
 }
-/** `verify` compares in constant time. */
-export async function isDraftCookie(value, secret) {
-    if (!secret || !value || !/^[0-9a-f]{64}$/.test(value))
+/** `verify` compares in constant time; an expired value is refused before the key is touched. */
+export async function isDraftCookie(value, secret, now = Date.now()) {
+    if (!secret || !value)
         return false;
-    const signature = Uint8Array.from(value.match(/../g), (pair) => parseInt(pair, 16));
-    return crypto.subtle.verify("HMAC", await keyOf(secret), signature, MESSAGE);
+    const m = /^2\.(\d{1,16})\.([0-9a-f]{64})$/.exec(value);
+    if (!m)
+        return false;
+    const expiry = Number(m[1]);
+    if (!(expiry > now))
+        return false;
+    const signature = Uint8Array.from(m[2].match(/../g), (pair) => parseInt(pair, 16));
+    return crypto.subtle.verify("HMAC", await keyOf(secret), signature, message(expiry));
 }
 /** The page path a preview address names ("/" for the base itself), or null when `pathname` is not one. */
 export function previewPath(pathname) {

package/dist/astro/richtext.js

@@ -1,4 +1,4 @@
-import { escapeHtml, isResolvedImage, safeHref } from "../richtext-href.js";
+import { escapeHtml, isResolvedImage, safeHref, textOf } from "../richtext-href.js";
 import { ELEMENT_NODE, IMAGE_NODE } from "../richtext-walk.js";
 const asRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v) ? v : {};
 const WRAP = { paragraph: "p", bulletList: "ul", orderedList: "ol", listItem: "li", blockquote: "blockquote" };
@@ -26,7 +26,7 @@ export function richtextChunks(doc) {
         }
         switch (node.type) {
             case "text":
-                html += withMarks(escapeHtml(node.text ?? ""), node.marks ?? []);
+                html += withMarks(escapeHtml(textOf(node.text)), node.marks ?? []);
                 return;
             case "heading": {
                 const level = Math.min(6, Math.max(1, Math.round(Number(node.attrs?.level ?? 1) || 1)));

package/dist/astro/routes/admin.js

@@ -6,7 +6,7 @@
 import { AsyncLocalStorage } from "node:async_hooks";
 import { createAdminHandler } from "../../admin/handler.js";
 import { expire } from "../cache.js";
-import { DRAFT_COOKIE, PREVIEW_BASE, draftCookieValue } from "../preview.js";
+import { DRAFT_COOKIE, DRAFT_COOKIE_MAX_AGE, PREVIEW_BASE, draftCookieValue } from "../preview.js";
 import { output } from "smoodly:build";
 import { adminDeps, secret } from "../server.js";
 export const prerender = false;
@@ -29,7 +29,7 @@ const handle = createAdminHandler(() => ({
             enable: async () => {
                 const { context } = effects();
                 context.cookies.set(DRAFT_COOKIE, await draftCookieValue(secret()), {
-                    path: PREVIEW_BASE, httpOnly: true, sameSite: "lax", secure: secure(context),
+                    path: PREVIEW_BASE, httpOnly: true, sameSite: "lax", secure: secure(context), maxAge: DRAFT_COOKIE_MAX_AGE,
                 });
             },
             disable: () => effects().context.cookies.delete(DRAFT_COOKIE, { path: PREVIEW_BASE }),

package/dist/config.js

@@ -19,12 +19,12 @@ function normalizeRegistry(config) {
         }
     }
     return {
-        sections: (config.registry.sections ?? []).map((s) => schemaOnly(s)),
-        elements: (config.registry.elements ?? []).map((e) => schemaOnly(e)),
+        sections: (config.registry.sections ?? []).map((s) => schemaOnly(s, "registry.sections")),
+        elements: (config.registry.elements ?? []).map((e) => schemaOnly(e, "registry.elements")),
         collections,
         globals: config.registry.globals ?? [],
         // Page types only: an entry page is a view, registered with defineViews, and schemaOnly refuses it here.
-        pages: (config.registry.pages ?? []).map((p) => schemaOnly(p)),
+        pages: (config.registry.pages ?? []).map((p) => schemaOnly(p, "registry.pages")),
     };
 }
 /** Names are unique per kind (plan 2026-10-02 registration split): a section and a collection may share one. */
@@ -152,6 +152,9 @@ function assertLocales(config) {
     }
     if (!supported.includes(def))
         throw new Error(`smoodly: the default locale "${def}" is not in the supported list.`);
+    const twice = supported.find((code, i) => supported.indexOf(code) !== i);
+    if (twice !== undefined)
+        throw new Error(`smoodly: the locale "${twice}" is listed twice in supported — list each locale once.`);
 }
 function assertTimeZone(config) {
     if (config.timeZone === undefined)

package/dist/css.js

@@ -10,6 +10,10 @@ export const CSS_MAX = 4000;
 const REFUSED = [
     [/@import/i, "@import is not allowed."],
     [/url\s*\(/i, "url() is not allowed."],
+    // The other image functions take a bare string, so they can fetch as url() can.
+    [/image-set\s*\(/i, "image-set() is not allowed."],
+    [/image\s*\(/i, "image() is not allowed."],
+    [/src\s*\(/i, "src() is not allowed."],
     [/expression\s*\(/i, "expression() is not allowed."],
     [/behavior\s*:/i, "behavior: is not allowed."],
     [/<\//, '"</" is not allowed.'],

package/dist/custom/index.js

@@ -8,6 +8,9 @@ export function withCustomSchema(sections, toolset) {
     return [...sections, customSchema(toolset)];
 }
 export function resolveCustom(input) {
+    // The pre-split shape (custom.RichText) would be dropped without a word; an untyped config can still carry it.
+    if (input && "RichText" in input)
+        throw new Error("smoodly: custom.RichText is a view — give the bound RichText to defineViews({ RichText }), not to the config.");
     const breakpoint = input?.breakpoint ?? DEFAULT_BREAKPOINT;
     if (!isCssLength(breakpoint))
         throw new Error(`smoodly: custom.breakpoint "${breakpoint}" must be a length like "48rem" or "768px".`);

package/dist/entry-store.d.ts

@@ -14,6 +14,9 @@ export type EntryLocale = {
     /** The draft version's saved time as the store's own text (spec 2026-09-26 concurrency §1). Null with no pointer. */
     draftSavedAt: string | null;
     publishedVersionId: string | null;
+    /** When the published snapshot last moved (null never published): what a published read shows as `updatedAt`, so a
+     *  draft save after it moves nothing on the site (register 2026-09-30). */
+    publishedAt: number | null;
     updatedAt: number;
     /** The editor's email behind the last write that touched this row; null for the seed and scripts (spec 2026-09-13 history §2). */
     updatedBy: string | null;

package/dist/image/markup.js

@@ -36,7 +36,21 @@ function srcsetOf(cut, width, d) {
 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));
+    return frameFor({ width: rect.width, height: rect.height, hotspot }, box);
+}
+/** `sizes` describes the box; a frame wider than the box shows the cut at `k` times that width, so each length is
+ *  scaled, or the browser picks a candidate narrower than what it draws (register 2026-09-08). Each entry is an
+ *  optional media condition in parentheses and a length, which calc() may wrap. */
+function scaleSizes(sizes, k) {
+    if (k <= 1.005)
+        return sizes;
+    const factor = Math.round(k * 1000) / 1000;
+    return sizes.split(",").map((entry) => {
+        const m = /^(\s*)(\([^)]*\)\s*)?(.+?)(\s*)$/.exec(entry);
+        if (!m)
+            return entry;
+        return `${m[1]}${m[2] ?? ""}calc(${m[3]} * ${factor})${m[4]}`;
+    }).join(",");
 }
 export function imageMarkup(image, options) {
     const loading = options.priority ? "eager" : options.loading ?? "lazy";
@@ -71,12 +85,14 @@ export function imageMarkup(image, options) {
     if (rect && image.cut) {
         const own = rect.width / rect.height;
         const box = options.aspect ? parseAspect(options.aspect) : own;
+        const frame = Math.abs(box / own - 1) < 0.005 ? null : frameOverCut(image, rect, box);
+        const shown = frame && options.sizes ? { sizes: scaleSizes(options.sizes, frame.width / 100) } : sizes;
         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),
+                ...srcsetOf(image.cut, rect.width, delivery), ...shown, ...tag, width: rect.width, height: rect.height,
+                style: frame ? frameStyle(frame) : FULL,
             },
         };
     }

package/dist/marks.d.ts

@@ -12,8 +12,10 @@ export declare const BLANK_ATTR = "data-smd-blank";
  *  editor sizes the frame to the reported height, so the document's own viewport must never scroll
  *  (2026-09-26): a fractional content height (4595.3px in a 4595px frame) left it scrollable by a hair,
  *  and a trackpad scroll over the canvas showed the frame's overlay scrollbar. Hidden overflow drops no
- *  layout, and the live site never carries this. */
-export declare const BRIDGE_CSS = "html{overflow:hidden}[data-smd-node][data-smd-blank]{min-height:7rem}";
+ *  layout, and the live site never carries this. For the same reason every wheel over the frame belongs
+ *  to the editor's scroller (2026-11-13): a site's own `overscroll-behavior: none` on its root stops the
+ *  wheel from chaining out of the frame, so the rule sets it back, over whatever the site says. */
+export declare const BRIDGE_CSS = "html{overflow:hidden;overscroll-behavior:auto!important}[data-smd-node][data-smd-blank]{min-height:7rem}";
 /** The element that renders a field's value verbatim. */
 export declare const FIELD_ATTR = "data-smd-field";
 /** A list item's or object field's root: scopes the field names inside it. */

package/dist/marks.js

@@ -11,8 +11,10 @@ export const BLANK_ATTR = "data-smd-blank";
  *  editor sizes the frame to the reported height, so the document's own viewport must never scroll
  *  (2026-09-26): a fractional content height (4595.3px in a 4595px frame) left it scrollable by a hair,
  *  and a trackpad scroll over the canvas showed the frame's overlay scrollbar. Hidden overflow drops no
- *  layout, and the live site never carries this. */
-export const BRIDGE_CSS = `html{overflow:hidden}[${NODE_ATTR}][${BLANK_ATTR}]{min-height:7rem}`;
+ *  layout, and the live site never carries this. For the same reason every wheel over the frame belongs
+ *  to the editor's scroller (2026-11-13): a site's own `overscroll-behavior: none` on its root stops the
+ *  wheel from chaining out of the frame, so the rule sets it back, over whatever the site says. */
+export const BRIDGE_CSS = `html{overflow:hidden;overscroll-behavior:auto!important}[${NODE_ATTR}][${BLANK_ATTR}]{min-height:7rem}`;
 /** The element that renders a field's value verbatim. */
 export const FIELD_ATTR = "data-smd-field";
 /** A list item's or object field's root: scopes the field names inside it. */

package/dist/read-shapes.d.ts

@@ -56,6 +56,7 @@ export declare function toEntryItem(record: EntryRecord, fields: Record<string,
     locale: string;
     locales: Record<string, LocaleAlternate | null>;
     seo?: Seo;
+    draft?: boolean;
 }): EntryItem;
 /** One page as a read returns it: no record, no tree. */
 export declare function toPageItem(hit: SitePage): PageItem;

package/dist/read-shapes.js

@@ -3,9 +3,12 @@ import { SEO_KEY } from "./seo.js";
 export function toEntryItem(record, fields, o) {
     // The reserved `$seo` values are Smoodly's: they leave as `seo`, never as a field.
     const { [SEO_KEY]: _seo, ...rest } = fields;
+    const row = record.locales[o.locale];
+    // A published read shows when the published snapshot last moved; the draft read follows the live row.
+    const updatedAt = (o.draft ? null : row?.publishedAt ?? null) ?? row?.updatedAt ?? record.updatedAt;
     return {
         id: record.id, path: o.path, locale: o.locale, locales: o.locales,
-        updatedAt: record.locales[o.locale]?.updatedAt ?? record.updatedAt, fields: rest,
+        updatedAt, fields: rest,
         ...(o.seo ? { seo: o.seo } : {}),
     };
 }

package/dist/registration.d.ts

@@ -2,7 +2,8 @@ export type SchemaOr<S> = S | {
     schema: S;
 };
 export declare function schemaOf<S extends object>(x: SchemaOr<S>): S;
-/** The schema a public builder was given, refusing a paired component (plan 2026-10-02 registration split). */
+/** The schema a public builder was given, refusing a paired component (plan 2026-10-02 registration split) and a
+ *  plain function, which would pass as a schema named after itself (register 2026-10-03); `where` names the list. */
 export declare function schemaOnly<S extends {
     name: string;
-}>(x: S): S;
+}>(x: S, where?: string): S;

package/dist/registration.js

@@ -2,9 +2,14 @@ export function schemaOf(x) {
     const carried = x.schema;
     return carried !== null && typeof carried === "object" ? carried : x;
 }
-/** The schema a public builder was given, refusing a paired component (plan 2026-10-02 registration split). */
-export function schemaOnly(x) {
+/** The schema a public builder was given, refusing a paired component (plan 2026-10-02 registration split) and a
+ *  plain function, which would pass as a schema named after itself (register 2026-10-03); `where` names the list. */
+export function schemaOnly(x, where) {
     const carried = x.schema;
+    if (typeof x === "function" && (carried === null || typeof carried !== "object")) {
+        const name = String(x.name || "anonymous");
+        throw new Error(`smoodly: ${where ?? "a registration"} holds a function "${name}", not a schema — register the schema (${name}Schema) and give defineViews the component.`);
+    }
     if (carried !== null && typeof carried === "object") {
         if (carried.kind === "entryPage") {
             const c = String(carried.collection);