smoodly 0.0.16 → 0.0.17

package/README.md

@@ -24,15 +24,73 @@ Implemented:
   real component carrying `.schema`; drift between schema and view is a
   compile error at the pairing; style select defaults apply in hard-coded
   JSX use; `Props<typeof schema>` infers required/optional/select types
-- `z.sections([...]).max(n)` / `z.freeform` / `z.locked` — component
-  references in, names stored
+- `z.sections([...]).max(n)` / `z.freeform({ sections, custom? })` / `z.locked` — component
+  references in, names stored; `custom: true` lets editors add a custom section there
 - `smoodly.toolset` — plain values, element refs serialized to names
 - `smoodly.collection` — descriptors + admin hints; ref thunks resolve
   post-evaluation and infer the target entry shape
-- `defineConfig` — registry name-uniqueness + the automatic standard-style
-  merge (`resolvedStyles`: section keys win, `styleDefaults: false|{omit}`)
-- `<smoodly.Section>` — root wrapper: `as`, string styles → kebab-cased
-  data attributes, className/style passthrough
+- `defineConfig` — registry name-uniqueness, the `styles` CSS values
+  behind Smoodly's styles set (`spacing.sm/md/lg`, `width.narrow/wide/full`;
+  package fallbacks fill the rest) and the `css: true` gate for the
+  custom-CSS box (spec 2026-09-14)
+- `<smoodly.Section>` — the root wrapper every section renders through:
+  `as`, Smoodly's `styles` steps rendered INLINE (`padding-top`,
+  `padding-bottom`, `text-align`, `--smd-width`; Default renders nothing),
+  the node's scoped `<style>` child (`[data-smd-node="…"]{…}`),
+  `data-smd-node` always, every other prop spread onto the root; settings
+  are never turned into attributes — the view writes its own
+- Four namespaces on a node (spec 2026-09-14, plan A): `fields`
+  (content), `settings` (the developer's knobs — any builder, never
+  localized, interpreted by the view; `meta` is gone), `styles`
+  (Smoodly's set: `spacingTop`, `spacingBottom`, `width`, `align`, each
+  an optional radio — `styles: false | { omit }` on a schema opts out),
+  `css` (the snippet; `css: false` on a schema removes the box).
+  `styles.ts` holds the descriptors and `inlineStyles`; `css.ts` refuses
+  `@import`, `url(`, `expression(`, `behavior:`, `</`, more than 4000
+  characters and unbalanced braces — on the escape-decoded snippet too —
+  and `safeCss`/`scopedCss` strip and scope at render. Publish validates
+  settings and css (`validateNode`); saves stay lenient.
+- Conditional fields (spec 2026-09-14 §12): every builder takes
+  `.hidden(f.when(path).is(v))` (`isNot`, `in`, `isEmpty`, `isNotEmpty`);
+  a bare path is a sibling, `fields.`/`settings.` crosses namespaces, an
+  unknown path throws at registration (`assertConditions`). One
+  `isHidden` in `conditions.ts` drives the form and the validator; a
+  hidden field's stored value is kept.
+- The custom section (spec 2026-09-14 §6, plan B, 2026-09-15): the
+  editor's own block, `Custom section` at the bottom of the "+" picker in
+  a `z.freeform({ custom: true })` zone. One flat node `{ type: "custom",
+  fields: { rows: [{ spans, gap, align, reverse, columns: [richtext…] }] },
+  styles, css? }` — the shape is ordinary descriptors (`custom/schema.ts`,
+  the list carries `widget: "rows"`), so `descriptorAt`, the media walk,
+  the validator and inline editing understand it with no special case.
+  `custom/rows.ts` is the pure reconcile: `renormalize` (integers ≥ 1
+  summing to 12, largest remainder), `setColumnCount` (a new column takes
+  the last span; a removed column folds into the last survivor, blank
+  paragraphs dropped — never silent deletion), `setSpan`, `spanAtX`,
+  `presetsFor`, `rowsProblems` (`Spans must sum to 12.`, `Between 1 and 6
+  columns.`, `One span per column.`), `columnsLabel`. `custom/css.ts`
+  emits the scoped layout CSS from the stored numbers and whitelisted
+  keywords only — one grid per row by `data-row`, gap `1rem · 2rem ·
+  3rem`, one `@media (max-width: <breakpoint>)` that stacks every row
+  (`.smd-row--reverse` flips the stack); `createCustomSection` renders
+  through `<smoodly.Section>` with `data-custom`, `.smd-row` /
+  `.smd-col` marked `rows.<i>` / `columns.<j>`, richtext through the
+  project's bound `RichText` or the root renderer over `elements`, the
+  layout `<style>` before the editor's css so the box wins.
+  `config.custom: { breakpoint?, toolset?, RichText? }` (default `48rem`
+  and the richtext default toolset plus `image`; the breakpoint must be a
+  length) resolves onto `config.custom` / `site.custom`; `renderPage`
+  registers the renderer under the `custom` type; the resolver and both
+  page stores carry the custom schema (`withCustomSchema`,
+  `PageStoreOptions.custom`) so column images resolve and count as usage;
+  publish runs `validateCustomNode` (structure through `rowsProblems`,
+  the columns' richtext, the css). In the admin: `AdminRegistry.custom`
+  (one synthetic section), `admin/custom-section.ts`, the picker entry
+  `Custom section · Your own rows of columns`, `RowsWidget` (a card per
+  row: `Columns` stepper, `Widths` bar with `1/2 · 1/2`-style presets,
+  `Gap`, `Vertical align`, `Reverse on mobile`, `Column N` editors,
+  `+ Add row`) over `SpanBar` (pointer drag in twelfths, arrow keys),
+  `Custom section · N columns` labels, deep-copy on duplicate.
 
 - `smoodly.schema.page` / `smoodly.page` / `<Zone>` / `renderPage` — the
   pages runtime: policies normalized to plain data, tree nodes mapped to
@@ -252,8 +310,9 @@ Implemented:
   derived path as the Path column, and per row its kind, status, sibling
   position and whether it may take children), rendered by
   `admin/shell/PagesList.tsx` with a row menu over the tree ops (New
-  subpage, New subpath, Add page here, Rename…, Move up / Move down,
-  Delete); a mount a fixed page claims opens that index page's editor
+  subpage, New subpath, Add page here, Rename…, Delete — reordering is
+  the grip's: drag or its arrow keys, since 2026-09-15); a mount a fixed
+  page claims opens that index page's editor
   on click like any page row (2026-09-09), a bare mount opens the
   collection list. The editor
   is keyed by id, with a locale switcher loading that locale's own tree
