@plitzi/sdk-server 0.38.2 → 0.38.4

package/dist/modules/images/imageProxy.js

@@ -45,6 +45,19 @@ var Refusal = class extends Error {
 	}
 };
 var refuse = (status, message) => new Refusal(answer(status, message));
+/**
+* A vector picture is sent back to where it is: there is no size of it to make, and an SVG served from this origin is a
+* document that can run script. The browser loads it from its own host, as it would without this endpoint.
+*/
+var toOriginal = (source) => new Refusal({
+	status: 307,
+	headers: {
+		Location: source.href,
+		"Cache-Control": CACHE_CONTROL
+	},
+	body: ""
+});
+var isVector = (pathname) => /\.svgz?$/i.test(pathname);
 /** One of each at a time: a second request for what is being made waits for the first. */
 var oneAtATime = () => {
 	const running = /* @__PURE__ */ new Map();
@@ -142,6 +155,10 @@ var createImageProxy = (options) => {
 			return { changed: false };
 		}
 		const type = (response.headers.get("content-type") ?? "").split(";")[0].trim().toLowerCase();
+		if (response.ok && type === "image/svg+xml") {
+			await response.body?.cancel();
+			throw toOriginal(source);
+		}
 		if (!response.ok || !Object.hasOwn(SOURCE_TYPES, type)) {
 			await response.body?.cancel();
 			throw refuse(502, response.ok ? `Not a picture this endpoint serves (${type || "no type"}).` : "The picture could not be fetched.");
@@ -205,7 +222,7 @@ var createImageProxy = (options) => {
 				await keepOriginal(urlKey, fetched, meta);
 				return fetched;
 			} catch (error) {
-				failedUntil.set(urlKey, now() + FAILED_MS);
+				if (!(error instanceof Refusal && error.answer.status === 307)) failedUntil.set(urlKey, now() + FAILED_MS);
 				throw error;
 			}
 		});
