smoodly 0.0.16 → 0.0.17

package/dist/next/queries.js

@@ -1,12 +1,12 @@
 // The in-app read API (spec 2026-09-11): five typed queries over the
 // framework-free site layer, each draft-aware inside the editor preview
-// and cached under a tag outside it — the pattern getSmoodlyShared set.
+// and cached under a tag outside it — the pattern getSmoodlyGlobal set.
 // Lives in next/ because draftMode and unstable_cache are Next's; an
 // Astro glue wraps the same site reads over its own cache seam.
 import { unstable_cache } from "next/cache";
 import { draftMode } from "next/headers";
 import { connection } from "next/server";
-import { collectionTag, entryTag, pageTag, pagesTreeTag, sharedTag } from "../revalidate.js";
+import { collectionTag, entryTag, pageTag, pagesTreeTag, globalTag } from "../revalidate.js";
 /** JSON with object keys sorted at every level and `undefined` dropped, so two spellings of one query share a unit. */
 function stable(value) {
     if (Array.isArray(value))
@@ -26,7 +26,7 @@ function entriesKey(o) {
 }
 export function createSmoodlyQueries(options) {
     const { site } = options;
-    const sharedByName = new Map((options.shared ?? []).map((s) => [s.name, s]));
+    const globalByName = new Map((options.globals ?? []).map((s) => [s.name, s]));
     const localeOf = (o) => o?.locale ?? site.locales.default;
     /** Every query gates on the request (never a build prerender), then reads live in draft mode or cached under `tags`. */
     async function run(key, tags, read) {
@@ -76,12 +76,12 @@ export function createSmoodlyQueries(options) {
                 return hit;
             });
         },
-        async getShared(name, o) {
+        async getGlobal(name, o) {
             const locale = localeOf(o);
-            const item = sharedByName.get(name);
+            const item = globalByName.get(name);
             if (!item)
-                throw new Error(`smoodly: no shared item named "${name}".`);
-            return run(["shared", name, locale], [sharedTag(name)], (draft) => site.getShared(item, { locale, draft }));
+                throw new Error(`smoodly: no global item named "${name}".`);
+            return run(["global", name, locale], [globalTag(name)], (draft) => site.getGlobal(item, { locale, draft }));
         },
     };
 }

package/dist/page.js

@@ -30,12 +30,12 @@ function normalizePolicy(p) {
             return out;
         }
         case "freeform":
-            return { kind: "freeform", allow: p.allow, rows: p.rows };
+            return { kind: "freeform", allow: p.allow, custom: p.custom === true };
         case "locked":
             return {
                 kind: "locked",
                 component: p.component,
-                ...(typeof p.shared === "string" ? { shared: p.shared } : {}),
+                ...(typeof p.global === "string" ? { global: p.global } : {}),
             };
         default:
             throw new Error(`smoodly: unknown zone policy kind "${String(p.kind)}".`);

package/dist/pairing.d.ts

@@ -1,9 +1,11 @@
 import type { ComponentType, ReactElement } from "react";
 import type { BuilderMap, ElementSchema, NamespaceValues, SectionSchema } from "./schema.ts";
 import type { PageContext, ZoneContent } from "./render.tsx";
