@typeroll/mcp-server 0.45.47 → 0.45.49

package/dist/bundled-content.js

@@ -9,7 +9,7 @@ export const BUNDLED_SKILLS = {
     "tr-content-write": "---\nname: tr-content-write\ndescription: Use when the user asks to write, draft, or rewrite a page on a Typeroll site. Loads the site's design conventions before writing so the new content matches the existing voice and style.\n---\n\n# Write a page that fits the site\n\n> **The buffer model (draft writes).** Every content write in this recipe\n> (pages, blocks and partials) lands in an unsaved per-doc\n> DRAFT — deploys and plain previews only see SAVED content. For recipe-style\n> build work, pass `save: true` on write calls (the work is pre-approved by\n> the task itself), or run `commit_working_copy` per doc before any\n> `trigger_deploy`. Preview your drafts with `include_working_copy: true`.\n\n\nThe default failure mode for an AI writing a page is \"good generic\nHTML in the wrong voice.\" This skill makes the discovery step\nnon-optional.\n\n## Recipe\n\n### 1. Always discover first\n\n```\nget_site                          # site name (use it in copy)\nread_site_settings                # tagline, contact info, brand colors\nread_partial partial_id=\"header\"  # what other pages exist in the nav\nlist_pages limit=5\nbatch_read_pages page_ids=[<2-3 representative pages>]\n```\n\nRead the actual HTML of an existing page. Note:\n- Heading structure (single `<h1>` per page? subtitle pattern?)\n- Whether the site uses CSS variables (`var(--color-primary)`) or\n  hardcoded values\n- Tone (sober, playful, technical, marketing-y)\n- Length conventions (do existing pages run 200 words or 2000?)\n- Whether internal links use absolute or relative URLs\n\n`list_styles` too: use the site's named styles (`style_id` on heading, text,\nlist, button and section blocks) for eyebrows, leads, quotes and buttons. If a\ntreatment you need could recur and no style fits, create one rather than\nsetting one-off values; ask first when it changes the site's look.\n\nA small label above a heading is the heading block's `eyebrow`, and a line\nbelow it is its `subtitle` (render version 2), each with its own style field.\nNever write them as separate text blocks with classed HTML. In text blocks,\nstyle whole paragraphs with site text styles (`<p class=\"s-lead\">`). Content\nthat needs headings with parts, images or buttons belongs in their own blocks,\nnot in a text block's HTML.\n\n`list_block_templates` and `list_partials` too. Start a common section from a\nblock template (`insert_block_template`, then edit the copy). Use a global\nblock (`core/global_block`) for content that must stay identical on every\npage, such as a shared call to action; don't paste copies of it.\n\n### 2. Ask for the brief\n\nIf the user hasn't told you, ask:\n\n- **Topic + purpose**: what's the page for, who's it for?\n- **Key points**: must-include facts, calls to action\n- **Target length**: short landing vs. long-form\n- **Audience**: anything specific (existing customers, agencies,\n  developers)\n- **Reference page**: is there an existing page to match in tone or\n  structure?\n\n### 3. Draft\n\nWrite in semantic HTML, matching the site's conventions you observed\nin step 1:\n\n- Use `<section>`, `<article>`, `<h1>`/`<h2>`, `<p>`, `<ul>` — avoid\n  div soup.\n- Match the existing site's class naming or CSS variable usage. Don't\n  introduce a new design system mid-page.\n- Insert images via `<img src=\"https://cdn...\" alt=\"...\">` — use\n  `list_media` to find existing images first; only generate new ones\n  if necessary (see `tr-images` skill).\n- Default status: `draft`. Don't auto-publish unless the user said so.\n\n### 4. Create or update\n\n```\n# New page:\ncreate_page title=\"...\" slug=\"...\" html_content=\"<full body>\"\n            status=\"draft\" kind=\"page\"\n            seo_title=\"...\" seo_description=\"...\"\n\n# Or update an existing one:\nupdate_page page_id=<id> patch={ html_content: \"...\" }\n```\n\nFor an existing page, `read_page` first and preserve the existing\nstructure — replace one section at a time rather than rewriting the\nwhole body, unless the user explicitly asked for a full redo.\n\n### 5. Preview + iterate\n\n```\nget_preview_link page_id=<id>\n```\n\nShow the URL to the user. Iterate on feedback. Common rounds:\nshortening, adding a CTA, tweaking SEO description.\n\n### 6. Status change is the user's call\n\nDon't `update_page status:\"published\"` without an explicit \"looks\ngood, publish it\" from the user. Same for `trigger_deploy`.\n\n## SEO conventions worth knowing\n\n- **`kind: \"article\"`** for blog posts and news. Switches to\n  `og:type=article` + emits Article JSON-LD. Set `author` too — empty\n  author = no Person schema = no author rich-result eligibility.\n- **SEO title** target 50-60 chars. Past 60 Google truncates.\n- **Meta description** target 150-160 chars. Don't write fluff to\n  fill it; Google rewrites descriptions when they go off-topic.\n- **OG image** per page matters for shareable content. For articles\n  especially.\n\n## Pitfalls\n\n- Reading 0 pages and just inventing a design is the most common\n  failure. Always sample at least one existing page first.\n- Skipping the brief and producing 1000 words of plausible filler when\n  the user wanted a 200-word landing. Ask up front.\n- Auto-publishing. Don't.\n",
     "tr-custom-blocks": "---\nname: tr-custom-blocks\ndescription: Use when a Typeroll site needs a block the core library does not have (an icon list, cards, steps, a team strip), so the user wants a reusable block type with its own fields.\n---\n\n# Build a site block type\n\nA site block type is reusable: editors place it and fill in its fields, and\nevery instance updates when the type changes. Build one when the same section\nshape recurs, or when editors should fill in fields rather than arrange\nblocks. For a one-off section use plain blocks; for a section copied and then\nadapted per page use a block template; for content that must be identical\neverywhere use a global block.\n\nCreating, changing and deleting block types needs admin permission. A changed\nblock type reaches the live site with the next deploy.\n\n## 1. Look before you build\n\n```\nlist_block_types                 # core and site types: maybe it exists\nlist_block_type_starters         # icon_list, feature_cards, steps\nlist_styles                      # the site's named styles to use inside\n```\n\nPrefer a starter or a core block with the right settings over a new type.\n\n## 2. Compose it from existing blocks\n\nComposed is the default. Declare the editable fields in `schema` and build the\nmarkup from core blocks in `composition`:\n\n- An inner block field set to exactly `\"{{props.name}}\"` takes the block's\n  field value. Bindings keep their type (lists, links, booleans).\n- For a repeating group, add a `core/repeater` with\n  `items: \"{{props.items}}\"`, `source_type: \"static\"` and no `item_block`. Its\n  children render once per item and read the item with `\"{{item.title}}\"`.\n- Make a whole item a link with a `core/container`\n  `{ tag: \"a\", href: \"{{item.link.href}}\", new_tab: \"{{item.link.new_tab}}\" }`.\n  Items without a link render as a plain container.\n- Use `core/text` for values from text fields (always escaped), `core/heading`\n  for headings, `core/icon`, `core/image`, `core/button`.\n- Give inner blocks named styles (`style_id`) instead of CSS where you can.\n\nField types: `text`, `textarea`, `richtext`, `image`, `icon` (`{name}_svg`),\n`link` (`{ page_id }` or `{ url }` plus `new_tab`; resolves to `href`, `target`,\n`rel` and follows page renames), `select` with `options`, `boolean`, `number`,\n`array` (`fields`, `item_label`, `min_items`, `max_items`), `object`.\n\n## 3. Check and preview before saving\n\n```\nvalidate_block_type definition={…}        # problems with paths, e.g. /schema/0/fields/1/name\npreview_block_type definition={…}         # html + css with sample data, as published\n```\n\nFix every error. Read warnings: a binding inside other text\n(`\"Call {{props.phone}}\"`) is shown as typed; only whole-value bindings resolve.\n\n## 4. CSS\n\n`styles` apply only inside the block: selectors are prefixed automatically,\n`:scope` is the block element, and `html`, `body` and `:root` are refused. Use\n`var(--color-primary)` and the site's spacing, not fixed colours, and keep text\nat WCAG AA contrast.\n\n## 5. Create, place, deploy\n\n```\ncreate_block_type name=\"icon_list\" label=\"Icon list\" category=\"content\" schema=[…] composition=[…] styles=\"…\"\nadd_block page_id=<id> block={ type: \"icon_list\", data: { items: [ … ] } }\nget_preview_link page_id=<id>\n```\n\nShow the preview to the user. Deploy only when they approve.\n\n## Template block types (advanced)\n\nWhen the markup cannot be built from blocks, use `template` instead of\n`composition`: `{{field}}` (escaped), `{{{richtext_field}}}`, `{{#field}}…{{/field}}`,\n`{{^field}}…{{/field}}` (empty), `{{#each items}}…{{/each}}` with `{{@index}}`,\n`{{@number}}`, `{{@first}}`, `{{@last}}`, and `{{#link field class=\"x\"}}…{{/link}}`.\nA type has a composition or a template, never both.\n\n## Changing a type in use\n\n- Rename a field with `renames: { \"old\": \"new\" }` (`\"items.old\": \"new\"` inside a\n  group): Typeroll moves the data everywhere the type is used.\n- Removing or retyping a field that holds data is refused with the list of\n  usages unless you send `confirm_data_loss: true`. Ask the user first.\n- `find_pages_using_block_type` before deleting; a type in use cannot be\n  deleted.\n\n## Pitfalls\n\n- Pasting HTML into a `core/html` block inside a composition: editors cannot\n  edit it and it skips the site's styles. Compose from real blocks.\n- Binding a text field into `core/prose`: the value becomes HTML. Use `core/text`.\n- Nesting links: an icon or button with its own link inside a linked container.\n- Linked containers on a site below render version 4: every icon sits in a\n  link of its own, so the icon list starter nests links, and an item without\n  an address is still a link. The write warns; upgrade the site's rendering\n  (`tr-upgrade-rendering`) first.\n- Writing `script` without the user's explicit request.\n",
     "tr-design-review": "---\nname: tr-design-review\ndescription: Use to review a deployed/previewed Typeroll page like a designer — a MEASURED multi-dimension pass (responsive, a11y, functional, content, SEO, performance) that emits a per-dimension scorecard and an explicit OK verdict. Run it before telling the user a design is approved; it's the \"how\" for tr-redesign-branch's approval round.\n---\n\n# Review a design — measured, not glanced\n\nA design review is a MEASUREMENT, not a look. The failure mode is reporting\n\"looks good\" off a couple of screenshots — which silently misses overflow at\nuntested widths, sub-AA contrast, broken/blank images, and small touch targets.\nThis skill is the deterministic routine: per dimension, a check you RUN (a\nbrowser-eval snippet or a curl), and a scorecard you fill with PASS / FAIL /\nUNTESTED. Never report \"approved\" off a partial pass — list what you didn't test\nas caveats.\n\n`tr-redesign-branch` step 6 lists the dimensions (the \"what\"). This is the \"how\".\n\n## Cardinal rule: a screenshot is evidence, not proof\n\n**Full-page screenshots lie about lazy-loaded images.** A page with\n`loading=\"lazy\"` images below the fold will screenshot with BLANK boxes where\nthose images sit — they hadn't entered the viewport when the capture fired. If\nyou trust that, you will report a non-existent \"empty illustration box\" gap.\n(This has happened — on a real review, across three variants at once.)\n\nSo, always:\n\n- **Before any full-page capture**, scroll the whole page to trigger lazy loads\n  and let it settle (snippet in §5), THEN screenshot.\n- **Verify every suspected blank/broken image via the DOM** (`naturalWidth` after\n  scroll), never from the screenshot. A real broken image has `complete === true\n  && naturalWidth === 0`; a lazy one that just hasn't loaded has `complete ===\n  false` — scroll it into view and re-check before calling it broken.\n\n## Setup\n\n1. Get a URL for the version under review. While iterating, use the DB-live\n   `get_preview_link` (mint once, reuse — defaults to a 24h TTL) — it renders\n   from the DB with no build, so fixes show on reload without re-deploying, and\n   it's the loop for the review-fix-recheck cycle. For a FINAL bit-for-bit check\n   of the compiled output before merge, deploy once (`trigger_deploy\n   version=\"<branch>\"` → poll `get_deploy_status` → use the immutable\n   `deploy_url`, a Cloudflare Pages hash URL). Review the SAME url end to end.\n2. The snippets below run in a browser tool's \"evaluate JavaScript\" (Playwright /\n   chrome-devtools / puppeteer MCP). **One origin per eval:** the iframe trick\n   needs same-origin, so run each variant's snippet on its own page (different\n   `*.pages.dev` hashes are cross-origin → `contentDocument` is null).\n3. If you run several variants with one shared browser profile, do them\n   SEQUENTIALLY — parallel browser agents on one profile contaminate each other's\n   tabs/screenshots.\n\n## The dimensions — run each, record the result\n\n### 1. Responsive — width ladder 390/768/1024/1440/1920, zero overflow\n\nMeasure horizontal overflow at every width in ONE eval using same-origin iframes\n(each iframe is its own layout viewport, so `@media` fires correctly — no 15\nresizes):\n\n```js\nasync () => {\n  const url = location.href, out = [];\n  for (const w of [390,768,1024,1440,1920]) {\n    const f = document.createElement('iframe');\n    f.style.cssText = `width:${w}px;height:2400px;border:0;position:fixed;left:-99999px;top:0`;\n    document.body.appendChild(f);\n    await new Promise(r => { f.onload = r; f.src = url; });\n    await new Promise(r => setTimeout(r, 700));\n    const d = f.contentDocument, culprits = [];\n    for (const el of d.body.querySelectorAll('*')) {\n      const r = el.getBoundingClientRect();\n      if (r.right > w + 1 && r.width <= w + 40 && r.width > 4)\n        culprits.push(el.tagName.toLowerCase() + '.' + (el.className||'').toString().slice(0,40));\n    }\n    out.push({ w, hOverflow: d.documentElement.scrollWidth - w, n: culprits.length, sample: [...new Set(culprits)].slice(0,6) });\n    f.remove();\n  }\n  return out;\n}\n```\n\nPASS = `hOverflow <= 0` at every width. A decorative element flagged while\n`hOverflow` is 0 is clipped by an `overflow:hidden` parent (no scrollbar) — a\nnon-issue. Then eyeball one tablet (768) capture for stacking — but capture\nAFTER the scroll-settle in §5.\n\n### 2. Accessibility — compute contrast, don't eyeball\n\n```js\n() => {\n  const L = c => { const a = c.map(v => (v/=255, v<=.03928?v/12.92:((v+.055)/1.055)**2.4)); return .2126*a[0]+.7152*a[1]+.0722*a[2]; };\n  const P = c => { const m = c.match(/rgba?\\(([^)]+)\\)/); if(!m) return null; const p = m[1].split(',').map(parseFloat); return {rgb:[p[0],p[1],p[2]], a:p[3]??1}; };\n  const R = (f,b) => { const x=L(f),y=L(b),h=Math.max(x,y),l=Math.min(x,y); return (h+.05)/(l+.05); };\n  const bg = el => { let e=el; while(e){ const s=getComputedStyle(e); if(s.backgroundImage!=='none') return {img:1}; const c=P(s.backgroundColor); if(c&&c.a>.5) return {rgb:c.rgb}; e=e.parentElement; } return {rgb:[255,255,255]}; };\n  const bad=[], seen=new Set();\n  for (const el of document.body.querySelectorAll('*')) {\n    const t=[...el.childNodes].filter(n=>n.nodeType===3&&n.textContent.trim()).map(n=>n.textContent.trim()).join(' ');\n    if(!t) continue;\n    const r=el.getBoundingClientRect(); if(r.width<2||r.height<2) continue;\n    const s=getComputedStyle(el); if(s.visibility==='hidden'||s.display==='none'||+s.opacity<.1) continue;\n    const fg=P(s.color); if(!fg) continue;\n    const b=bg(el); if(b.img) continue; // can't compute over an image — eyeball hero text separately\n    const cr=R(fg.rgb,b.rgb), fs=parseFloat(s.fontSize), fw=+s.fontWeight||400;\n    const need = (fs>=24||(fs>=18.66&&fw>=700)) ? 3 : 4.5;\n    if (cr<need) { const k=t.slice(0,30)+cr.toFixed(2); if(seen.has(k))continue; seen.add(k);\n      bad.push({txt:t.slice(0,45), ratio:+cr.toFixed(2), need, fs:Math.round(fs), fw, color:s.color, bg:'rgb('+b.rgb.join(',')+')'}); }\n  }\n  return { failures: bad.length, items: bad.slice(0,15) };\n}\n```\n\nPASS = 0 failures (AA: body ≥4.5:1, large/UI ≥3:1). Fix a failure by deepening\nthe offending colour token. Text over an image background is skipped — eyeball\nthose (hero overlays) for legibility separately.\n\nStructure + alt + landmarks, same eval session:\n\n```js\n() => {\n  const h=[...document.querySelectorAll('h1,h2,h3,h4')].map(e=>+e.tagName[1]);\n  const skips=h.map((v,i)=>i&&v-h[i-1]>1?`${h[i-1]}->${v}`:0).filter(Boolean);\n  const imgs=[...document.querySelectorAll('img')];\n  const inputs=[...document.querySelectorAll('input:not([type=hidden]),textarea,select')];\n  const labelFor=new Set([...document.querySelectorAll('label[for]')].map(l=>l.getAttribute('for')));\n  return {\n    h1: h.filter(x=>x===1).length, levelSkips: skips,\n    imgsMissingAlt: imgs.filter(i=>i.getAttribute('alt')===null).length,\n    landmarks: ['header','nav','main','footer'].filter(t=>document.querySelector(t)),\n    unlabeledInputs: inputs.filter(i=>!(i.id&&labelFor.has(i.id))&&!i.getAttribute('aria-label')).map(i=>i.name||i.id),\n  };\n}\n```\n\nPASS = exactly one `h1`, `levelSkips` empty, `imgsMissingAlt` 0, all four\nlandmarks present, `unlabeledInputs` empty. (Decorative images SHOULD have\n`alt=\"\"` — that's not \"missing\".)\n\nTouch targets — interactive elements ≥44px at mobile. Run in a 390px iframe;\nEXCLUDE `aria-hidden` (the form honeypot is a visible-sized but hidden input —\ncounting it is a false positive) and inline text links inside `p`/`li`:\n\n```js\nasync () => {\n  const f=document.createElement('iframe');\n  f.style.cssText='width:390px;height:2400px;border:0;position:fixed;left:-99999px;top:0';\n  document.body.appendChild(f);\n  await new Promise(r=>{ f.onload=r; setTimeout(r,3000); f.src=location.href; });\n  await new Promise(r=>setTimeout(r,700));\n  const d=f.contentDocument, small=[];\n  if(d) for (const el of d.querySelectorAll('a,button,input:not([type=hidden]),textarea,select,[role=button]')) {\n    const r=el.getBoundingClientRect(); if(r.width<2||r.height<2) continue;\n    const s=getComputedStyle(el); if(s.display==='none'||s.visibility==='hidden'||+s.opacity<.1) continue;\n    if(el.getAttribute('aria-hidden')==='true') continue;\n    if(el.tagName==='A'&&el.closest('p,li')) continue;\n    if(r.height<44||r.width<44) small.push({tag:el.tagName.toLowerCase(), txt:(el.innerText||el.value||el.getAttribute('aria-label')||'').trim().slice(0,24), w:Math.round(r.width), h:Math.round(r.height)});\n  }\n  f.remove(); return { undersized: small };\n}\n```\n\nAlso confirm `:focus-visible` and `prefers-reduced-motion` exist (grep the page\nHTML: `grep -c 'focus-visible' page.html`, `grep -c 'prefers-reduced-motion'`).\nNote honestly: presence in CSS ≠ verified per-element — tab through live if you\nclaim keyboard focus works.\n\n### 3. Functional — console, links, form\n\n- **Console:** read the browser tool's console messages after load. PASS = 0\n  errors/warnings.\n- **Links:** PASS = no `href=\"#\"`/empty; every in-page `#anchor` has a matching\n  `id`.\n- **Form (markup — does NOT prove a live submit):** curl the page and verify the\n  `<form>` `action` is the real submit endpoint, the hidden `_token` is\n  non-empty, the honeypot is present + `aria-hidden`, required fields have\n  `required`, the email field is `type=\"email\"`. State explicitly that you did\n  NOT submit (a live POST creates a real submission) unless you actually did.\n\n### 4. Content — verbatim, no placeholders\n\n`grep -Ei 'lorem|ipsum|\\{\\{|placeholder|TODO|FIXME' page.html` → 0. Copy matches\nthe live page (the source of truth) verbatim.\n\n### 5. Broken / blank images (the anti-lazy-load check — run THIS before trusting any screenshot)\n\n```js\nasync () => {\n  const H=document.body.scrollHeight;\n  for(let y=0;y<=H;y+=400){ window.scrollTo(0,y); await new Promise(r=>setTimeout(r,120)); }\n  window.scrollTo(0,0); await new Promise(r=>setTimeout(r,1500));\n  const imgs=[...document.querySelectorAll('img')];\n  const empty=[]; // genuinely empty boxes: large, no text/img/svg/bg-image\n  for (const el of document.querySelectorAll('div,section,figure')) {\n    const r=el.getBoundingClientRect(); if(r.width<160||r.height<140) continue;\n    if((el.innerText||'').trim()||el.querySelector('img,svg,picture,canvas,video')) continue;\n    if(getComputedStyle(el).backgroundImage!=='none') continue;\n    empty.push({cls:(el.className||'').toString().slice(0,36), w:Math.round(r.width), h:Math.round(r.height)});\n  }\n  return {\n    broken: imgs.filter(i=>i.complete&&i.naturalWidth===0).map(i=>i.src.slice(-45)), // real failures\n    stillLoading: imgs.filter(i=>!i.complete).map(i=>i.src.slice(-45)),               // lazy, scroll first\n    emptyBoxes: empty.slice(0,8),                                                     // true placeholders\n  };\n}\n```\n\nPASS = `broken` empty, `emptyBoxes` empty. A non-empty `emptyBoxes` is a genuine\nunfilled illustration slot (fill it — pages shouldn't be text deserts). NOW\ncapture screenshots (the page is scrolled-and-settled, images loaded).\n\n### 5b. Clipped artwork — the logo (and any brand image) cut off by its own frame\n\nThe single most-repeated visual bug: the header logo rendered with its top/edges\nsliced. It produces ZERO page overflow (§1 misses it), the image isn't broken\n(§5 misses it), and at full-page screenshot scale a few clipped pixels are easy\nto glance past. So MEASURE it: does the artwork's rendered content touch the edge\nof its own box on any side? Content flush against the frame (gap ≈ 0) = clipped\nor about-to-clip. Don't just check the logo — check it, then trust the number.\n\nFor a raster/`<img>` logo, draw it to a same-origin canvas and scan the border\nrows/cols for opaque pixels (cross-origin taints the canvas — fetch the asset to\na localhost file first, as in §setup, or measure on the asset directly):\n\n```js\nasync (url) => { // url = the logo's currentSrc, served same-origin\n  const img = new Image(); await new Promise((r,e)=>{img.onload=r;img.onerror=e;img.src=url;});\n  const h = 64, w = Math.round(h*img.naturalWidth/img.naturalHeight);\n  const c = document.createElement('canvas'); c.width=w; c.height=h;\n  const x = c.getContext('2d'); x.drawImage(img,0,0,w,h);\n  const d = x.getImageData(0,0,w,h).data, op=(px)=>d[px*4+3]>20;\n  let top=h,bot=0,left=w,right=0;\n  for(let y=0;y<h;y++)for(let xx=0;xx<w;xx++)if(op(y*w+xx)){top=Math.min(top,y);bot=Math.max(bot,y);left=Math.min(left,xx);right=Math.max(right,xx);}\n  return { topGap:top, bottomGap:h-1-bot, leftGap:left, rightGap:right }; // any 0 → flush/clipped\n}\n```\n\nPASS = every gap ≥ ~2% of the dimension. A `0` on any side means the artwork (or\nits stroke) sits on the frame — for an SVG that's a viewBox trimmed flush to the\nart (look for `-trim`/`-tight` in the filename); the fix is to re-export the SVG\nwith viewBox padding (e.g. widen `viewBox` by ~8% each side) so the stroke never\ntouches the edge. Verify the fix by re-running this with the patched asset. (A\nheavy `stroke-width` + `paint-order=\"stroke\"` outline makes a flush viewBox clip\nvisibly — and small header renders make it worse, so also check the logo isn't\nshrunk below ~64–72px in the header.)\n\nAlso confirm no ANCESTOR clips the logo: walk the logo's parents for\n`overflow:hidden|clip` combined with a fixed height or negative/overlap margin —\nand always judge the logo from a screenshot of the header REGION in context,\nnever the logo element in isolation (an element screenshot re-renders the full\nart and hides the clip).\n\n**The inverse bug — an image FLOATING inside its frame (don't blame the file).**\nA full-bleed illustration that renders with a margin of empty frame around it\nusually isn't a bad asset — it's CSS. In blocks-mode the site-template's global\n`:where(.page-content) img{ margin:1rem 0 }` (and a default `border-radius`)\nleaks onto any `<img>` you didn't reset, so a framed hero/figure gets a 1rem gap\ninside its frame and looks like it \"floats\". Before re-cropping or regenerating,\n**open the actual image file** (`curl` the `.avif`/`.png`) — if the motif fills\nthe file edge-to-edge, the float is CSS: set `margin:0` (and `border-radius:0`)\non the framed `<img>` (e.g. `.your-frame img{margin:0}` or a blanket\n`.your-scope img{margin:0}`). Measure it: the `<img>`'s `getBoundingClientRect`\nshould equal its frame's inner box (no gap). Only when the *file itself* has\nbuilt-in background margin (motif ≪ frame) is cropping the right fix.\n\n### 6. Findable (SEO/meta) — curl, fast\n\n`<title>` (≤60 chars) + meta description present + sensible; `og:title/description/image`;\n`canonical`; `favicon` + `apple-touch-icon`; `<html lang>`; branches must be\n`noindex`. One curl + greps covers it.\n\n### 7. Fast (performance)\n\nPASS signals: no render-blocking JS you didn't add; responsive variants\n(`srcset` + AVIF/WebP) so a 1024px asset isn't shipped to a 380px slot;\n`width`/`height` or aspect-ratio set (no layout shift); **below-fold images\n`loading=\"lazy\"`, above-fold `eager`**. Flag a section that eager-loads every\nimage, or a multi-hundred-KB original served when a small AVIF variant exists.\n\n### 8. Cross-browser\n\nThe same CSS renders differently per engine. Re-check in another engine if you\ncan. If only Chromium is available, say so as UNTESTED and statically flag risky\nprops: `backdrop-filter` without fallback, `-webkit-`-only masks, `100vh` on\nmobile (prefer `100svh`), `position:sticky` inside `overflow`.\n\n## Deliver a scorecard + an explicit verdict\n\nReport a table — one row per dimension, value PASS / FAIL(detail) / UNTESTED —\nthen a one-line verdict. Rules:\n\n- \"Approved\" requires PASS on responsive, a11y, functional, content, SEO,\n  performance. Untested dimensions (commonly cross-browser, live form submit) are\n  listed as CAVEATS, not silently dropped — an OK with caveats is honest; an\n  unqualified \"approved\" off a partial pass is not.\n- Brand FIT (palette/voice matching `brand.md`) is a direction judgment, not a\n  pass/fail defect — call it out separately so the user decides direction.\n- If you fixed anything mid-review, just reload the DB-live preview and re-run\n  the affected dimension before signing off — no re-deploy needed (deploy only\n  for the final compiled-output check, if any).\n\nSee `tr-redesign-branch` for the surrounding branch → preview → approve → merge\nflow; this skill is its measured approval round.\n",
-    "tr-forms": "---\nname: tr-forms\ndescription: Use when the user wants to add a contact form, newsletter signup, booking form, or other web form to a Typeroll site.\n---\n\n# Add a form to a Typeroll site\n\nTyperoll forms are server-backed. The platform renders the form shell, accepts\nsigned submissions, validates declared fields, stores submissions, and runs\nemail and webhook actions configured in the portal or through MCP/API.\n\n## Choose the placement\n\n- Block-mode page: add `{ type: 'core/form', data: { form_id } }`.\n- HTML-mode page: add `<x-form id=\"form-id\" />` to `html_content`.\n\nBoth are authoring references to the same renderer. Preview and static\ngeneration expand them to the complete form HTML, signed token, honeypot,\ninitial step state, styles, and shared runtime. Never hand-write the `<form>`\nshell or paste a token into page HTML.\n\n## Create a simple form\n\n`fields[]` is authoring sugar for one static step:\n\n```json\n{\n  \"id\": \"newsletter\",\n  \"name\": \"Newsletter\",\n  \"fields\": [\n    {\"name\":\"email\", \"type\":\"email\", \"label\":\"E-postadress\", \"required\":true}\n  ],\n  \"submit_text\": \"Prenumerera\",\n  \"success_message\": \"Tack! Du är anmäld.\"\n}\n```\n\n`success_message` may contain basic sanitized HTML, such as a link to the next\nstep. To send the visitor somewhere after the final step instead, set\n`success_redirect_url` to a root-relative path (`/tack/`) or an `http(s)` URL,\nfor example a booking page. Other schemes are rejected; `\"\"` clears it.\n\nField names must match `[a-z][a-z0-9_-]*`. Labels may be localized. Supported\nsimple types include `text`, `email`, `tel`, `url`, `number`, `textarea`,\n`select`, `radio`, `checkbox`, `hidden`, and `gdpr_consent`.\n\n## Place the form\n\nOn a block-mode page:\n\n```\nadd_block target={kind:'page', id:'start'}\n  block={type:'core/form', data:{form_id:'newsletter'}}\n```\n\nOn an HTML-mode page:\n\n```html\n<section class=\"newsletter-signup\">\n  <h2>Få våra nyheter</h2>\n  <x-form id=\"newsletter\" />\n</section>\n```\n\n`<x-form>` is not a browser-side shortcode. It is replaced during server\npreview/build, so it also supports multi-step forms and never needs inline JS.\n\n## Multi-step form\n\nFor a funnel, write `steps[]` directly. Each step is a block tree containing\n`form/*` field blocks and optional content blocks:\n\n```\nupdate_form form_id=ansokan patch={steps:[\n  {id:'company', title:'Företag', blocks:[\n    {type:'form/text', data:{name:'company', label:'Företag', required:true}},\n    {type:'form/email', data:{name:'email', label:'E-post', required:true}}\n  ]},\n  {id:'details', title:'Detaljer', blocks:[\n    {type:'form/textarea', data:{name:'message', label:'Meddelande'}},\n    {type:'form/consent', data:{name:'consent', text:'<p>Jag godkänner …</p>'}}\n  ]}\n]}\n```\n\nSubmissions accumulate in one partial record and become complete on the final\nstep. Abandoned partials use `partial_ttl_days` (default 30).\n\n## Storage and integrations\n\nCompleted submissions appear in Forms → Submissions. Admins can configure\nactions in the form editor:\n\n- Email notification or autoresponder through the site's email connector.\n- Generic webhook to a public HTTPS endpoint. The admin chooses an explicit\n  field allowlist and signing secret. Typeroll signs the exact request body in\n  `X-Typeroll-Signature`, sends an idempotency key, retries transient failures,\n  and stores delivery status.\n\nAgents manage the same actions with `read_form` (actions with secrets masked)\nand `update_form patch={ actions: [...] }`, with admin permission as in the\nportal. `actions` replaces the whole list: read the form, change what you need\nand send the list back. Examples:\n\n```\nupdate_form form_id=contact patch={ actions: [\n  { type: \"email\", config: { to: \"hello@example.com\", subject: \"New lead: {{name}}\",\n    body: \"<p>{{message}}</p>\", include_all: true, reply_to: \"{{email}}\" } },\n  { type: \"email\", config: { to: \"{{email}}\", subject: \"Thanks, {{name}}\",\n    body: \"<p>We will get back to you within a day.</p>\" } }\n] }\n```\n\nA webhook needs `url` (https), an explicit `fields` allowlist and a signing\n`secret`; send the masked value back to keep a stored secret.\n`get_form_capabilities` lists every action type the site offers, including\ntypes from installed apps, with the config fields each one takes.\n\nEmail actions send through the site's email provider. Check it with\n`get_email_settings`; if `email` is null, connect one with `set_email_settings`\n(for example `type: \"postmark\"`, `from`, `config: { server_token }`) and confirm\nwith `send_test_email`. Without a provider, submissions are stored but nobody is\nnotified. These tools need admin permission, like Settings → Email & notifications.\n\n`list_form_submissions` reads what visitors sent, `read_form_submission` reads\none entry (admins also see webhook delivery status) and `delete_form_submission`\nremoves one.\n\n## Verify\n\n1. `read_form form_id=\"newsletter\"` and confirm the steps/fields.\n2. Preview the page and confirm the authoring reference has expanded to a form\n   with `data-tr-form-el`, a signed token, and the platform runtime.\n3. Submit a test entry and confirm it appears in Forms → Submissions.\n4. If a webhook is configured, confirm its delivery status\n   (`read_form_submission`) and the receiving system's idempotency key before\n   deploying.\n5. If an email action is configured, confirm `get_email_settings` shows a\n   provider and the test message arrived.\n\n## Common patterns\n\nNewsletter:\n\n```json\n{\"fields\":[{\"name\":\"email\",\"type\":\"email\",\"label\":\"E-postadress\",\"required\":true}]}\n```\n\nContact:\n\n```json\n{\"fields\":[\n  {\"name\":\"name\",\"type\":\"text\",\"label\":\"Namn\",\"required\":true},\n  {\"name\":\"email\",\"type\":\"email\",\"label\":\"E-post\",\"required\":true},\n  {\"name\":\"message\",\"type\":\"textarea\",\"label\":\"Meddelande\",\"required\":true}\n]}\n```\n\nBooking request:\n\n```json\n{\"fields\":[\n  {\"name\":\"name\",\"type\":\"text\",\"label\":\"Namn\",\"required\":true},\n  {\"name\":\"email\",\"type\":\"email\",\"label\":\"E-post\",\"required\":true},\n  {\"name\":\"time\",\"type\":\"select\",\"label\":\"Tid\",\"options\":[\"09:00\",\"10:00\",\"14:00\"]},\n  {\"name\":\"notes\",\"type\":\"textarea\",\"label\":\"Kommentar\"}\n]}\n```\n\n## Pitfalls\n\n- Do not hand-write a form, token, honeypot, or submit script.\n- Do not put a raw `<script>` in page HTML; the sanitizer removes it.\n- Do not drop existing actions by accident: `actions` replaces the list.\n- Do not send every submitted field to a webhook by default; choose the\n  smallest allowlist the external register needs.\n- `submit_token` is stable until the platform rotates its form-signing secret;\n  a rebuild refreshes it after rotation.\n",
+    "tr-forms": "---\nname: tr-forms\ndescription: Use when the user wants to add a contact form, newsletter signup, booking form, or other web form to a Typeroll site.\n---\n\n# Add a form to a Typeroll site\n\nTyperoll forms are server-backed. The platform renders the form shell, accepts\nsigned submissions, validates declared fields, stores submissions, and runs\nemail and webhook actions configured in the portal or through MCP/API.\n\n## Choose the placement\n\n- Block-mode page: add `{ type: 'core/form', data: { form_id } }`.\n- HTML-mode page: add `<x-form id=\"form-id\" />` to `html_content`.\n\nBoth are authoring references to the same renderer. Static generation expands\nthem to the complete form HTML, signed token, honeypot, initial step state,\nstyles, and shared runtime. Previews expand them the same way but in preview\nmode (no token, a \"Preview – nothing is sent\" notice). Never hand-write the\n`<form>` shell or paste a token into page HTML.\n\n## Create a simple form\n\n`fields[]` is authoring sugar for one static step:\n\n```json\n{\n  \"id\": \"newsletter\",\n  \"name\": \"Newsletter\",\n  \"fields\": [\n    {\"name\":\"email\", \"type\":\"email\", \"label\":\"E-postadress\", \"required\":true}\n  ],\n  \"submit_text\": \"Prenumerera\",\n  \"success_message\": \"Tack! Du är anmäld.\"\n}\n```\n\n`success_message` may contain basic sanitized HTML, such as a link to the next\nstep. To send the visitor somewhere after the final step instead, set\n`success_redirect_url` to a root-relative path (`/tack/`) or an `http(s)` URL,\nfor example a booking page. Other schemes are rejected; `\"\"` clears it.\n\nField names must match `[a-z][a-z0-9_-]*`. Labels may be localized. Supported\nsimple types include `text`, `email`, `tel`, `url`, `number`, `textarea`,\n`select`, `radio`, `checkbox`, `hidden`, and `gdpr_consent`.\n\n## Place the form\n\nOn a block-mode page:\n\n```\nadd_block target={kind:'page', id:'start'}\n  block={type:'core/form', data:{form_id:'newsletter'}}\n```\n\nOn an HTML-mode page:\n\n```html\n<section class=\"newsletter-signup\">\n  <h2>Få våra nyheter</h2>\n  <x-form id=\"newsletter\" />\n</section>\n```\n\n`<x-form>` is not a browser-side shortcode. It is replaced during server\npreview/build, so it also supports multi-step forms and never needs inline JS.\n\n## Multi-step form\n\nFor a funnel, write `steps[]` directly. Each step is a block tree containing\n`form/*` field blocks and optional content blocks:\n\n```\nupdate_form form_id=ansokan patch={steps:[\n  {id:'company', title:'Företag', blocks:[\n    {type:'form/text', data:{name:'company', label:'Företag', required:true}},\n    {type:'form/email', data:{name:'email', label:'E-post', required:true}}\n  ]},\n  {id:'details', title:'Detaljer', blocks:[\n    {type:'form/textarea', data:{name:'message', label:'Meddelande'}},\n    {type:'form/consent', data:{name:'consent', text:'<p>Jag godkänner …</p>'}}\n  ]}\n]}\n```\n\nSubmissions accumulate in one partial record and become complete on the final\nstep. Abandoned partials use `partial_ttl_days` (default 30).\n\nNavigation: a step may set `submit_label`; otherwise (render version 5+) every\nstep but the last reads \"Continue\"/\"Fortsätt\" and the last uses `submit_text`.\n`allow_back` (default on from render version 5) shows a Back button that keeps\nthe answers; `show_progress: true | \"text\" | \"bar\"` shows \"Step X of Y\" or a\nbar. Give a step a `title` or a leading `form/heading`, not both; the write\nreturns a `warnings` entry when a step has both.\n\n## Storage and integrations\n\nCompleted submissions appear in Forms → Submissions. Admins can configure\nactions in the form editor:\n\n- Email notification or autoresponder through the site's email connector.\n- Generic webhook to a public HTTPS endpoint. The admin chooses an explicit\n  field allowlist and signing secret. Typeroll signs the exact request body in\n  `X-Typeroll-Signature`, sends an idempotency key, retries transient failures,\n  and stores delivery status.\n\nAgents manage the same actions with `read_form` (actions with secrets masked)\nand `update_form patch={ actions: [...] }`, with admin permission as in the\nportal. `actions` replaces the whole list: read the form, change what you need\nand send the list back. Examples:\n\n```\nupdate_form form_id=contact patch={ actions: [\n  { type: \"email\", config: { to: \"hello@example.com\", subject: \"New lead: {{name}}\",\n    body: \"<p>{{message}}</p>\", include_all: true, reply_to: \"{{email}}\" } },\n  { type: \"email\", config: { to: \"{{email}}\", subject: \"Thanks, {{name}}\",\n    body: \"<p>We will get back to you within a day.</p>\" } }\n] }\n```\n\nAn email action with `trigger: \"partial_abandoned\"` and `after_hours: 2` is\nsent once for a multi-step submission that stopped part-way and has not moved\non for two hours (never for completed ones) — opt-in follow-up on leads who\nleft after step 1.\n\nA webhook needs `url` (https), an explicit `fields` allowlist and a signing\n`secret`; send the masked value back to keep a stored secret.\n`get_form_capabilities` lists every action type the site offers, including\ntypes from installed apps, with the config fields each one takes.\n\nEmail actions send through the site's email provider. Check it with\n`get_email_settings`; if `email` is null, connect one with `set_email_settings`\n(for example `type: \"postmark\"`, `from`, `config: { server_token }`) and confirm\nwith `send_test_email`. Without a provider, submissions are stored but nobody is\nnotified. These tools need admin permission, like Settings → Email & notifications.\n\n`list_form_submissions` reads what visitors sent, `read_form_submission` reads\none entry (admins also see webhook delivery status) and `delete_form_submission`\nremoves one.\n\n## Verify\n\n1. `read_form form_id=\"newsletter\"` and confirm the steps/fields.\n2. Preview the page (`get_preview_link` or `get_page_preview`) and confirm the\n   authoring reference has expanded to a form with `data-tr-form-el` and the\n   platform runtime. Click through every step: previews validate, advance steps\n   and show the success message (or name the redirect target) like the\n   published form, marked \"Preview – nothing is sent\". They store nothing and\n   run no actions, so keep the runtime in any review copy.\n3. Submit a real test entry on a deployed page and confirm it appears in\n   Forms → Submissions.\n4. If a webhook is configured, confirm its delivery status\n   (`read_form_submission`) and the receiving system's idempotency key before\n   deploying.\n5. If an email action is configured, confirm `get_email_settings` shows a\n   provider and the test message arrived.\n\n## Common patterns\n\nNewsletter:\n\n```json\n{\"fields\":[{\"name\":\"email\",\"type\":\"email\",\"label\":\"E-postadress\",\"required\":true}]}\n```\n\nContact:\n\n```json\n{\"fields\":[\n  {\"name\":\"name\",\"type\":\"text\",\"label\":\"Namn\",\"required\":true},\n  {\"name\":\"email\",\"type\":\"email\",\"label\":\"E-post\",\"required\":true},\n  {\"name\":\"message\",\"type\":\"textarea\",\"label\":\"Meddelande\",\"required\":true}\n]}\n```\n\nBooking request:\n\n```json\n{\"fields\":[\n  {\"name\":\"name\",\"type\":\"text\",\"label\":\"Namn\",\"required\":true},\n  {\"name\":\"email\",\"type\":\"email\",\"label\":\"E-post\",\"required\":true},\n  {\"name\":\"time\",\"type\":\"select\",\"label\":\"Tid\",\"options\":[\"09:00\",\"10:00\",\"14:00\"]},\n  {\"name\":\"notes\",\"type\":\"textarea\",\"label\":\"Kommentar\"}\n]}\n```\n\nCampaign tracking: hidden fields named `utm_*` are filled from the same-named\nparameter in the page address (`?utm_source=linkedin`); `default` is sent when\nthe parameter is missing. Only the current address is read and nothing is\nstored in the browser, so no consent is needed; the campaign is not carried\nacross pages. Other hidden fields always send their `default`.\n\n```json\n{\"fields\":[\n  {\"name\":\"email\",\"type\":\"email\",\"label\":\"E-post\",\"required\":true},\n  {\"name\":\"utm_source\",\"type\":\"hidden\"},\n  {\"name\":\"utm_medium\",\"type\":\"hidden\",\"default\":\"website\"},\n  {\"name\":\"utm_campaign\",\"type\":\"hidden\"}\n]}\n```\n\n## Pitfalls\n\n- Do not hand-write a form, token, honeypot, or submit script.\n- Do not put a raw `<script>` in page HTML; the sanitizer removes it.\n- Do not drop existing actions by accident: `actions` replaces the list.\n- Do not send every submitted field to a webhook by default; choose the\n  smallest allowlist the external register needs.\n- Built-in visitor messages (button defaults, validation and error messages,\n  the no-JS confirmation page) follow the site's language, Swedish for `sv` and\n  English otherwise. Do not add `error_messages` only to translate them.\n- `submit_token` is stable until the platform rotates its form-signing secret;\n  a rebuild refreshes it after rotation.\n",
     "tr-header-footer": "---\nname: tr-header-footer\ndescription: Build accessible native header and footer partials with the site logo, semantic navigation, responsive disclosure, and optional native cookie consent.\n---\n\n# Native header and footer compositions\n\nUse block-mode partials for new work. Core 0.1.8 / capability contract 0.43.0\nships `template/site_logo`, `core/navigation`, layout primitives, and a\nrevision-safe partial mode operation. HTML partials remain supported for\nlegacy markup, but generic navigation and responsive layout no longer require\ntenant HTML, CSS, or JavaScript.\n\n## Preconditions\n\n1. Read `get_site_capabilities`, `read_site_settings`, `list_partials`, and\n   `list_block_types`.\n2. Require `supports_native_navigation`, `supports_partial_mode_switching`,\n   `supports_responsive_data_fields`, and\n   `supports_versioned_block_type_inheritance`.\n3. Read the existing header/footer before replacing anything. Work in a branch\n   for redesigns and preview at desktop, 390 px, keyboard-only, and 200% zoom.\n\n## Header tree\n\nStage this tree with `update_partial partial_id=\"header\" patch={blocks:[...]}\nsave=true`, then call `set_partial_mode partial_id=\"header\" to=\"blocks\"` and\nread it back. Localize both accessible labels and every link label.\n\n```json\n[\n  {\n    \"type\": \"core/section\",\n    \"data\": { \"width\": \"wide\", \"padding_y\": \"sm\" },\n    \"children\": [{\n      \"type\": \"core/container\",\n      \"data\": {\n        \"direction\": { \"mobile\": \"column\", \"tablet\": \"row\" },\n        \"align_main\": \"space-between\",\n        \"align_cross\": \"center\",\n        \"gap\": \"md\",\n        \"width\": \"wide\",\n        \"padding_y\": \"none\",\n        \"padding_x\": \"none\"\n      },\n      \"children\": [\n        { \"type\": \"template/site_logo\", \"data\": { \"height\": \"md\", \"link_to_home\": true } },\n        {\n          \"type\": \"core/navigation\",\n          \"data\": {\n            \"aria_label\": \"Main navigation\",\n            \"menu_label\": \"Menu\",\n            \"links\": [\n              { \"label\": \"Home\", \"href\": \"/\" },\n              { \"label\": \"About\", \"href\": \"/about/\" },\n              { \"label\": \"Contact\", \"href\": \"/contact/\" }\n            ]\n          }\n        }\n      ]\n    }]\n  }\n]\n```\n\n`core/navigation` emits a real `nav` and list in initial HTML, marks the\nmatching page with `aria-current=\"page\"`, and progressively enhances to a\nbutton-controlled mobile menu. Verify Tab and Shift-Tab order, Enter/Space,\nEscape returning focus to the disclosure, visible focus, long translated\nlabels, and no horizontal overflow. Without JavaScript the links remain\nvisible and usable.\n\n## Footer tree and consent\n\nUse the same tree for `footer`, normally with `padding_y: \"lg\"`, a small site\nlogo, localized footer navigation, and optional contact/prose blocks. The\nfooter navigation gets its own accessible label; it is not the main\nnavigation landmark.\n\nCookie consent is a site feature, not a footer widget. Configure it separately:\n\n```json\n{\n  \"cookie_consent\": {\n    \"enabled\": true,\n    \"text\": \"We use optional cookies. <a href=\\\"/privacy/\\\">Privacy policy</a>\",\n    \"privacy_policy_url\": \"/privacy/\",\n    \"reload_after_consent\": false\n  }\n}\n```\n\nUse `update_site_settings`, then read settings back. `scripts_necessary` and\n`scripts_optional` execute in visitors' browsers and must be reviewed like\nother API-key-authorized script surfaces. Verify accept/necessary/reject,\noptional-script gating, and keyboard focus in preview and the actual build.\nThe signed hosted preview runs at an opaque origin. Consent choices therefore\nuse in-memory state for the current preview document; they are intentionally\nnot persisted as portal cookies across a reload or page navigation. Accepting\nall must still activate optional scripts immediately, which is enough to test\nthe gate without weakening the preview sandbox.\n\n## Version and dependency rules\n\nChild versions inherit installed, custom, and third-party block types from\ntheir base chain. If preview reports a missing type, stop and inspect\n`list_block_types` for that exact version; do not duplicate an Extension or\ninstallation. A type missing after capability 0.43.0 is a dependency error to\nreport, not a reason to let the block silently disappear.\n\n## Final checks\n\n- Header and footer landmarks exist exactly once around their content.\n- Logo is fully visible, keeps its aspect ratio, has useful alt text, and links home.\n- Current-page state and localized navigation labels are correct.\n- Mobile disclosure is keyboard accessible and does not trap focus.\n- No tenant CSS is required for spacing, focus, wrapping, or the narrow layout.\n- Preview and a hosted static build match before promotion.\n",
     "tr-imagegen": "---\nname: tr-imagegen\ndescription: Use when the user wants to generate images for a Typeroll site with AI models (Gemini, OpenAI, Higgsfield) — hero images, illustrations, section backgrounds, og-images. Triggers on \"generera bilder\", \"generate images\", \"skapa en hero-bild\", \"AI-bilder\", \"bildgenerering\", or when a brief calls for imagery that doesn't exist in assets/. Covers the local lab loop (generate → review → pick) and uploading winners to the Typeroll media library.\n---\n\n# Generate images for a Typeroll site (local lab → media library)\n\nImage generation runs **locally** in the site workdir — provider API keys\nlive in the folder's `.env`, candidates land in `images/lab/`, and only\nthe picked winners are uploaded to the Typeroll media library via the\nregular media tools (see `tr-images` for the upload/variants half).\n\nWhy local: you can look at the candidates (Read the files), iterate on\nprompts cheaply, and never ship a key or a reject anywhere.\n\n## Folder convention\n\n```\n<site>/\n├── .env                  # provider keys — GITIGNORED, never committed\n├── prompts/\n│   └── image-style.md    # the site's image style profile (see below)\n└── images/\n    └── lab/              # generated candidates — gitignored, disposable\n```\n\n`.env` keys (only the ones the user has — check before assuming):\n\n```\nGEMINI_API_KEY=...\nOPENAI_API_KEY=...\n```\n\n(Higgsfield needs no key here — it connects as an MCP server, see below.)\n\nLoad them per-command (`source .env` doesn't persist between Bash calls):\n\n```bash\nexport $(grep -v '^#' .env | xargs)   # prepend to each generation command\n```\n\n## The style profile — prompts/image-style.md\n\nEvery site gets ONE style profile that you **prepend to every image\nprompt**. This is what keeps 20 images generated across 5 sessions\nlooking like one site. Derive it from `assets/brand.md` + the brief if\nit doesn't exist yet, and confirm it with the user before generating at\nscale. Keep it short (5–10 lines): art direction, palette, mood,\nphotography vs illustration, what to avoid.\n\nExample shape:\n\n```markdown\n# Bildstil — <Sajtnamn>\nVarm, folklig illustration med mjuka rundade former. Platt 2D med\nsubtila skuggor — ingen 3D, ingen fotorealism. Palett: kobolt #1F4FB8,\nsol #FFC83D, grädde #FFF8EC; accenter sparsamt. Människor: enkla,\ninkluderande, glada — inga karikatyrer. Undvik: stockfoto-känsla, text\ni bilden, logotyper, watermarks.\n```\n\n## Generate candidates\n\nName candidates descriptively: `images/lab/<motiv>-<modell>-<n>.png`.\nGenerate 3–6 candidates per slot (mix models when several keys exist),\nthen **Read the files to actually look at them** before showing the\nuser your shortlist.\n\n### Gemini (gemini-2.5-flash-image)\n\n```bash\ncurl -s \"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image:generateContent\" \\\n  -H \"x-goog-api-key: $GEMINI_API_KEY\" -H 'Content-Type: application/json' \\\n  -d '{\n    \"contents\": [{\"parts\": [{\"text\": \"<STYLE PROFILE>\\n\\n<MOTIF PROMPT>\"}]}],\n    \"generationConfig\": {\"imageConfig\": {\"aspectRatio\": \"16:9\"}}\n  }' | jq -r '.candidates[0].content.parts[] | select(.inlineData) | .inlineData.data' \\\n  | base64 -d > images/lab/hero-gemini-1.png\n```\n\nAspect ratios: `1:1`, `16:9`, `4:3`, `3:4`, `9:16`. Gemini also does\nimage *editing* — pass an existing image as an `inlineData` part plus an\ninstruction to restyle/extend it (useful for \"same illustration but\nwinter\").\n\n### OpenAI (gpt-image-1)\n\n```bash\ncurl -s https://api.openai.com/v1/images/generations \\\n  -H \"Authorization: Bearer $OPENAI_API_KEY\" -H 'Content-Type: application/json' \\\n  -d '{\n    \"model\": \"gpt-image-1\",\n    \"prompt\": \"<STYLE PROFILE>\\n\\n<MOTIF PROMPT>\",\n    \"size\": \"1536x1024\",\n    \"quality\": \"high\"\n  }' | jq -r '.data[0].b64_json' | base64 -d > images/lab/hero-openai-1.png\n```\n\nSizes: `1024x1024`, `1536x1024` (landscape), `1024x1536` (portrait).\n\n### Higgsfield (MCP server — no API key)\n\nHiggsfield exposes its models through a hosted MCP server at\n`https://mcp.higgsfield.ai/mcp` (OAuth-protected — first connect opens a\nbrowser login; no secret lands in any file). Add it next to the\ntyperoll server in the site folder's `.mcp.json`:\n\n```json\n\"higgsfield\": { \"type\": \"http\", \"url\": \"https://mcp.higgsfield.ai/mcp\" }\n```\n\nThen use its tools directly — list what's available rather than\nassuming tool names. Save/download outputs into `images/lab/` with the\nsame naming convention, and prepend the style profile to prompts here\ntoo. **Headless caveat:** OAuth-protected MCP servers need an existing\nlogin session on the machine — connect once interactively before\nrelying on it in a headless run. (The same URL works as a custom\nconnector in Claude Desktop, for editors who don't use Claude Code.)\n\n## Review → pick → upload\n\n1. **Look at every candidate** (Read the image files) and write one line\n   per candidate in `build-log.md` (keep/reject + why).\n2. Show the user the shortlist (file paths) and let them pick — unless\n   they've delegated the pick to you.\n3. Upload winners with the regular media tools (see `tr-images`):\n   - small files → `upload_media_inline` (base64);\n   - larger → `create_upload_url` + HTTP PUT + `finalize_media`.\n   Give real `alt` text and a descriptive filename at upload time.\n4. `generate_image_variants` for responsive sizes when the image is\n   placed full-width.\n5. Place via `update_block` (`core/image`, hero fields, …) or page HTML.\n6. `images/lab/` is disposable — leave rejects there; never upload them.\n\n## Pitfalls\n\n- **Never put text in generated images** (headlines, buttons) — text is\n  HTML's job; generated text renders as gibberish in non-English. And\n  models sneak text onto surfaces where it \"feels natural\" — jerseys,\n  signs, banners, packages — even when the prompt doesn't ask for any.\n  Forbid it explicitly in the prompt (\"plain unmarked clothing, no\n  text, no letters, no numbers anywhere in the image\") and make the\n  same rule part of every site's style profile.\n- **Don't commit `.env` or `images/lab/`** — both are gitignored by the\n  kit convention; keep it that way.\n- **Cost discipline:** generation costs real money per image. Batch\n  thoughtfully (3–6 per slot, not 20), and reuse via Gemini's\n  edit-an-image mode instead of regenerating from scratch.\n- **Licensing/provenance:** AI-generated imagery is fine for site\n  decoration, but never generate fake \"photos\" of real people, products\n  the customer doesn't sell, or anything presented as documentary fact.\n- **The style profile is the contract.** If the user rejects a batch on\n  style grounds, fix `prompts/image-style.md` first, then regenerate —\n  don't just tweak one prompt.\n",
     "tr-images": "---\nname: tr-images\ndescription: Use when the user asks for an image, hero, illustration, or logo to be created and embedded in a Typeroll page. Covers the two-step signed-URL upload flow so the agent doesn't try to POST bytes through the CMS API (it can't).\n---\n\n# Add images to a Typeroll site\n\nThe Typeroll API does NOT accept image bytes directly. Uploads go\nthrough a signed PUT URL straight to Cloudflare R2, and the API only\nsees the metadata. Two-step flow:\n\nFor public source URLs, prefer `upload_media_from_url`; for 2–50 files use\n`upload_media_batch_from_urls` (max 25 MiB per file). Both download, upload,\nand finalize each asset automatically. Batch results preserve input order and\nreport failures per item, so retry only the failed entries. Use the manual\nsigned-URL flow below for local files or when you need direct control over the\nPUT.\n\n## Recipe\n\n### 1. Get an image\n\nOptions, in order of preference:\n\na. **Reuse an existing one.** `list_media` returns CDN URLs for every\n   image already on this site. Search the list before generating\n   anything — saves bandwidth and keeps the visual catalog tight.\n\nb. **Generate locally.** The user's Claude Code installation has\n   access to whatever image-gen tools they've configured (DALL-E,\n   Midjourney, Stable Diffusion, Replicate, etc.). Generate and save\n   to a tempfile.\n\nc. **Source from the web** with appropriate licensing (the user is\n   responsible for clearing rights). Save locally before upload.\n\n### 2. Mint a signed upload URL\n\n```\ncreate_upload_url filename=\"hero-services.png\"\n                  content_type=\"image/png\"\n                  size=<bytes>\n                  alt_text=\"Office worker reviewing documents at a desk\"\n```\n\nReturns:\n\n```json\n{\n  \"upload_url\": \"https://...r2.cloudflarestorage.com/.../signed-...\",\n  \"cdn_url\": \"https://cdn.example.com/orgs/.../images/...png\",\n  \"key\": \"orgs/.../images/...png\",\n  \"media_id\": \"abc123\",\n  \"expires_in\": 300\n}\n```\n\nThe signed URL is valid for 5 minutes. The media doc is already\nregistered — even before the upload completes — so it'll show in\n`list_media` immediately.\n\n### 3. PUT the bytes\n\nOutside the MCP, hit the signed URL directly:\n\n```\nPUT <upload_url>\nContent-Type: <same content_type as in step 2>\nBody: <file bytes>\n```\n\nIn a shell:\n\n```bash\ncurl -sS -X PUT --data-binary @hero-services.png \"$UPLOAD_URL\"\n```\n\nOptionally with `-H \"Content-Type: image/png\"` if you need to override what R2 will infer. **Nothing else.**\n\n> The signed URL embeds checksum-related query parameters\n> (`x-amz-checksum-crc32`, `x-amz-sdk-checksum-algorithm`) for legacy\n> SDK compatibility, but `X-Amz-SignedHeaders=host` — only the host\n> header is part of the signature. Sending the `x-amz-*` values as\n> request headers yields `403 SignatureDoesNotMatch`. Don't. Just\n> `--data-binary` the file at the URL.\n\nOr from JS (Claude Code can run a one-line script):\n\n```js\nawait fetch(uploadUrl, {\n  method: 'PUT',\n  headers: { 'Content-Type': contentType },\n  body: await fs.readFile(path),\n});\n```\n\nParallelise N uploads via shell `&` + `wait`:\n\n```bash\nwhile IFS=$'\\t' read -r filename signed_url; do\n  curl -sS -X PUT --data-binary @\"$filename\" \"$signed_url\" &\ndone < manifest.tsv\nwait\n```\n\nA 200 OK from R2 means the image is now live at `cdn_url`.\n\n### 4. Patch metadata (alt text, etc.)\n\nYou set `alt_text` at create time, but if you generate the image first\nand only THEN realize what to caption it as, patch later:\n\n```\nupdate_media media_id=<id> alt_text=\"...\" filename=\"hero-services-v2.png\"\n```\n\n### 4b. Fill missing alt-text on existing media\n\nWhen a customer has uploaded a bunch of images without alt-text (very\ncommon after a WP migration), don't make it up — use vision:\n\n```\nlist_media                                 → find items with empty alt_text\nsuggest_alt_text_context media_id=<id>     → returns { image_url, suggested_prompt,\n                                              language, used_on_pages, current_alt_text }\n# Pass image_url + the returned suggested_prompt to YOUR OWN vision\n# capability (you can fetch the URL and pass bytes to vision).\nupdate_media media_id=<id> alt_text=\"<what vision returned>\"\n```\n\nThe prompt is tuned for SEO-grade output: short (5-15 words), no \"image\nof / picture of\" filler, written in the site's content language,\ndecorative images return empty string. Run it sequentially on a\nlist_media batch and you can fix alt-text gaps across a whole site\nwithout burning your context on prompt design. The platform does NOT\nrun vision on your behalf — your model does, your usage.\n\n### 5. Embed in a page\n\n`read_page` the target, insert `<img>` in the right spot:\n\n```html\n<img src=\"<cdn_url>\"\n     alt=\"<alt_text>\"\n     style=\"width: 100%; height: auto; display: block; margin: 2rem 0;\" />\n```\n\nThen `update_page` with the new HTML. Or, if you're generating a hero\nfor a brand-new page, include the `<img>` directly in `create_page`'s\n`html_content`.\n\n## Pitfalls\n\n- **Always set `alt_text`.** Empty alt is bad for SEO + accessibility.\n  Default to a one-sentence description of what's in the image.\n- **`<script>` etc. in SVGs.** The page sanitizer drops `<script>`\n  inside SVG, so an icon set that includes script-based animations\n  won't render correctly. Use static SVG or a JPG/PNG export.\n- **CSS background-image references aren't dedup'd.** If you set the\n  same image as a CSS background on multiple pages, the alt-text +\n  metadata are page-irrelevant. The sanitizer allows\n  `background-image: url(...)` in inline styles, but think about\n  whether an `<img>` is actually better.\n- **Source URL leakage.** If you generated the image from a prompt\n  that contains internal info, don't bake that prompt into the\n  filename. Use a descriptive but generic filename.\n\n## Format choice\n\n- **PNG** for logos, icons with hard edges, anything with text.\n- **JPG** for photos. Smaller file, better for big hero images.\n- **WebP** if the target audience runs modern browsers (95%+ in 2026).\n- **SVG** for icons + simple illustrations. Vector scales perfectly.\n- **PDF** is supported by `create_upload_url` for document downloads;\n  link with `<a href>`, not `<img>`.\n\n## Check publication resolution (Core 0.2.37+)\n\nNative AVIF/WebP generation includes each smaller preset and the full original\nwidth, without upscaling or duplicate width descriptors. Check `currentSrc` and\nthe actual encoded dimensions on the published site; the CMS preview can use the\noriginal and hide an undersized derivative. Do not compensate with custom CSS\nor `sizes` alone. Existing static sites need republication for the versioned v2\nrecipe; unchanged subsequent builds reuse verified media. Explicit API variant\nworkflows must regenerate their variant metadata before rebuilding.\n",

package/dist/tools/forms.js

@@ -28,8 +28,15 @@ const stepSchema = z.object({
     render: z.enum(['static', 'dynamic']).optional()
         .describe("Default 'static' (prerendered). 'dynamic' is reserved for app-computed steps."),
     next: z.string().optional().describe('Next step id. Default: next in list; last step submits.'),
-    blocks: z.array(z.record(z.string(), z.unknown())).optional(),
+    submit_label: z.string().max(80).optional().describe('This step\'s button text. Default: "Continue" ("Fortsätt" on Swedish sites) on every step but the last and submit_text on the last (render version 5+; earlier render versions use submit_text everywhere).'),
+    blocks: z.array(z.record(z.string(), z.unknown())).optional()
+        .describe('Field and content blocks. A step whose first block is form/heading needs no title: from render version 5 the title is not rendered then (earlier versions show both; the write returns a warning).'),
 });
+// Multi-step navigation options, on create_form and update_form.
+const allowBackSchema = z.boolean().nullable().optional()
+    .describe('Multi-step forms: show a Back button from the second step; it returns to the previous step in the browser with the answers kept. Default (omitted or null): on from render version 5, off before.');
+const showProgressSchema = z.union([z.boolean(), z.enum(['text', 'bar'])]).optional()
+    .describe('Multi-step forms: true or "text" shows "Step X of Y", "bar" a slim progress bar (with the same text for screen readers). Off by default; false turns it off.');
 const targetSchema = z.object({
     context_params: z.array(z.string()).max(8).optional().describe('Explicit URL query keys forwarded to the app hydration endpoint; reserved security keys are rejected.'),
     installation_id: z.string(), path: z.string(), hydrate: z.boolean().optional(), session_param: z.string().optional(),
@@ -42,6 +49,8 @@ const actionSchema = z.object({
     type: z.string().describe('"email", "webhook", or an action type provided by an installed app (see get_form_capabilities).'),
     config: z.record(z.string(), z.unknown()).describe('email: { to, subject, body, cc?, bcc?, reply_to?, include_all?, format?: "html"|"text" } — to/subject/body may use {{field}} placeholders, e.g. to: "{{email}}" for a confirmation to the visitor. ' +
         'webhook: { url (https), fields: ["name","email"] (only these values are sent), secret (signing secret; send "••••••••" to keep the stored one) }.'),
+    trigger: z.enum(['complete', 'partial_abandoned']).optional().describe('When the action runs. "complete" (default): after the final step. "partial_abandoned" (email actions only, opt-in): once per submission when a partial submission (visitor finished at least one step) has not advanced for after_hours hours; never for completed submissions. The email lists the answers given so far.'),
+    after_hours: z.number().int().min(1).max(720).optional().describe('For trigger "partial_abandoned": hours without progress before the email is sent.'),
 });
 const actionsDescription = 'The complete list of actions after a submission (replaces the current list): email notifications, webhooks, app actions (get_form_capabilities lists the types and their config). Read the form first and send back the actions you keep. Emails send through the provider set with set_email_settings. Requires admin permission, like the portal.';
 export const formTools = [
@@ -69,7 +78,7 @@ export const formTools = [
     },
     {
         name: 'create_form',
-        description: 'Create a form. Steps are the ONLY stored model — a Block[] tree of form/* field blocks per step. Simple forms: pass `fields`, each { name, type, label, required?, placeholder?, options? } (allowed types: text, email, tel, url, number, textarea, select, checkbox, boolean (Yes/No/unanswered), radio, hidden, gdpr_consent) — the server converts them to a single static step; read_form returns the resulting steps. Multi-step funnels: pass `steps` directly (steps swap client-side, partial submissions persist per step). PLACING THE FORM: add a `core/form` block with data.form_id on block-mode pages, or `<x-form id="…" />` to HTML-mode page content. Both expand server-side to the same complete signed shell; never hand-write the form or add inline submit scripts.',
+        description: 'Create a form. Steps are the ONLY stored model — a Block[] tree of form/* field blocks per step. Simple forms: pass `fields`, each { name, type, label, required?, placeholder?, options? } (allowed types: text, email, tel, url, number, textarea, select, checkbox, boolean (Yes/No/unanswered), radio, hidden, gdpr_consent) — the server converts them to a single static step; read_form returns the resulting steps. Multi-step funnels: pass `steps` directly (steps swap client-side, partial submissions persist per step; each step may set submit_label, and allow_back/show_progress control the Back button and progress indicator; `warnings` in the response flags steps whose title duplicates a leading form/heading). PLACING THE FORM: add a `core/form` block with data.form_id on block-mode pages, or `<x-form id="…" />` to HTML-mode page content. Both expand server-side to the same complete signed shell; never hand-write the form or add inline submit scripts.',
         inputSchema: {
             id: z.string().regex(/^[a-z][a-z0-9_-]{0,62}$/),
             name: z.string().min(1),
@@ -79,6 +88,8 @@ export const formTools = [
             success_message: z.string().optional().describe('Shown after the final step. May contain basic HTML (links, emphasis); it is sanitized.'),
             success_redirect_url: z.string().optional().describe('After the final step, send the visitor to this absolute http(s) URL or root-relative path (for example a booking or thank-you page) instead of showing success_message. Pass an empty string to clear.'),
             actions: z.array(actionSchema).optional().describe(actionsDescription),
+            allow_back: allowBackSchema,
+            show_progress: showProgressSchema,
             target: targetSchema,
         },
         handler: withErrorBoundary(async (args, { client, siteId }) => {
@@ -102,6 +113,8 @@ export const formTools = [
                 success_message: z.string().optional().describe('Shown after the final step. May contain basic HTML (links, emphasis); it is sanitized.'),
                 success_redirect_url: z.string().optional().describe('After the final step, send the visitor to this absolute http(s) URL or root-relative path (for example a booking or thank-you page) instead of showing success_message. Pass an empty string to clear.'),
                 actions: z.array(actionSchema).optional().describe(actionsDescription),
+                allow_back: allowBackSchema,
+                show_progress: showProgressSchema,
                 target: targetSchema,
             }),
         },

package/dist/tools/pages.js

@@ -287,7 +287,7 @@ export const pageTools = [
     // the block-tree mutation tools (add/update/move/remove/convert).
     {
         name: 'get_page_preview',
-        description: "Get the WHOLE page rendered as one self-contained HTML document — header partial + block-rendered body + footer partial, with the site's settings CSS variables, global styles, the tree-shaken block-CSS bundle, block JavaScript, the Extension runtime and the cookie-consent banner all included, exactly as the portal Preview shows it. This is the single artifact for UNDERSTANDING what a page looks like and how its CSS actually cascades (get_page_blocks gives the editable block tree; this gives the rendered result). Returns { rendered_html, internal_links[] }. Pass annotate:true to tag every element with data-block-id + data-block-type so you can map the rendered HTML back to the block to edit. For a clickable preview URL use get_preview_link instead.",
+        description: "Get the WHOLE page rendered as one self-contained HTML document — header partial + block-rendered body + footer partial, with the site's settings CSS variables, global styles, the tree-shaken block-CSS bundle, block JavaScript, the Extension runtime and the cookie-consent banner all included, exactly as the portal Preview shows it. This is the single artifact for UNDERSTANDING what a page looks like and how its CSS actually cascades (get_page_blocks gives the editable block tree; this gives the rendered result). Returns { rendered_html, internal_links[] }. Pass annotate:true to tag every element with data-block-id + data-block-type so you can map the rendered HTML back to the block to edit. Forms render in preview mode, marked \"Preview – nothing is sent\": they validate, step through and show the success message (or name the redirect target) in the browser, but store nothing and run no actions — keep the forms runtime as is when building a review copy. For a clickable preview URL use get_preview_link instead.",
         inputSchema: {
             page_id: z.string(),
             annotate: z

package/dist/tools/preview.js

@@ -17,7 +17,7 @@ export const previewTools = [
     },
     {
         name: 'get_preview_link',
-        description: 'Mint a signed URL the user (or your own browser tool) can open to SEE the rendered preview. Renders LIVE from the database with NO build — this is the PREFERRED way to preview design/content changes as you iterate; reach for this, not trigger_deploy, when previewing. BUFFER MODEL: your edits are unsaved drafts, so for the iteration loop mint the link with include_working_copy:true (drafts visible); a plain link shows SAVED content only — right for stakeholders reviewing what will deploy. Mint ONCE and REUSE that single URL across edits — internal links keep the token so it navigates the whole branch, and it stays valid until the TTL lapses (24h default and max). Target a page (page_id), or a raw slug; omit all for the home page. (For a permanent public link, complete Publishing setup and wait for a verified deployment on the organization or site domain.)',
+        description: 'Mint a signed URL the user (or your own browser tool) can open to SEE the rendered preview. Renders LIVE from the database with NO build — this is the PREFERRED way to preview design/content changes as you iterate; reach for this, not trigger_deploy, when previewing. BUFFER MODEL: your edits are unsaved drafts, so for the iteration loop mint the link with include_working_copy:true (drafts visible); a plain link shows SAVED content only — right for stakeholders reviewing what will deploy. Mint ONCE and REUSE that single URL across edits — internal links keep the token so it navigates the whole branch, and it stays valid until the TTL lapses (24h default and max). Target a page (page_id), or a raw slug; omit all for the home page. Forms on the page can be clicked through end to end — validation, steps, success message or the named redirect target — without creating submissions or running actions ("Preview – nothing is sent"). (For a permanent public link, complete Publishing setup and wait for a verified deployment on the organization or site domain.)',
         inputSchema: {
             page_id: z.string().optional(),
             slug: z.string().optional(),

package/dist/version.js

@@ -8,4 +8,4 @@
 //
 // Keep it in lockstep with package.json: tests/version.test.ts asserts
 // VERSION === package.json.version, so a bump that forgets this line fails CI.
-export const VERSION = '0.45.47';
+export const VERSION = '0.45.49';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typeroll/mcp-server",
-  "version": "0.45.47",
+  "version": "0.45.49",
   "description": "Typeroll CMS MCP server – connect AI agents to the REST API to manage content and publish static websites.",
   "license": "MIT",
   "repository": {

package/skills/tr-forms.md

@@ -14,10 +14,11 @@ email and webhook actions configured in the portal or through MCP/API.
 - Block-mode page: add `{ type: 'core/form', data: { form_id } }`.
 - HTML-mode page: add `<x-form id="form-id" />` to `html_content`.
 
-Both are authoring references to the same renderer. Preview and static
-generation expand them to the complete form HTML, signed token, honeypot,
-initial step state, styles, and shared runtime. Never hand-write the `<form>`
-shell or paste a token into page HTML.
+Both are authoring references to the same renderer. Static generation expands
+them to the complete form HTML, signed token, honeypot, initial step state,
+styles, and shared runtime. Previews expand them the same way but in preview
+mode (no token, a "Preview – nothing is sent" notice). Never hand-write the
+`<form>` shell or paste a token into page HTML.
 
 ## Create a simple form
 
@@ -86,6 +87,13 @@ update_form form_id=ansokan patch={steps:[
 Submissions accumulate in one partial record and become complete on the final
 step. Abandoned partials use `partial_ttl_days` (default 30).
 
+Navigation: a step may set `submit_label`; otherwise (render version 5+) every
+step but the last reads "Continue"/"Fortsätt" and the last uses `submit_text`.
+`allow_back` (default on from render version 5) shows a Back button that keeps
+the answers; `show_progress: true | "text" | "bar"` shows "Step X of Y" or a
+bar. Give a step a `title` or a leading `form/heading`, not both; the write
+returns a `warnings` entry when a step has both.
+
 ## Storage and integrations
 
 Completed submissions appear in Forms → Submissions. Admins can configure
@@ -111,6 +119,11 @@ update_form form_id=contact patch={ actions: [
 ] }
 ```
 
+An email action with `trigger: "partial_abandoned"` and `after_hours: 2` is
+sent once for a multi-step submission that stopped part-way and has not moved
+on for two hours (never for completed ones) — opt-in follow-up on leads who
+left after step 1.
+
 A webhook needs `url` (https), an explicit `fields` allowlist and a signing
 `secret`; send the masked value back to keep a stored secret.
 `get_form_capabilities` lists every action type the site offers, including
@@ -129,9 +142,14 @@ removes one.
 ## Verify
 
 1. `read_form form_id="newsletter"` and confirm the steps/fields.
-2. Preview the page and confirm the authoring reference has expanded to a form
-   with `data-tr-form-el`, a signed token, and the platform runtime.
-3. Submit a test entry and confirm it appears in Forms → Submissions.
+2. Preview the page (`get_preview_link` or `get_page_preview`) and confirm the
+   authoring reference has expanded to a form with `data-tr-form-el` and the
+   platform runtime. Click through every step: previews validate, advance steps
+   and show the success message (or name the redirect target) like the
+   published form, marked "Preview – nothing is sent". They store nothing and
+   run no actions, so keep the runtime in any review copy.
+3. Submit a real test entry on a deployed page and confirm it appears in
+   Forms → Submissions.
 4. If a webhook is configured, confirm its delivery status
    (`read_form_submission`) and the receiving system's idempotency key before
    deploying.
@@ -167,6 +185,21 @@ Booking request:
 ]}
 ```
 
+Campaign tracking: hidden fields named `utm_*` are filled from the same-named
+parameter in the page address (`?utm_source=linkedin`); `default` is sent when
+the parameter is missing. Only the current address is read and nothing is
+stored in the browser, so no consent is needed; the campaign is not carried
+across pages. Other hidden fields always send their `default`.
+
+```json
+{"fields":[
+  {"name":"email","type":"email","label":"E-post","required":true},
+  {"name":"utm_source","type":"hidden"},
+  {"name":"utm_medium","type":"hidden","default":"website"},
+  {"name":"utm_campaign","type":"hidden"}
+]}
+```
+
 ## Pitfalls
 
 - Do not hand-write a form, token, honeypot, or submit script.
@@ -174,5 +207,8 @@ Booking request:
 - Do not drop existing actions by accident: `actions` replaces the list.
 - Do not send every submitted field to a webhook by default; choose the
   smallest allowlist the external register needs.
+- Built-in visitor messages (button defaults, validation and error messages,
+  the no-JS confirmation page) follow the site's language, Swedish for `sv` and
+  English otherwise. Do not add `error_messages` only to translate them.
 - `submit_token` is stable until the platform rotates its form-signing secret;
   a rebuild refreshes it after rotation.