@@ -238,6 +255,7 @@ var createImageProxy = (options) => {
 		const requested = Number(width);
 		if (!isImageWidth(requested)) return answer(400, `\`w\` is one of ${IMAGE_WIDTHS.join(", ")}.`);
 		if (!isAllowedImageHost(domains, source.hostname)) return answer(403, `${source.hostname} is not one of the hosts this server takes pictures from.`);
+		if (isVector(source.pathname)) return toOriginal(source).answer;
 		const format = transform ? negotiate(accept) : "original";
 		const urlKey = sha(source.href);
 		try {

package/dist/modules/rsc/connectorRscData.js

@@ -37,7 +37,7 @@ var connectorRscData = ({ connectors, actions, publicDir, elementTimeoutMs }) =>
 	};
 	return async ({ req, spaceId, environment, user, ids, loadOfflineData, flagOverrides }) => {
 		const offlineData = await loadOfflineData();
-		if (!offlineData?.schema.rsc?.enabled) return {};
+		if (!offlineData || offlineData.schema.rsc?.enabled === false) return {};
 		return resolveRscData({
 			schema: offlineData.schema,
 			req,

package/dist/modules/rsc/publicFileResolver.d.ts

@@ -9,5 +9,8 @@ import { RscElementResolver } from './resolveRscData';
  *
  * Only a plain path inside `publicDir`: a URL, one that climbs out of the folder, or one with `{{tokens}}` (resolved
  * in the browser against the visitor's route and state) is not this resolver's, and the element is left as it was.
+ *
+ * Answered in the shape a browser request publishes — `{ status, data }`, the body under `data` — so a provider reads
+ * `<source>.data.<field>` whichever runtime it has, and moving it to the server changes no binding.
  */
 export declare const publicFileResolver: (publicDir: string) => RscElementResolver;

package/dist/modules/rsc/publicFileResolver.js

@@ -11,6 +11,9 @@ import { readFile } from "node:fs/promises";
 *
 * Only a plain path inside `publicDir`: a URL, one that climbs out of the folder, or one with `{{tokens}}` (resolved
 * in the browser against the visitor's route and state) is not this resolver's, and the element is left as it was.
+*
+* Answered in the shape a browser request publishes — `{ status, data }`, the body under `data` — so a provider reads
+* `<source>.data.<field>` whichever runtime it has, and moving it to the server changes no binding.
 */
 var publicFileResolver = (publicDir) => {
 	const root = path.resolve(publicDir);
@@ -26,10 +29,13 @@ var publicFileResolver = (publicDir) => {
 		const file = path.resolve(root, `.${pathname}`);
 		if (!file.startsWith(`${root}${path.sep}`)) return;
 		try {
-			return JSON.parse(await readFile(file, {
-				encoding: "utf8",
-				signal
-			}));
+			return {
+				status: 200,
+				data: JSON.parse(await readFile(file, {
+					encoding: "utf8",
+					signal
+				}))
+			};
 		} catch {
 			return null;
 		}

package/dist/modules/ssr/prepareRender.js

@@ -228,6 +228,7 @@ var prepareRender = async (req, config, spaceId, environment, revision, pluginMa
 			plugins: templatePlugins,
 			debugMode: debugAuthorized,
 			ssrOnly: config.ssrOnly === true,
+			devReload: config.devReload === true,
 			offlineData: offlineDataStr
 		},
 		cacheable: actionRuns === void 0 && forcedFlags === void 0

package/dist/modules/ssr/views/template.ejs

@@ -139,5 +139,11 @@
       render('plitzi', __plitziParams, __plitziPlugins, <%= locals.debugMode ? true : false %>, true);
     </script>
     <% } %>
+    <% if (locals.devReload) { %>
+    <%# Development only: the server says the space changed (re-authored, `reloadPages`), and the page loads again. %>
+    <script>
+      new EventSource('/__plitzi/reload').addEventListener('reload', () => location.reload());
+    </script>
+    <% } %>
   </body>
 </html>

package/dist/plugins/manager.js

@@ -10,7 +10,7 @@ import fs from "node:fs/promises";
 //#region src/plugins/manager.ts
 var META_FILE = "meta.json";
 var DEFAULT_TTL_MS = 6048e5;
-var DEFAULT_CACHE_DIR = ".sdk-plugins";
+var DEFAULT_CACHE_DIR = "tmp/.sdk-plugins";
 /** One hash over every input's path and content — a file gone counts as changed, like a file edited. */
 var digestOf = async (files) => {
 	const hash = createHash("sha256");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plitzi/sdk-server",
-  "version": "0.38.2",
+  "version": "0.38.4",
   "license": "AGPL-3.0",
   "files": [
     "dist",
@@ -79,8 +79,8 @@
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@plitzi/plitzi-sdk": "0.38.2",
-    "@plitzi/sdk-shared": "0.38.2",
+    "@plitzi/plitzi-sdk": "0.38.4",
+    "@plitzi/sdk-shared": "0.38.4",
     "ejs": "^6.0.1",
     "esbuild": "^0.28.2",
     "jsonwebtoken": "^9.0.3",

package/skills/plitzi-authoring/CHEATSHEET.md

@@ -31,18 +31,21 @@ text('Words', { class })                       // also text({ content }); a <div
 heading('Title', { subType: 'h2' })            // h1–h6; holds no children
 paragraph('A paragraph.')
 container([children], { subType: 'section' })  // div, section, nav, header, footer, main, article, li, h1–h6, span…
-link({ href: 'about', children })              // a page id, a '/path', or a URL — the mode follows from the href
+link({ href: 'about', content: 'About' })      // a page id, a '/path', or a URL — the mode follows from the href
 link({ href: 'home', hash: 'plans' })          // → /#plans, onto the element with anchor: 'plans'
+container({ motion: { enter: 'fade-up', on: 'view' }, children })  // arrives once as it comes into view; stagger, loop too
 button({ content: 'Save', flows })             // holds children too: then content: ''
 image({ src, alt })                            // or decorative: true
 embed({ src, title })                          // a map, a player: another page in a frame
 svg('<svg …>…</svg>', { label })               // checked, sanitised; currentColor follows the class
+svg(svgFile(new URL('./logo.svg', import.meta.url)))  // a file, compacted: svgFile/svgFiles from '@plitzi/sdk-authoring/node'
 fontAwesome({ icon: 'fa-solid fa-xmark' })
-list({ id: 'rows', items: 'p.data.rows', row: 'row-card' })    // a <ul>; a component per row (its `item` prop)
-list({ id: 'rows', items: 'p.data.rows', row: r => text({ from: `${r.item}.title` }) })  // or a tree per row
+list({ id: 'rows', items: 'p.data.rows', row: 'row-card' })    // a <ul>; a component per row, its root an <li>
+list({ id: 'rows', items: 'p.data.rows', row: r => listItem({ children: [text({ from: `${r.item}.title` })] }) })
 carousel({ id: 'hero', items: 'p.data.slides', autoplay: 5000, row: 'slide-card', children: [/* carouselNext('hero') arrows */] })
                                                // rows follow their item's `id`, or `itemKey: 'slug'`
 apiContainer({ id: 'p', query: '/data/x.json', cache: true, children })   // publishes p.data; no box of its own
+apiContainer({ id: 'p', query: '/data/x.json', runtime: 'server', children }) // read by the page server: still p.data
                                                // loadingSlot: 'p-skeleton' — a child shown until it answers
 form({ id, managedByInteractions: true, flows, children })
 formControl({ name: 'email', label: 'Email', subType: 'email' })          // select: options: [{ label, value }]
@@ -62,7 +65,7 @@ container({ id: 'hero', class: [card, { opacity: '0.5' }] });  // …plus one th
 container({ css: { padding: '8px' } });                        // rules of its own — never with `class`
 ```
 
-Breakpoints: `desktop` (base), `tablet` (48–64rem), `mobile` (<48rem), `compact` (tablet AND mobile). Each inherits
+Breakpoints: `desktop` (base), `tablet` (48–64rem), `mobile` (≤48rem), `compact` (tablet AND mobile). Each inherits
 from `desktop` alone. States: `hover`, `focus`, `focus-visible`, `active`, `disabled`…. An ancestor's state:
 `ancestors: { [card.name]: { states: { hover: { … } } } }`.
 
@@ -85,7 +88,8 @@ visible: false                                                 // hidden until a
 
 Inside a list row: `rows.item` in a binding, `{{ list_rows.item.x }}` in a template or an attribute,
 `list_rows.index` is a number from 0. A provider's source in a template is `apiContainer_p`… —
-spelled in full, as the element publishes it. Globals: `state`, `navigation` (`routeParams`, `queryParams`),
+spelled in full, as the element publishes it; an id with a `-` keeps it (`list_study-plans`: a minus takes spaces,
+`a - b`). Globals: `state`, `navigation` (`routeParams`, `queryParams`),
 `auth`, `variables`, `computed`, `flags`, `theme`, `host`.
 
 ## Flows

package/skills/plitzi-authoring/SKILL.md

@@ -61,7 +61,7 @@ second into the first. If the MCP asks for a sign-in nobody can give, a project
 1. **Name what is referred to.** Give an `id` to every element a binding, a flow or a test addresses. Ids are ONE
    namespace for the whole space — layouts and every page share it — so a helper that runs more than once builds inside
    `scope('promos', ref => …)`: every id in it is prefixed (`promos-panel`), and `ref('slides')` names one in full. An `id` is the element's name in the
-   space (`data-id` in the page); the DOM id a URL's `#fragment` lands on is its `anchor`.
+   space (`data-plitzi-el` in the page); the DOM id a URL's `#fragment` lands on is its `anchor`.
 2. **Share with classes, layouts and components, never with copies.** A look used twice is a `styles()` class.
    Chrome shown on several pages — a header, a sidebar, a footer — is a **layout** the pages name, written once. A block
    placed many times with different content — a product card, a testimonial — is a **component** placed with
@@ -91,11 +91,12 @@ second into the first. If the MCP asks for a sign-in nobody can give, a project
    checked from the first commit.
 7. **Times in UTC, and say so.** Format with an explicit zone (`|date('j M · H:i', 'UTC')`) and print "UTC" beside it:
    a page rendered on a server and hydrated in a browser in another zone must agree on the hour.
-8. **Breakpoints are ranges.** `tablet` (48–64rem) and `mobile` (below 48rem) each inherit only from `desktop`; a rule
+8. **Breakpoints are ranges.** `tablet` (48–64rem) and `mobile` (up to 48rem) each inherit only from `desktop`; a rule
    meant for both is written under `compact`.
 9. **Never invent data.** Numbers, names and states on screen come from a source. A panel with nothing true to say is
    an empty state, not a placeholder figure. With no backend, the data is JSON the project serves
    (`public/data/*.json`) read by an `apiContainer` — see [data and visibility](reference/data-and-visibility.md).
+   `public/` is public: never a secret there.
 10. **Never hand-write** `flat`, derived ids, `styleSelectors`, `beforeNode`/`afterNode`/`flowId`, or a
     `styleVariant` binding's key — use the factories, `variantFrom` and `activeOn`.
 11. **A switch is named for how it leaves its default.** `toggleState` turns a key nobody has set yet ON, so a key
@@ -121,6 +122,8 @@ Each is a whole file that authors with no warning — CI holds it to that. Copy
 | --- | --- |
 | Show data with no backend: a JSON file, a card per row, a count, an empty state, a computed value | [recipes/show-data.ts](recipes/show-data.ts) |
 | Data typed by a sample of it: completed and checked paths, typed rows | [recipes/typed-data.ts](recipes/typed-data.ts) |
+| Data read by the page server (`--mode server`) | [recipes/server-data.ts](recipes/server-data.ts) |
+| An accordion, one answer open at a time | [recipes/accordion.ts](recipes/accordion.ts) |
 | Filter and sort a list from a select | [recipes/filter-a-list.ts](recipes/filter-a-list.ts) |
 | A page per record (`/products/:slug`), and "not found" | [recipes/detail-page.ts](recipes/detail-page.ts) |
 | Link to a section of a page (`/#plans`) | [recipes/link-to-a-section.ts](recipes/link-to-a-section.ts) |
@@ -158,6 +161,7 @@ Each is a whole file that authors with no warning — CI holds it to that. Copy
 | [flows.md](reference/flows.md) | Clicks, submits, page loads, every few seconds, server actions, modals, state |
 | [realtime.md](reference/realtime.md) | Pages that see each other: channels, presence, cursors, a shared board, who may hear a topic |
 | [plugins.md](reference/plugins.md) | A component of your own: props, binding them, writing state, channels, registering, behaving in the builder |
+| [drawing.md](reference/drawing.md) | A plugin that draws or animates: a canvas sized to the device, WebGL shaders that say why they failed, a loop that stops when nobody sees it |
 | [structure.md](reference/structure.md) | A space bigger than one screen: files, helpers, naming, keeping it short |
 | [testing.md](reference/testing.md) | Any test: `inspectPage` (one call, every problem), handles, fixtures, catching a flash from the first frame, shortcuts, counting renders |
 | [performance.md](reference/performance.md) | A page with many elements, a busy flow, something that feels slow: what renders, what it costs, how to measure it |

package/skills/plitzi-authoring/recipes/accordion.ts

@@ -0,0 +1,58 @@
+/**
+ * An accordion — questions whose answers open one at a time — written once and mapped over the questions: the open one
+ * is a key in `state`, and each question reads it the same way. The button says whether its answer is open
+ * (`ariaExpanded`) and which panel it opens (`controls`, by the panel's id), so a screen reader follows it; the panel is
+ * revealed by the state, so it starts hidden.
+ */
+import { bindTemplate, button, container, onClick, paragraph, setState, styles } from '@plitzi/sdk-authoring';
+
+import type { ElementSpec, SpaceSpec } from '@plitzi/sdk-authoring';
+
+const QUESTIONS = [
+  { id: 'shipping', question: 'How long does shipping take?', answer: 'Three working days, anywhere in Europe.' },
+  { id: 'returns', question: 'Can I return an order?', answer: 'Within thirty days, unopened, at no cost.' },
+  { id: 'warranty', question: 'Is there a warranty?', answer: 'Two years on every product we sell.' }
+];
+
+const question = styles('faq-question', {
+  css: {
+    display: 'flex',
+    'justify-content': 'space-between',
+    width: '100%',
+    padding: '16px 0px',
+    border: 'none',
+    'background-color': 'transparent',
+    'font-size': '16px',
+    'font-weight': '600',
+    cursor: 'pointer'
+  },
+  states: { 'focus-visible': { outline: '2px solid currentColor', 'outline-offset': '2px' } }
+});
+
+const answer = styles('faq-answer', { 'padding-bottom': '16px', margin: '0px' });
+
+/** One question: the button that opens it — closing the one open, or this one again — and the answer it opens. */
+const faqItem = ({ id, question: words, answer: text }: (typeof QUESTIONS)[number]): ElementSpec[] => [
+  button({
+    id: `${id}-question`,
+    content: words,
+    class: question,
+    // Named by the panel's id: authoring gives the panel the anchor the page needs for `aria-controls`.
+    controls: `${id}-answer`,
+    ariaExpanded: false,
+    bind: [bindTemplate('ariaExpanded', 'state.faq', `{{ source == '${id}' }}`, { returns: 'value' })],
+    flows: [[onClick(), setState({ key: 'faq', type: 'text', value: `{{ state.faq == '${id}' ? '' : '${id}' }}` })]]
+  }),
+  // Revealed by the state, so it starts hidden: nothing flashes open before the page knows which one is.
+  container({
+    id: `${id}-answer`,
+    visible: { source: 'state.faq', template: `{{ source == '${id}' }}` },
+    children: [paragraph({ content: text, class: answer })]
+  })
+];
+
+export const recipe: SpaceSpec = {
+  name: 'Questions',
+  permanentUrl: 'questions',
+  pages: [{ id: 'home', name: 'Home', slug: '', body: QUESTIONS.flatMap(faqItem) }]
+};

package/skills/plitzi-authoring/recipes/carousel.ts

@@ -16,7 +16,8 @@ import {
   list,
   onClick,
   styles,
-  text
+  text,
+  listItem
 } from '@plitzi/sdk-authoring';
 
 import type { SpaceSpec } from '@plitzi/sdk-authoring';
@@ -74,14 +75,18 @@ export const recipe: SpaceSpec = {
               class: dots,
               items: 'hero.items',
               row: r =>
-                button({
-                  content: '',
-                  class: dot,
-                  bind: [
-                    bindTemplate('title', r.index, 'Slide {{ source + 1 }}'),
-                    activeWhen(dot, `{{ ${r.inTemplate.index} == carousel_hero.index }}`)
-                  ],
-                  flows: [[onClick(), carouselGoTo('hero', `{{ ${r.inTemplate.index} }}`)]]
+                listItem({
+                  children: [
+                    button({
+                      content: '',
+                      class: dot,
+                      bind: [
+                        bindTemplate('title', r.index, 'Slide {{ source + 1 }}'),
+                        activeWhen(dot, `{{ ${r.inTemplate.index} == carousel_hero.index }}`)
+                      ],
+                      flows: [[onClick(), carouselGoTo('hero', `{{ ${r.inTemplate.index} }}`)]]
+                    })
+                  ]
                 })
             })
           ]

package/skills/plitzi-authoring/recipes/detail-page.ts

@@ -3,7 +3,7 @@
  * A page per record: a card links to `/products/<slug>`, and the detail page narrows the same file to the product its
  * address names — with a message, not an empty page, when no product has that name.
  */
-import { apiContainer, heading, link, list, text } from '@plitzi/sdk-authoring';
+import { apiContainer, heading, link, list, text, listItem } from '@plitzi/sdk-authoring';
 
 import type { SpaceSpec } from '@plitzi/sdk-authoring';
 
@@ -25,10 +25,14 @@ export const recipe: SpaceSpec = {
               id: 'products',
               items: 'catalog.data.products',
               children: [
-                // An attribute reads a name with filters, spelled in full.
-                link({
-                  href: '/products/{{ list_products.item.slug|url_encode }}',
-                  children: [text({ from: 'products.item.title' })]
+                listItem({
+                  children: [
+                    // An attribute reads a name with filters, spelled in full.
+                    link({
+                      href: '/products/{{ list_products.item.slug|url_encode }}',
+                      children: [text({ from: 'products.item.title' })]
+                    })
+                  ]
                 })
               ]
             })
@@ -54,7 +58,7 @@ export const recipe: SpaceSpec = {
                 source: 'catalog-one.data.products',
                 template: "{{ source|find('slug', navigation.routeParams.slug) }}"
               },
-              children: [heading({ subType: 'h1', from: 'this-product.item.title' })]
+              children: [listItem({ children: [heading({ subType: 'h1', from: 'this-product.item.title' })] })]
             }),
             text('No product by that name.', {
               visible: {

package/skills/plitzi-authoring/recipes/every-few-seconds.ts

@@ -18,7 +18,8 @@ import {
   styles,
   text,
   activeWhen,
-  when
+  when,
+  listItem
 } from '@plitzi/sdk-authoring';
 
 import type { SpaceSpec } from '@plitzi/sdk-authoring';
@@ -81,7 +82,7 @@ export const recipe: SpaceSpec = {
               id: 'slides',
               items: SLIDES,
               children: [
-                container({
+                listItem({
                   class: slide,
                   visible: { source: 'slides.index', template: '{{ source == (state.slide ?? 0) }}' },
                   children: [heading({ subType: 'h2', from: 'slides.item.title' }), text({ from: 'slides.item.body' })]
@@ -101,12 +102,16 @@ export const recipe: SpaceSpec = {
               class: dots,
               items: SLIDES,
               children: [
-                button({
-                  content: '',
-                  title: 'Show this offer',
-                  class: dot,
-                  bind: [activeWhen(dot, '{{ list_dots.index == (state.slide ?? 0) }}')],
-                  flows: [[onClick(), setState({ key: 'slide', type: 'number', value: '{{ list_dots.index }}' })]]
+                listItem({
+                  children: [
+                    button({
+                      content: '',
+                      title: 'Show this offer',
+                      class: dot,
+                      bind: [activeWhen(dot, '{{ list_dots.index == (state.slide ?? 0) }}')],
+                      flows: [[onClick(), setState({ key: 'slide', type: 'number', value: '{{ list_dots.index }}' })]]
+                    })
+                  ]
                 })
               ]
             }),

package/skills/plitzi-authoring/recipes/filter-a-list.ts

@@ -3,7 +3,7 @@
  * Filter and sort a list: a select writes the chosen category to `state`, and the list is bound through a template
  * that hands over its VALUE — only the matching rows are rendered, with a count and an empty state over the same rows.
  */
-import { apiContainer, formControl, list, named, on, setState, text } from '@plitzi/sdk-authoring';
+import { apiContainer, formControl, list, named, on, setState, text, listItem } from '@plitzi/sdk-authoring';
 
 import type { SpaceSpec } from '@plitzi/sdk-authoring';
 
@@ -47,7 +47,7 @@ export const recipe: SpaceSpec = {
               id: 'shown',
               from: 'catalog.data.products',
               as: `{{ ${shown} }}`,
-              children: [text({ from: 'shown.item.title' })]
+              children: [listItem({ children: [text({ from: 'shown.item.title' })] })]
             }),
             text('Nothing in that category.', {
               visible: {

package/skills/plitzi-authoring/recipes/forms-and-modals.ts

@@ -5,7 +5,6 @@
 import {
   button,
   closeModal,
-  fontAwesome,
   form,
   formControl,
   modalContainer,
@@ -52,7 +51,7 @@ export const recipe: SpaceSpec = {
             button({
               content: '',
               title: 'Close',
-              children: [fontAwesome({ icon: 'fa-solid fa-xmark' })],
+              icon: 'fa-solid fa-xmark',
               flows: [[onClick(), closeModal('details')]]
             })
           ]

package/skills/plitzi-authoring/recipes/from-tailwind.ts

@@ -45,7 +45,7 @@ export const recipe: SpaceSpec = {
             container({ class: card, children: [heading(name, { subType: 'h3', class: title }), text('…')] })
           )
         }),
-        link({ href: '/start', class: cta, children: [text('Get started')] })
+        link({ href: '/start', class: cta, content: 'Get started' })
       ]
     }
   ]

package/skills/plitzi-authoring/recipes/link-to-a-section.ts

@@ -1,6 +1,6 @@
 /**
  * Link to a section: the section carries an `anchor` — its id in the page; an element's `id` is only its name in the
- * space, `data-id` in the DOM — and a link's `hash` lands on it, from any page, even when the section renders late.
+ * space, `data-plitzi-el` in the DOM — and a link's `hash` lands on it, from any page, even when the section renders late.
  */
 import { container, heading, link, text } from '@plitzi/sdk-authoring';
 
@@ -15,7 +15,7 @@ export const recipe: SpaceSpec = {
       name: 'Home',
       slug: '',
       body: [
-        link({ href: 'home', hash: 'plans', children: [text('See the plans')] }),
+        link({ href: 'home', hash: 'plans', content: 'See the plans' }),
         container({
           id: 'plans-section',
           subType: 'section',
@@ -29,7 +29,7 @@ export const recipe: SpaceSpec = {
       name: 'About',
       slug: 'about',
       // → /#plans
-      body: [link({ href: 'home', hash: 'plans', children: [text('Plans')] })]
+      body: [link({ href: 'home', hash: 'plans', content: 'Plans' })]
     }
   ]
 };

package/skills/plitzi-authoring/recipes/link-with-data.ts

@@ -2,7 +2,7 @@
  * A link built from the row it is in — here "ask about this product" on WhatsApp, with the product's name in the
  * message. An attribute resolves a name with filters, so the text is encoded with `url_encode`.
  */
-import { apiContainer, fontAwesome, link, list, text } from '@plitzi/sdk-authoring';
+import { apiContainer, link, list, listItem } from '@plitzi/sdk-authoring';
 
 import type { SpaceSpec } from '@plitzi/sdk-authoring';
 
@@ -24,12 +24,17 @@ export const recipe: SpaceSpec = {
               id: 'products',
               items: 'catalog.data.products',
               children: [
-                link({
-                  target: 'blank',
-                  href: 'https://wa.me/34600000000?text={{ list_products.item.title|url_encode }}',
-                  children: [fontAwesome({ icon: 'fa-brands fa-whatsapp' }), text('Ask about it')]
-                }),
-                link({ href: 'mailto:shop@example.com', children: [text('Write to us')] })
+                listItem({
+                  children: [
+                    link({
+                      target: 'blank',
+                      href: 'https://wa.me/34600000000?text={{ list_products.item.title|url_encode }}',
+                      icon: 'fa-brands fa-whatsapp',
+                      content: 'Ask about it'
+                    }),
+                    link({ href: 'mailto:shop@example.com', content: 'Write to us' })
+                  ]
+                })
               ]
             })
           ]

package/skills/plitzi-authoring/recipes/marquee.ts

@@ -2,7 +2,7 @@
  * A marquee: a row of names that scrolls for ever and stops under the pointer. The items are rendered three times
  * and the keyframe moves the track by a third, so the end meets the start with no jump.
  */
-import { apiContainer, container, list, styles, text } from '@plitzi/sdk-authoring';
+import { apiContainer, container, list, styles, text, listItem } from '@plitzi/sdk-authoring';
 
 import type { SpaceSpec } from '@plitzi/sdk-authoring';
 
@@ -45,7 +45,7 @@ export const recipe: SpaceSpec = {
                   class: track,
                   from: 'catalog.data.brands',
                   as: '{{ source|merge(source)|merge(source) }}',
-                  children: [text({ from: 'brands.item' })]
+                  children: [listItem({ children: [text({ from: 'brands.item' })] })]
                 })
               ]
             })

package/skills/plitzi-authoring/recipes/scroll-a-row.ts

@@ -12,7 +12,8 @@ import {
   scrollBy,
   setState,
   styles,
-  text
+  text,
+  listItem
 } from '@plitzi/sdk-authoring';
 
 import type { SpaceSpec } from '@plitzi/sdk-authoring';
@@ -45,10 +46,9 @@ export const recipe: SpaceSpec = {
           children: [
             // Shown until the row says it is at that end: the arrows are there before anybody scrolls.
             button({
-              content: '',
+              content: '‹',
               title: 'Previous categories',
               visible: '!state.rowAtStart',
-              children: [text('‹')],
               flows: [[onClick(), scrollBy('categories', { x: '-80%' })]]
             }),
             list({
@@ -62,13 +62,12 @@ export const recipe: SpaceSpec = {
                   setState({ key: 'rowAtEnd', type: 'boolean', value: '{{ moved.atEnd }}' })
                 ]
               ],
-              children: [text({ class: card, from: 'categories.item' })]
+              children: [listItem({ class: card, children: [text({ from: 'categories.item' })] })]
             }),
             button({
-              content: '',
+              content: '›',
               title: 'More categories',
               visible: '!state.rowAtEnd',
-              children: [text('›')],
               flows: [[onClick(), scrollBy('categories', { x: '80%' })]]
             })
           ]

package/skills/plitzi-authoring/recipes/server-data.ts

@@ -0,0 +1,65 @@
+/**
+ * Data in a server project (`create --mode server`): a JSON file the project serves (`public/data/plans.json`), read
+ * by the page server before it answers — so the page arrives with the plans in its HTML, their anchors in place, and
+ * nothing to fetch once the browser has it.
+ *
+ * - `runtime: 'server'` on the provider is the whole switch: server data is on unless a space turns it off.
+ * - The answer is read exactly as in the browser — `plans.data.…` — so moving a provider between runtimes changes no
+ *   binding.
+ * - The page server resolves what a page and its layouts hold, never inside a component: the provider stays on the page
+ *   and each row reaches the card component as a prop.
+ * - `mockData` is what the builder shows while editing; the running page always reads the file.
+ */
+import { apiContainer, heading, list, listItem, styles, text } from '@plitzi/sdk-authoring';
+
+import type { SpaceSpec } from '@plitzi/sdk-authoring';
+
+const grid = styles('plan-grid', {
+  display: 'grid',
+  'grid-template-columns': 'repeat(auto-fill, minmax(220px, 1fr))',
+  gap: '16px',
+  margin: '0px',
+  padding: '0px'
+});
+
+const card = styles('plan-card', { padding: '16px', 'border-radius': '12px', 'background-color': 'var(--card)' });
+
+export const recipe: SpaceSpec = {
+  name: 'Pricing',
+  permanentUrl: 'pricing',
+  variables: { color: { card: { light: '#ffffff', dark: '#16161d', default: '#ffffff' } } },
+  components: [
+    {
+      id: 'plan-card',
+      props: { item: { type: 'json', description: 'The plan: name and price' } },
+      // The row of the list: an `<li>` reading the plan it was handed.
+      root: listItem({
+        id: 'plan-item',
+        class: card,
+        children: [heading({ subType: 'h3', from: 'props.item.name' }), text({ from: 'props.item.price' })]
+      })
+    }
+  ],
+  pages: [
+    {
+      id: 'home',
+      name: 'Home',
+      slug: '',
+      body: [
+        apiContainer({
+          id: 'plans',
+          query: '/data/plans.json',
+          runtime: 'server',
+          mockData: { plans: [{ name: 'Starter', price: '$0' }] },
+          children: [
+            // `plans.data.plans` — the file's `plans` — in either runtime.
+            list({ id: 'plan-list', class: grid, items: 'plans.data.plans', row: 'plan-card' }),
+            text('No plans yet.', {
+              visible: { source: 'plans.data.plans', template: '{{ source is defined and source|length == 0 }}' }
+            })
+          ]
+        })
+      ]
+    }
+  ]
+};