+import type { StyleProps } from "./styles.ts";
 /** What the view receives. A page view gets its zones and where it sits
- * in the tree; a section/element view gets field values flat and styles
- * complete (defaults filled). The page branch keys on `kind` — an
+ * in the tree; a section/element view gets field values flat, settings
+ * complete (defaults filled) and Smoodly's styles steps as stored (Default
+ * stores nothing — spec 2026-09-14 §2). The page branch keys on `kind` — an
  * optional-only check would match section schemas too, since a type
  * lacking `__zones` still extends `{ __zones?: X }`. */
 export type Props<S> = S extends {
@@ -17,19 +19,23 @@ export type Props<S> = S extends {
     __f?: infer F extends BuilderMap;
     __s?: infer St extends BuilderMap;
 } ? NamespaceValues<F> & {
-    styles: NamespaceValues<St>;
+    settings: NamespaceValues<St>;
+    styles: StyleProps;
 } : never;
-/** What hard-coded JSX may pass: fields flat, styles optional and partial. */
+/** What hard-coded JSX may pass: fields flat, settings optional and partial, styles optional. */
 type ExternalProps<F extends BuilderMap, St extends BuilderMap> = NamespaceValues<F> & {
-    styles?: Partial<NamespaceValues<St>>;
+    settings?: Partial<NamespaceValues<St>>;
+    styles?: StyleProps;
 };
 export type PairedComponent<Schema, F extends BuilderMap, St extends BuilderMap> = ((props: ExternalProps<F, St>) => ReactElement) & {
     schema: Schema;
 };
 export declare function section<F extends BuilderMap, St extends BuilderMap>(schema: SectionSchema<F, St>, View: ComponentType<NamespaceValues<F> & {
-    styles: NamespaceValues<St>;
+    settings: NamespaceValues<St>;
+    styles: StyleProps;
 }>): PairedComponent<SectionSchema<F, St>, F, St>;
 export declare function element<F extends BuilderMap, St extends BuilderMap>(schema: ElementSchema<F, St>, View: ComponentType<NamespaceValues<F> & {
-    styles: NamespaceValues<St>;
+    settings: NamespaceValues<St>;
+    styles: StyleProps;
 }>): PairedComponent<ElementSchema<F, St>, F, St>;
 export {};

package/dist/pairing.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { defaultsOf } from "./field-defaults.js";
 function pair(schema, View) {
-    const defaults = defaultsOf(schema.styles);
+    const defaults = defaultsOf(schema.settings);
     const Component = (props) => {
-        const { styles: styleOverrides, ...fields } = props ?? {};
-        const styles = { ...defaults, ...styleOverrides };
+        const { settings: overrides, styles, ...fields } = props ?? {};
+        const settings = { ...defaults, ...overrides };
         const V = View;
-        return _jsx(V, { ...fields, styles: styles });
+        return _jsx(V, { ...fields, settings: settings, styles: styles ?? {} });
     };
     Component.schema = schema;
     return Component;

package/dist/refs.d.ts

@@ -11,12 +11,12 @@ export declare function collectEntryRefs(fields: Record<string, unknown>, schema
 export type SectionLike = {
     name: string;
     fields: Record<string, Descriptor>;
-    styles?: Record<string, Descriptor>;
+    settings?: Record<string, Descriptor>;
 } | {
     schema: {
         name: string;
         fields: Record<string, Descriptor>;
-        styles?: Record<string, Descriptor>;
+        settings?: Record<string, Descriptor>;
     };
 };
 export declare function collectTreeRefs(tree: PageTree, sections: SectionLike[], elements?: SectionLike[]): RefEdge[];

package/dist/refs.js

@@ -4,7 +4,7 @@
 // and never the source of truth. Stores rewrite a source's edges on
 // every save; `refs` answers only the REVERSE question (who depends on
 // this?) — forward resolution stays resolveTree's job.
-import { sharedLink } from "./shared.js";
+import { globalLink } from "./global.js";
 import { ASSET_COLLECTION, isMediaValue, MEDIA_TYPES } from "./media.js";
 import { ELEMENT_NODE, IMAGE_NODE, elementOf, elementSchemas, elementSets, richtextBlocks } from "./richtext-walk.js";
 function targetOf(d) {
@@ -87,7 +87,7 @@ export function collectTreeRefs(tree, sections, elements) {
         for (const node of nodes) {
             // A placement (spec 2026-09-07 §5): one edge, keyed by the node id
             // so two placements of one item on one page stay distinct rows.
-            const link = sharedLink(node);
+            const link = globalLink(node);
             if (link) {
                 out.push({ field: node.id, targetCollection: link.item, targetId: link.ref });
                 continue;
@@ -96,8 +96,8 @@ export function collectTreeRefs(tree, sections, elements) {
             if (!schema)
                 continue; // fail-soft, same as renderPage
             collectFrom(node.fields, schema.fields, out, els);
-            if (schema.styles && node.styles)
-                collectFrom(node.styles, schema.styles, out, els);
+            if (schema.settings && node.settings)
+                collectFrom(node.settings, schema.settings, out, els);
         }
     }
     return out;

package/dist/render.d.ts

@@ -1,12 +1,18 @@
 import type { ComponentType, ReactElement } from "react";
 import type { PageSchema } from "./page.ts";
 import type { BuilderMap, NamespaceValues } from "./schema.ts";
+import { type StyleValues } from "./styles.ts";
+import { type CustomOptions } from "./custom/index.ts";
 export type TreeNode = {
     id: string;
     type: string;
     fields: Record<string, unknown>;
+    /** The developer's knobs (spec 2026-09-14 §3). */
+    settings?: Record<string, unknown>;
+    /** Smoodly's styles steps (spec 2026-09-14 §2); absent keys are Default. */
     styles?: Record<string, unknown>;
-    meta?: Record<string, unknown>;
+    /** The custom-CSS snippet (spec 2026-09-14 §4), scoped by the wrapper. */
+    css?: string;
 };
 /** `meta` is the page's own metadata (SEO title, description, og image).
  * It rides inside the tree deliberately: trees are already JSONB in
@@ -60,6 +66,8 @@ export type ZoneContent = {
     readonly name: string;
     readonly nodes: TreeNode[];
     readonly components: ReadonlyMap<string, AnyPaired>;
+    /** The config's CSS values behind the styles set (spec 2026-09-14 §2). */
+    readonly styleValues: StyleValues;
     readonly editor: boolean;
 };
 export declare function Zone({ of: content }: {
@@ -76,6 +84,10 @@ export declare function page<Zones extends Record<string, unknown>, F extends Bu
 export type Registry = {
     sections?: AnyPaired[];
     elements?: AnyPaired[];
+    /** Resolved styles values; the package fallbacks when absent. */
+    styles?: StyleValues;
+    /** The custom section's bound RichText and breakpoint (spec 2026-09-14 §6); the defaults when absent. */
+    custom?: CustomOptions;
 };
 export declare function renderPage<Zones extends Record<string, unknown>>(Page: PairedPage<Zones>, tree: PageTree, registry: Registry, options?: {
     editor?: boolean;

package/dist/render.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { EMPTY_ATTR, ZONE_ATTR } from "./marks.js";
+import { SMD_KEY } from "./section-wrapper.js";
+import { DEFAULT_STYLE_VALUES } from "./styles.js";
+import { CUSTOM_NODE_TYPE, createCustomSection } from "./custom/index.js";
 /** The `page` prop of a view rendered outside the site (a test, a preview
  *  of a shape): a real object, so a view never guards an optional prop, but
  *  no position in the tree. Frozen: one singleton shared by every such
@@ -22,10 +25,9 @@ export function Zone({ of: content }) {
                 console.warn(`smoodly: no registered component for node type "${node.type}" — skipping.`);
                 return null;
             }
-            const styles = content.editor
-                ? { ...(node.styles ?? {}), __smoodlyNode: node.id }
-                : (node.styles ?? {});
-            return _jsx(Component, { ...node.fields, styles: styles }, node.id);
+            // The node id, the css and the values ride the styles under one reserved key; the wrapper reads and strips it.
+            const styles = { ...(node.styles ?? {}), [SMD_KEY]: { node: node.id, css: typeof node.css === "string" ? node.css : undefined, values: content.styleValues } };
+            return _jsx(Component, { ...node.fields, settings: node.settings ?? {}, styles: styles }, node.id);
         }) }));
 }
 export function page(schema, View) {
@@ -41,9 +43,12 @@ export function renderPage(Page, tree, registry, options) {
     for (const c of [...(registry.sections ?? []), ...(registry.elements ?? [])]) {
         components.set(c.schema.name, c);
     }
+    // The custom section (spec 2026-09-14 §6): Smoodly's own renderer under the reserved node type.
+    components.set(CUSTOM_NODE_TYPE, createCustomSection({ ...(registry.custom ?? {}), elements: (registry.elements ?? []) }));
+    const styleValues = registry.styles ?? DEFAULT_STYLE_VALUES;
     const zones = Object.fromEntries(Object.keys(Page.schema.zones).map((zone) => [
         zone,
-        { name: zone, nodes: tree.zones?.[zone] ?? [], components, editor: options?.editor ?? false },
+        { name: zone, nodes: tree.zones?.[zone] ?? [], components, styleValues, editor: options?.editor ?? false },
     ]));
     return _jsx(Page, { zones: zones, page: (options?.page ?? EMPTY_PAGE_CONTEXT) });
 }

package/dist/resolve.d.ts

@@ -1,18 +1,19 @@
 import type { Descriptor } from "./fields.ts";
 import type { CollectionSchema } from "./collections.ts";
 import type { PageTree } from "./render.tsx";
-import { type SharedSchema } from "./shared.ts";
+import { type GlobalSchema } from "./global.ts";
 import { type AssetRecord } from "./media.ts";
 import { type ElementSchemas } from "./richtext-walk.ts";
 import type { SectionLike } from "./refs.ts";
+import type { Toolset } from "./toolset.ts";
 export type EntryFetcher = (collection: string, ids: string[]) => Promise<Record<string, Record<string, unknown>>>;
 export type AssetFetcher = (ids: string[]) => Promise<Record<string, AssetRecord>>;
 type SchemaLike = {
     name: string;
     fields: Record<string, Descriptor>;
-    styles?: Record<string, Descriptor>;
+    settings?: Record<string, Descriptor>;
 };
-/** One value set whose media resolves in place: a node's fields or styles,
+/** One value set whose media resolves in place: a node's fields or settings,
  *  an entry's fields, or an entry hydrated through a ref. */
 export type MediaSet = {
     values: Record<string, unknown> | undefined;
@@ -26,8 +27,8 @@ type ResolveOptions = {
     fetch: EntryFetcher;
     /** Media (spec 2026-09-08 §9): one batched asset fetch per page, values become resolved objects. */
     assets?: AssetFetcher;
-    /** The registered shared items a placement node may name (spec 2026-09-07 §4). */
-    shared?: SharedSchema[];
+    /** The registered global items a placement node may name (spec 2026-09-07 §4). */
+    globals?: GlobalSchema[];
     /** Registered Elements a richtext document may embed (spec 2026-09-08 block nodes §2). */
     elements?: SectionLike[];
     /** Optional safety valve on chain length; unlimited by default. */
@@ -36,9 +37,13 @@ type ResolveOptions = {
     page?: {
         fields: Record<string, Descriptor>;
     };
+    /** The custom section's columns toolset (spec 2026-09-14 §6); the default when absent. The schema is always in the map. */
+    custom?: {
+        toolset?: Toolset;
+    };
 };
 export declare function resolveTree(tree: PageTree, options: ResolveOptions): Promise<PageTree>;
-/** One value set's media, resolved in place. Exported for the site layer's shared-item styles. */
+/** One value set's media, resolved in place. Exported for the site layer's global-item settings. */
 export declare function resolveMedia(values: Record<string, unknown>, descriptors: Record<string, Descriptor>, fetch: AssetFetcher, elements?: ElementSchemas): Promise<void>;
 /** Many value sets, one asset round (plus one for posters): the tree's
  *  nodes and every entry hydrated through a ref, or a list page's items.

package/dist/resolve.js

@@ -6,9 +6,10 @@
 // Cycles are cut per path — a ref back to an entry already on its own
 // chain gets a shallow copy (refs as ids), so traversal terminates by
 // construction and the output stays JSON-serializable.
-import { sharedLink, SHARED_NODE_TYPE, STYLES_KEY } from "./shared.js";
+import { globalLink, GLOBAL_NODE_TYPE, SETTINGS_KEY, STYLES_KEY, CSS_KEY } from "./global.js";
 import { applyAssets, collectAssetIds } from "./media.js";
 import { elementSchemas } from "./richtext-walk.js";
+import { CUSTOM_NODE_TYPE, customSchema, customToolset } from "./custom/index.js";
 /** The built-in SEO set's one media value (spec 2026-09-10 page fields §2). */
 const META_DESCRIPTORS = { ogImage: { type: "image" } };
 function targetOf(d) {
@@ -31,8 +32,10 @@ export async function resolveTree(tree, options) {
         const schema = "schema" in s ? s.schema : s;
         return [schema.name, schema];
     }));
+    // The custom section (spec 2026-09-14 §6): its columns' images resolve like any section's richtext.
+    sectionSchemas.set(CUSTOM_NODE_TYPE, customSchema(customToolset(options.custom?.toolset)));
     const resolved = structuredClone(tree);
-    await rewritePlacements(resolved, options.shared ?? [], options.fetch);
+    await rewritePlacements(resolved, options.globals ?? [], options.fetch);
     const tasks = [];
     for (const nodes of Object.values(resolved.zones ?? {})) {
         for (const node of nodes) {
@@ -52,7 +55,7 @@ export async function resolveTree(tree, options) {
             if (!schema)
                 continue;
             sets.push({ values: node.fields, descriptors: schema.fields });
-            sets.push({ values: node.styles, descriptors: schema.styles ?? {} });
+            sets.push({ values: node.settings, descriptors: schema.settings ?? {} });
         }
         if (options.page && resolved.fields)
             sets.push({ values: resolved.fields, descriptors: options.page.fields });
@@ -78,7 +81,7 @@ async function fetchAssets(fetch, ids) {
             out.set(id, a);
     return out;
 }
-/** One value set's media, resolved in place. Exported for the site layer's shared-item styles. */
+/** One value set's media, resolved in place. Exported for the site layer's global-item settings. */
 export async function resolveMedia(values, descriptors, fetch, elements = {}) {
     await resolveMediaSets([{ values, descriptors }], fetch, elements);
 }
@@ -99,12 +102,12 @@ export async function resolveMediaSets(sets, fetch, elements = {}) {
  *  site cannot render: an unpublished or dangling row, an object item
  *  (no view), an unknown item. The normal pass then hydrates the
  *  rewritten nodes' own refs. */
-async function rewritePlacements(tree, shared, fetch) {
-    const byName = new Map(shared.map((s) => [s.name, s]));
+async function rewritePlacements(tree, globals, fetch) {
+    const byName = new Map(globals.map((s) => [s.name, s]));
     const wanted = new Map();
     for (const nodes of Object.values(tree.zones ?? {})) {
         for (const node of nodes) {
-            const link = sharedLink(node);
+            const link = globalLink(node);
             if (!link || !byName.get(link.item)?.section)
                 continue;
             const ids = wanted.get(link.item) ?? new Set();
@@ -116,16 +119,23 @@ async function rewritePlacements(tree, shared, fetch) {
     await Promise.all([...wanted].map(async ([item, ids]) => fetched.set(item, await fetch(item, [...ids]))));
     for (const [zone, nodes] of Object.entries(tree.zones ?? {})) {
         tree.zones[zone] = nodes.flatMap((node) => {
-            const link = sharedLink(node);
+            const link = globalLink(node);
             if (!link)
-                return node.type === SHARED_NODE_TYPE ? [] : [node];
+                return node.type === GLOBAL_NODE_TYPE ? [] : [node];
             const schema = byName.get(link.item);
             const row = fetched.get(link.item)?.[link.ref];
             if (!schema?.section || !row)
                 return [];
-            const { [STYLES_KEY]: styles, ...fields } = structuredClone(row);
-            const isObject = styles !== null && typeof styles === "object";
-            return [{ id: node.id, type: schema.section, fields, ...(isObject ? { styles: styles } : {}) }];
+            // The row's reserved keys become the node's namespaces (spec 2026-09-14 §8): the
+            // rewritten node is then a section node like any other, styles inline and css scoped.
+            const { [SETTINGS_KEY]: settings, [STYLES_KEY]: styles, [CSS_KEY]: css, ...fields } = structuredClone(row);
+            const ns = (v) => (v !== null && typeof v === "object" ? v : undefined);
+            return [{
+                    id: node.id, type: schema.section, fields,
+                    ...(ns(settings) ? { settings: ns(settings) } : {}),
+                    ...(ns(styles) ? { styles: ns(styles) } : {}),
+                    ...(typeof css === "string" && css !== "" ? { css } : {}),
+                }];
         });
     }
 }

package/dist/revalidate.d.ts

@@ -8,10 +8,10 @@ export type AffectedTargets = {
 };
 export declare const pageTag: (id: string) => string;
 export declare const entryTag: (id: string) => string;
-/** A shared item's cache unit, by NAME (a singleton has one row per
- *  locale, and code owns the name): the Next glue's getSmoodlyShared
- *  caches under it; ops.shared expires it. */
-export declare const sharedTag: (name: string) => string;
+/** A global item's cache unit, by NAME (a singleton has one row per
+ *  locale, and code owns the name): the Next glue's getSmoodlyGlobal
+ *  caches under it; ops.globals expires it. */
+export declare const globalTag: (name: string) => string;
 /** The page-tree listing's cache unit (spec 2026-09-11 §2): one tree-wide
  *  tag, fired by every page op that changes what the listing shows. */
 export declare const pagesTreeTag: () => string;

package/dist/revalidate.js

@@ -7,10 +7,10 @@
 // change (spec 2026-09-05 §5).
 export const pageTag = (id) => `page:${id}`;
 export const entryTag = (id) => `entry:${id}`;
-/** A shared item's cache unit, by NAME (a singleton has one row per
- *  locale, and code owns the name): the Next glue's getSmoodlyShared
- *  caches under it; ops.shared expires it. */
-export const sharedTag = (name) => `shared:${name}`;
+/** A global item's cache unit, by NAME (a singleton has one row per
+ *  locale, and code owns the name): the Next glue's getSmoodlyGlobal
+ *  caches under it; ops.globals expires it. */
+export const globalTag = (name) => `global:${name}`;
 /** The page-tree listing's cache unit (spec 2026-09-11 §2): one tree-wide
  *  tag, fired by every page op that changes what the listing shows. */
 export const pagesTreeTag = () => "pages:tree";

package/dist/richtext-render.js

@@ -67,8 +67,8 @@ function renderNode(node, r) {
             if (!Component)
                 return null;
             const fields = a.fields && typeof a.fields === "object" ? a.fields : {};
-            const styles = a.styles && typeof a.styles === "object" ? a.styles : {};
-            return _jsx(Component, { ...fields, styles: styles });
+            const settings = a.settings && typeof a.settings === "object" ? a.settings : {};
+            return _jsx(Component, { ...fields, settings: settings });
         }
         default: return children;
     }

package/dist/richtext-walk.d.ts

@@ -8,7 +8,7 @@ export type ImageNodeAttrs = {
 export type ElementNodeAttrs = {
     name?: unknown;
     fields?: unknown;
-    styles?: unknown;
+    settings?: unknown;
 };
 /** A block node as stored — `attrs` is the live object, so a walk may resolve in place. */
 export type BlockNode = {
@@ -20,23 +20,23 @@ export declare function richtextBlocks(doc: unknown): BlockNode[];
 /** An element's descriptors by name — what the walks read an element node against. */
 export type ElementSchemas = Record<string, {
     fields: Record<string, Descriptor>;
-    styles: Record<string, Descriptor>;
+    settings: Record<string, Descriptor>;
 }>;
 type ElementLike = {
     name: string;
     fields: Record<string, Descriptor>;
-    styles?: Record<string, Descriptor>;
+    settings?: Record<string, Descriptor>;
 } | {
     schema: {
         name: string;
         fields: Record<string, Descriptor>;
-        styles?: Record<string, Descriptor>;
+        settings?: Record<string, Descriptor>;
     };
 };
 export declare function elementSchemas(list: ElementLike[] | undefined): ElementSchemas;
 /** The element schema an element node names, or null for an unknown one. */
 export declare function elementOf(node: BlockNode, elements: ElementSchemas): ElementSchemas[string] | null;
-/** An element node's field and style value sets, for a walk. */
+/** An element node's field and settings value sets, for a walk. */
 export declare function elementSets(node: BlockNode, schema: ElementSchemas[string]): {
     values: Record<string, unknown>;
     descriptors: Record<string, Descriptor>;

package/dist/richtext-walk.js

@@ -24,7 +24,7 @@ export function elementSchemas(list) {
     for (const e of list ?? []) {
         const s = "schema" in e ? e.schema : e;
         if (!(s.name in out))
-            out[s.name] = { fields: s.fields, styles: s.styles ?? {} };
+            out[s.name] = { fields: s.fields, settings: s.settings ?? {} };
     }
     return out;
 }
@@ -34,13 +34,13 @@ export function elementOf(node, elements) {
     return typeof name === "string" ? elements[name] ?? null : null;
 }
 const asRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v) ? v : undefined;
-/** An element node's field and style value sets, for a walk. */
+/** An element node's field and settings value sets, for a walk. */
 export function elementSets(node, schema) {
     const a = node.attrs;
     const fields = asRecord(a.fields);
-    const styles = asRecord(a.styles);
+    const settings = asRecord(a.settings);
     return [
         ...(fields ? [{ values: fields, descriptors: schema.fields }] : []),
-        ...(styles ? [{ values: styles, descriptors: schema.styles }] : []),
+        ...(settings ? [{ values: settings, descriptors: schema.settings }] : []),
     ];
 }

package/dist/schema.d.ts

@@ -8,12 +8,15 @@ export type SectionSchema<F extends BuilderMap = BuilderMap, S extends BuilderMa
     icon?: string;
     description?: string;
     fields: Record<string, Descriptor>;
-    styles: Record<string, Descriptor>;
-    meta: Record<string, Descriptor>;
+    /** The developer's knobs (spec 2026-09-14 §3): the view alone interprets them. */
+    settings: Record<string, Descriptor>;
     sample?: Record<string, unknown>;
-    styleDefaults?: false | {
+    /** Smoodly's styles set (spec 2026-09-14 §2): absent = the whole set; `false` = none; `omit` drops keys. */
+    styles?: false | {
         omit: string[];
     };
+    /** The custom-CSS box (spec 2026-09-14 §4): `false` opts this section out. */
+    css?: false;
     /** phantom: builder types for Props inference */
     readonly __f?: F;
     readonly __s?: S;
@@ -34,23 +37,25 @@ export type NamespaceValues<M extends BuilderMap> = {
 } & {
     [K in OptionalKeys<M>]?: ValueOf<M[K]>;
 };
-type SectionInput<F extends BuilderMap, S extends BuilderMap, M extends BuilderMap> = {
+type SectionInput<F extends BuilderMap, S extends BuilderMap> = {
     name: string;
     title: string;
     icon?: string;
     description?: string;
     fields?: F;
-    styles?: S;
-    meta?: M;
-    sample?: Partial<NamespaceValues<F> & NamespaceValues<S>>;
-    styleDefaults?: false | {
+    settings?: S;
+    /** Gone (spec 2026-09-14 §1): an id is a setting the view passes to the wrapper. */
+    meta?: never;
+    styles?: false | {
         omit: string[];
     };
+    css?: false;
+    sample?: Partial<NamespaceValues<F> & NamespaceValues<S>>;
 };
 export declare const schema: {
     page: typeof pageSchema;
-    section<F extends BuilderMap = {}, S extends BuilderMap = {}, M extends BuilderMap = {}>(input: SectionInput<F, S, M>): SectionSchema<F, S>;
-    element<F extends BuilderMap = {}, S extends BuilderMap = {}, M extends BuilderMap = {}>(input: SectionInput<F, S, M> & {
+    section<F extends BuilderMap = {}, S extends BuilderMap = {}>(input: SectionInput<F, S>): SectionSchema<F, S>;
+    element<F extends BuilderMap = {}, S extends BuilderMap = {}>(input: SectionInput<F, S> & {
         contexts: ("richtext" | "column")[];
     }): ElementSchema<F, S>;
 };

package/dist/schema.js

@@ -1,5 +1,7 @@
 import { describePath, findMatch } from "./fields.js";
 import { pageSchema } from "./page.js";
+import { assertConditions } from "./conditions.js";
+import { STYLE_KEYS } from "./styles.js";
 function toDescriptors(map) {
     return Object.fromEntries(Object.entries(map ?? {}).map(([k, b]) => [k, b.descriptor]));
 }
@@ -13,21 +15,31 @@ function assertNotLocalized(ns, map) {
 function baseSchema(input) {
     if (!input?.name)
         throw new Error("smoodly: a schema requires a name.");
+    if ("meta" in input)
+        throw new Error('smoodly: "meta" is gone — put an id in settings and pass it as <smoodly.Section id={settings.id}>.');
+    if (input.styles !== undefined && input.styles !== false) {
+        if (typeof input.styles !== "object" || !Array.isArray(input.styles.omit)) {
+            throw new Error(`smoodly: section "${input.name}" declares styles — the developer's selects are "settings" since 2026-09-14; Smoodly's styles set is only toggled: false | { omit }.`);
+        }
+        for (const k of input.styles.omit) {
+            if (!STYLE_KEYS.includes(k))
+                throw new Error(`smoodly: section "${input.name}": styles.omit names "${k}", which is not a style key.`);
+        }
+    }
     const fields = toDescriptors(input.fields);
-    const styles = toDescriptors(input.styles);
-    const meta = toDescriptors(input.meta);
-    assertNotLocalized("styles", styles);
-    assertNotLocalized("meta", meta);
+    const settings = toDescriptors(input.settings);
+    assertNotLocalized("settings", settings);
+    assertConditions(input.name, { fields, settings });
     return {
         name: input.name,
         title: input.title,
         icon: input.icon,
         description: input.description,
         fields,
-        styles,
-        meta,
+        settings,
         sample: input.sample,
-        styleDefaults: input.styleDefaults,
+        ...(input.styles !== undefined ? { styles: input.styles } : {}),
+        ...(input.css !== undefined ? { css: input.css } : {}),
     };
 }
 export const schema = {

package/dist/section-wrapper.d.ts

@@ -1,11 +1,23 @@
 import type { CSSProperties, ReactNode } from "react";
-export declare function Section({ as, styles, className, style, children, }: {
+import { type StyleProps, type StyleValues } from "./styles.ts";
+/** The reserved key `<Zone>` and `getGlobal` ride on the styles object. */
+export declare const SMD_KEY = "__smd";
+export type SmdInternal = {
+    node?: string;
+    css?: string;
+    values?: StyleValues;
+    /** Pre-scoped layout CSS (the custom section, spec 2026-09-14 §6), emitted before the editor's css so the box wins. */
+    layoutCss?: string;
+};
+export declare function Section({ as, styles, className, style, children, ...rest }: {
     as?: keyof React.JSX.IntrinsicElements;
-    styles: Record<string, unknown>;
+    styles: StyleProps & {
+        [SMD_KEY]?: SmdInternal;
+    };
     className?: string;
     style?: CSSProperties;
     children?: ReactNode;
-}): import("react").ReactElement<{
-    className: string | undefined;
-    style: CSSProperties | undefined;
-}, string | import("react").JSXElementConstructor<any>>;
+    [attr: `data-${string}`]: string | number | boolean | undefined;
+    [attr: `aria-${string}`]: string | number | boolean | undefined;
+    id?: string;
+}): import("react").DOMElement<Record<string, unknown>, Element>;