@@ -298,12 +357,12 @@ Implemented:
   `getPage(pathOrId)`, `getEntries("articles", { where, order, limit,
   parent })`, `getEntry("articles", idOrPath)` (an id or a path — a bare
   slug is refused, since its unit would sit under a tag no op fires) and
-  `getShared("header")`. Typed by the registry (names are checked, fields
+  `getGlobal("header")`. Typed by the registry (names are checked, fields
   typed), the live draft inside the editor preview, and outside it one
   `unstable_cache` unit per distinct call under a tag the admin ops
   expire: `pages:tree` (every page op that changes the listing),
   `entries:<collection>` (every entry write), `page:<id>`, `entry:<id>`,
-  `shared:<name>`. `filterPageTree(items, keep)` prunes a tree for a nav
+  `global:<name>`. `filterPageTree(items, keep)` prunes a tree for a nav
   (a dropped parent drops its subtree).
 - `smoodly/next` — `createPageRenderer`, the site-route seam over that
   layer, bound once by the app like `createAdminOpHandler`. The two route
@@ -357,18 +416,20 @@ Implemented:
   the only way the node gets there — it also covers pages that existed
   before a locked zone was added to their schema.
 
-- Shared content (spec 2026-09-07): `smoodly.shared({ name, title, section })`
-  registers a visual item, `smoodly.shared({ name, title, fields })` an
+- Global content (spec 2026-09-07; `shared` → `global` in code
+  2026-09-15, spec 2026-09-14 §7): `smoodly.global({ name, title, section })`
+  registers a visual item, `smoodly.global({ name, title, fields })` an
   object item; one registration materializes as a singleton entry in
-  every supported locale. `site.getShared(item, { locale })` and the Next
-  glue's `q.getShared("footer", { locale })` fetch it code-side (the
-  renderer's `getSmoodlyShared(item, { locale })` still works); the
+  every supported locale. `site.getGlobal(item, { locale })` and the Next
+  glue's `q.getGlobal("footer", { locale })` fetch it code-side (the
+  renderer's `getSmoodlyGlobal(item, { locale })` still works); the
   editor places a visual item in a zone from the "+" picker as a linked
-  `{ type: "shared", fields: { item, ref } }` node the resolve pass
+  `{ type: "global", fields: { item, ref } }` node the resolve pass
   rewrites into the section, and `z.locked(footer)` binds a zone to one.
-  Edited on its own admin page under Shared content (`/admin/shared/<name>`),
-  with "used on N pages" from `refs`. Wired through the `shared` option
-  on the entry store and the site layer.
+  Edited on its own admin page under Globals (`/admin/globals/<name>`),
+  with "used on N pages" from `refs`. Wired through the `globals` option
+  on the entry store and the site layer; a visual item's settings, styles
+  and css ride its row under `$settings`, `$styles` and `$css`.
 
 - Lists and editable objects (spec 2026-09-07 list field): `f.list(item)`
   holds any builder but another list and refuses a ref or `.localized()`
@@ -429,6 +490,79 @@ after both are on the registry. From the repo root:
 `prepublishOnly` rebuilds each package. The Claude Code skill
 `.claude/skills/releasing-smoodly` carries the same order with its checks.
 
+## Follow-ups (logged 2026-09-15, custom section spec §6, plan B)
+
+- Inline editing of a column on the canvas is OFF (2026-09-15, after the
+  first day's use): a click on a column reveals its editor in the
+  inspector (`onFieldClick` in `EditorView.tsx` skips the session for the
+  `custom` type). The marks, paths and session code are in place and
+  tested; turn it on once a walk on a real device passes.
+- A canvas drag on column edges (today the bar in the inspector).
+- A background for a custom section from a config palette.
+- Elements as direct column children (today through richtext's menus).
+- A per-zone cap on columns (`custom: { columns: 2 }` or similar).
+- `--container` is a soft convention: the rows read
+  `var(--smd-width, var(--container, none))` and `var(--smd-gutter, 1rem)`;
+  a project without those variables gets full-width rows with a 1rem
+  gutter. Documented, not enforced.
+- Presets exist for 2, 3 and 4 columns; 5 and 6 have the bar only.
+- Rows reorder with the ↑/↓ buttons only; no grip, no keyboard drag.
+- An empty column has no box on the live page (an empty paragraph
+  renders 0px tall), so it cannot be clicked into from the canvas; the
+  inspector's `Column N` editor is the way in. A `min-height` in editor
+  mode would give it a target.
+- An empty column publishes (its richtext descriptor is `optional`);
+  whether publish should refuse a row of only empty columns is open.
+- Growing a row copies the LAST span before renormalizing, so `[5, 7]` →
+  `[3, 5, 4]`, not thirds; a preset is one click away. Equal thirds on
+  grow would be the other reasonable rule.
+- The picker's click cannot be unit-tested (no DOM in the suite); the
+  walk covers it. A jsdom environment for the admin tests is a future
+  tooling item.
+- No migration: the `rows: true` zone flag became `custom: true` and
+  `config.rows` is gone; no stored data changed shape.
+- A column carries no project class: the starters extend their `.prose`
+  rules to `.smd-col` so headings, figures and callouts inside a column
+  read like body text. A project on its own stylesheet does the same, or
+  targets `[data-custom]`. A `columnClass` in `config.custom` would
+  remove that step.
+
+## Follow-ups (logged 2026-09-15, section settings spec, plan A)
+
+Upgrade note: stored trees, global entries and element nodes changed
+shape (`styles` → `settings`, `meta` gone, the `global` node type and
+`global:` ids, `$settings`/`$styles`/`$css` on global rows). No migration
+tool — reset and reseed a development database (`supabase db reset`,
+`npm run seed`); no installs predate the change.
+
+- A class-mapping API for projects that want the wrapper to emit
+  classes instead of inline values (DESIGN.md OQ 13).
+- `f.global()` — a ref field on a section that renders a global item.
+- An AI helper filling the CSS box from a prompt (the box stores CSS,
+  never a prompt, so the helper only fills it).
+- `and` / `or` conditions; today one `f.when()` per field.
+- A condition inside a list item can read the item's siblings and the
+  top-level namespaces, not another item; per-item scoped `settings.`
+  references inside lists are not a thing yet.
+- An element's settings cannot be hidden by the enclosing section's
+  settings: an element card's scope is the element's own fields and
+  settings.
+- A hidden field's refs still count as usage in the refs index (its value
+  is kept, so the edge is real; whether usage should hide with it is open).
+- The css refusal list grew past the spec's verbatim six in a security
+  review of the wrapper: the regexes run on the escape-decoded snippet too
+  (`\75 rl(` cannot spell `url(`) and unbalanced braces are refused as
+  `Braces must balance.` (a `}` cannot step out of the `[data-smd-node]`
+  block). Recorded here and in DESIGN.md.
+- The starters' `.prose figure img` is now inline-block without
+  `width: 100%`, so a richtext image narrower than the column follows the
+  section's `align` step; a photo wider than the column still fills it.
+- The Globals page has no tab row: Content's groups, then a `Settings`
+  label and the Settings groups, stacked. A tab row there would match the
+  canvas card.
+- `InspectorFields` filters hidden entries per render; a section with
+  many conditions re-evaluates every keystroke. Fine at the sizes seen.
+
 ## Follow-ups (logged 2026-09-14, collections draft/publish spec)
 
 - Publish integrity for an entry's own refs: an entry can publish while
@@ -1038,8 +1172,9 @@ the toolbar instead of pushing the content.
 - Canvas drag: the overlay should reuse `ui/sortable.ts` across the
   iframe boundary; `useSortable` measures container children, which the
   overlay's ghost rows can be.
-- The Pages row menu's Move up / Move down could retire once the grip's
-  arrow keys are familiar; they stay for now as the discoverable path.
+- ~~The Pages row menu's Move up / Move down could retire once the grip's
+  arrow keys are familiar; they stay for now as the discoverable path.~~
+  Retired 2026-09-15, with the outline rows' ↑/↓; list-field rows keep theirs.
 - The grip's arrow keys in the pages tree step one VISIBLE slot with the
   depth clamped — among siblings in a flat run, but across a depth change
   the step follows the clamp. Documented as is.

package/dist/admin/client-ops.js

@@ -1,7 +1,7 @@
 const GROUPS = {
     pages: ["list", "get", "create", "saveDraft", "publish", "unpublish", "discardDraft", "delete", "rename", "move", "setTemplate", "addLocale", "removeLocale", "listVersions", "restore"],
     entries: ["list", "get", "create", "save", "setStatus", "discardDraft", "delete", "move", "addLocale", "removeLocale", "listVersions", "getVersion", "restore"],
-    shared: ["list", "get", "save", "setStatus", "discardDraft", "listVersions", "getVersion", "restore"],
+    globals: ["list", "get", "save", "setStatus", "discardDraft", "listVersions", "getVersion", "restore"],
     assets: ["list", "get", "beginUpload", "finishUpload", "update", "delete", "usage"],
     preview: ["enable", "disable"],
 };

package/dist/admin/custom-section.d.ts

@@ -0,0 +1,10 @@
+import type { AdminRegistry, AdminSection } from "./serialize.ts";
+import type { TreeNode } from "../render.tsx";
+import type { ZonePolicy } from "../zones.ts";
+export declare const customSection: (registry: Pick<AdminRegistry, "custom">) => AdminSection;
+/** Only a freeform zone that says so takes a custom section (the developer's per-zone switch). */
+export declare const allowsCustom: (policy: ZonePolicy | undefined) => boolean;
+/** A fresh node from the registry's sample — deep-copied, so two inserts never share a rows array. */
+export declare function customNode(registry: Pick<AdminRegistry, "custom">, id: string): TreeNode;
+/** The outline, hover and selection label: `Custom section · 2 columns` (the first row's count). */
+export declare const customNodeLabel: (node: TreeNode) => string;

package/dist/admin/custom-section.js

@@ -0,0 +1,10 @@
+import { CUSTOM_NODE_TYPE, columnsLabel } from "../custom/index.js";
+export const customSection = (registry) => registry.custom;
+/** Only a freeform zone that says so takes a custom section (the developer's per-zone switch). */
+export const allowsCustom = (policy) => policy?.kind === "freeform" && policy.custom === true;
+/** A fresh node from the registry's sample — deep-copied, so two inserts never share a rows array. */
+export function customNode(registry, id) {
+    return { id, type: CUSTOM_NODE_TYPE, fields: structuredClone(registry.custom.sample ?? { rows: [] }) };
+}
+/** The outline, hover and selection label: `Custom section · 2 columns` (the first row's count). */
+export const customNodeLabel = (node) => columnsLabel(node.fields?.rows);

package/dist/admin/editor/CanvasOverlay.d.ts

@@ -5,16 +5,16 @@ export type OverlaySelection = {
     node: TreeNode;
     rect: BridgeRect;
     title: string;
-    shared: boolean;
+    global: boolean;
     locked: boolean;
     /** Rendered by the site's layout, not placed in a zone: no tree gestures (spec 2026-09-13 §2). */
     layout?: boolean;
 };
-export declare function CanvasOverlay({ emptyZones, hoverRect, hoverShared, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }: {
+export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }: {
     emptyZones: ZoneRect[];
     hoverRect: BridgeRect | undefined;
-    /** The hovered block is a shared item: the ring takes the shared colour. */
-    hoverShared?: boolean;
+    /** The hovered block is a global item: the ring takes the global colour. */
+    hoverGlobal?: boolean;
     selection: OverlaySelection | null;
     plusButtons: PlusButton[];
     /** The marked field under the pointer, inside the selected section (spec 2026-09-10 §2). */

package/dist/admin/editor/CanvasOverlay.js

@@ -7,7 +7,7 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 // itself never touches the iframe.
 import { useState } from "react";
 import { IconButton } from "../ui/primitives.js";
-export function CanvasOverlay({ emptyZones, hoverRect, hoverShared, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }) {
+export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onRemove, }) {
     const [hoverPlus, setHoverPlus] = useState(null);
     return (_jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [emptyZones.map((z) => (_jsxs("div", { className: "sm-dashed", style: {
                     position: "absolute", left: z.x + 12, top: z.y, width: Math.max(0, z.w - 24),
@@ -15,14 +15,14 @@ export function CanvasOverlay({ emptyZones, hoverRect, hoverShared, selection, p
                 }, children: [z.zone, " \u00B7 empty"] }, `empty-${z.zone}`))), hoverRect && (_jsx("div", { style: {
                     position: "absolute", left: hoverRect.x, top: hoverRect.y,
                     width: hoverRect.w, height: hoverRect.h,
-                    outline: `1.5px solid color-mix(in srgb, var(${hoverShared ? "--selection-shared" : "--selection"}) 45%, transparent)`,
+                    outline: `1.5px solid color-mix(in srgb, var(${hoverGlobal ? "--selection-global" : "--selection"}) 45%, transparent)`,
                     outlineOffset: -1.5, borderRadius: "var(--selection-radius)",
                 } })), fieldHover && !(editing && editing.node === fieldHover.node && editing.path === fieldHover.path) && (_jsx("div", { className: "sm-fieldhover", style: { position: "absolute", left: fieldHover.x, top: fieldHover.y, width: fieldHover.w, height: fieldHover.h } })), editing && (_jsx("div", { className: "sm-fieldedit", style: { position: "absolute", left: editing.x, top: editing.y, width: editing.w, height: editing.h } })), selection && (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                             position: "absolute", left: selection.rect.x, top: selection.rect.y,
                             width: selection.rect.w, height: selection.rect.h,
-                            outline: selection.shared ? "var(--outline-selection-shared)" : "var(--outline-selection)", outlineOffset: -1.5,
+                            outline: selection.global ? "var(--outline-selection-global)" : "var(--outline-selection)", outlineOffset: -1.5,
                             borderRadius: "var(--selection-radius)",
-                        } }), _jsxs("span", { className: selection.shared ? "sm-blocktag sm-blocktag--shared" : "sm-blocktag", style: { position: "absolute", left: selection.rect.x, top: selection.rect.y }, children: [selection.title, selection.shared && " · shared", selection.locked && " · locked"] }), !selection.layout && (_jsx("div", { className: "sm-blocktoolbar", style: {
+                        } }), _jsxs("span", { className: selection.global ? "sm-blocktag sm-blocktag--global" : "sm-blocktag", style: { position: "absolute", left: selection.rect.x, top: selection.rect.y }, children: [selection.title, selection.global && " · global", selection.locked && " · locked"] }), !selection.layout && (_jsx("div", { className: "sm-blocktoolbar", style: {
                             position: "absolute", left: selection.rect.x + selection.rect.w - 8, top: selection.rect.y + 8,
                             transform: "translateX(-100%)", pointerEvents: "auto",
                         }, children: selection.locked ? (_jsx("span", { className: "sm-blocktoolbar__note", children: "fields only" })) : (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Move up", tone: "inverse", onClick: () => onMove(selection.node.id, -1), children: "\u2191" }), _jsx(IconButton, { label: "Move down", tone: "inverse", onClick: () => onMove(selection.node.id, 1), children: "\u2193" }), _jsx(IconButton, { label: "Duplicate", tone: "inverse", onClick: () => onDuplicate(selection.node), children: "\u29C9" }), _jsx(IconButton, { label: "Remove", tone: "inverse", onClick: () => onRemove(selection.node.id), children: "\u00D7" })] })) }))] })), plusButtons.map((p) => {
@@ -32,6 +32,6 @@ export function CanvasOverlay({ emptyZones, hoverRect, hoverShared, selection, p
                                 position: "absolute", left: "50%", top: 0, transform: "translate(-50%,-50%)",
                                 display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                                 pointerEvents: "auto",
-                            }, children: _jsxs("button", { className: "sm-plus", "aria-label": `Add to ${p.zone}`, onMouseEnter: () => setHoverPlus(key), onMouseLeave: () => setHoverPlus((k) => (k === key ? null : k)), onClick: (e) => onPlus(p, e.clientX, e.clientY), children: [_jsx("span", { className: "sm-plus__icon", children: "+" }), _jsx("span", { className: "sm-plus__label", children: "Add block" })] }) })] }, key));
+                            }, children: _jsxs("button", { className: "sm-plus", "aria-label": `Add to ${p.zone}`, onMouseEnter: () => setHoverPlus(key), onMouseLeave: () => setHoverPlus((k) => (k === key ? null : k)), onClick: (e) => onPlus(p, e.clientX, e.clientY), children: [_jsx("span", { className: "sm-plus__icon", children: "+" }), _jsx("span", { className: "sm-plus__label", children: "Add section" })] }) })] }, key));
             })] }));
 }