@typeroll/mcp-server 0.42.2 → 0.43.0

package/skills/tr-header-footer.md

@@ -1,182 +1,113 @@
 ---
 name: tr-header-footer
-description: Vetted, robust header and footer presets to drop into the header/footer partials. Use when building or restyling a site's site-wide header or footer — start from a preset and restyle it instead of hand-rolling layout + overflow (the usual source of clipped logos and broken mobile menus).
+description: Build accessible native header and footer partials with the site logo, semantic navigation, responsive disclosure, and optional native cookie consent.
 ---
 
-# Header & footer presets
-
-> **The buffer model (draft writes).** Every content write in this recipe
-> (pages, blocks, partials, collection items) lands in an unsaved per-doc
-> DRAFT — deploys and plain previews only see SAVED content. For recipe-style
-> build work, pass `save: true` on write calls (the work is pre-approved by
-> the task itself), or run `commit_working_copy` per doc before any
-> `trigger_deploy`. Preview your drafts with `include_working_copy: true`.
-
-
-Headers and footers are the two partials every page shows, and hand-rolling them
-is where logos get clipped and mobile menus break. **Start from a preset below,
-fill the placeholders, restyle with the site's colours — don't build the layout
-from scratch.** Each preset is deliberately robust; the "why" notes call out the
-traps it avoids.
-
-## How to use
-
-1. `read_site_settings` — grab `logo`, `site_name`, `tagline`, `contact.email`,
-   and the colour palette.
-2. `read_partial partial_id="header"` (and `footer`) — see what's already there;
-   don't blow away a working one without reason.
-3. Pick a preset, replace every `{{PLACEHOLDER}}`, adjust colours to the palette
-   (the presets already read `--color-*` / `--font-heading` with fallbacks).
-4. `update_partial partial_id="header" patch={ html_content: "…" } version="…"`.
-5. **Preview and self-review in context** (see `tr-redesign-branch` step 6):
-   the logo must be FULLY VISIBLE (not clipped), legible against its background,
-   and the mobile layout must work at 390px. Screenshot the header region in
-   context — never the logo element in isolation (that hides clipping).
-
-Placeholders: `{{SITE_NAME}}`, `{{LOGO_URL}}`, `{{TAGLINE}}`, `{{EMAIL}}`, `{{YEAR}}`.
-
----
-
-## Header A — Centered logo (minimal; landing pages)
-
-```html
-<header class="tr-hdr tr-hdr--center">
-  <a class="tr-hdr-logo" href="/" aria-label="{{SITE_NAME}} — till startsidan">
-    <img src="{{LOGO_URL}}" alt="{{SITE_NAME}}" />
-  </a>
-</header>
-<style>
-.tr-hdr--center{background:var(--color-surface,#fff);display:flex;justify-content:center;padding:clamp(1rem,2.5vw,1.6rem) 1.5rem}
-.tr-hdr-logo{display:inline-block;line-height:0;transition:transform .15s ease}
-.tr-hdr-logo:hover{transform:translateY(-1px)}
-.tr-hdr-logo img{height:clamp(40px,6vw,58px);width:auto;display:block}
-</style>
+# Native header and footer compositions
+
+Use block-mode partials for new work. Core 0.1.8 / capability contract 0.43.0
+ships `template/site_logo`, `core/navigation`, layout primitives, and a
+revision-safe partial mode operation. HTML partials remain supported for
+legacy markup, but generic navigation and responsive layout no longer require
+tenant HTML, CSS, or JavaScript.
+
+## Preconditions
+
+1. Read `get_site_capabilities`, `read_site_settings`, `list_partials`, and
+   `list_block_types`.
+2. Require `supports_native_navigation`, `supports_partial_mode_switching`,
+   `supports_responsive_data_fields`, and
+   `supports_versioned_block_type_inheritance`.
+3. Read the existing header/footer before replacing anything. Work in a branch
+   for redesigns and preview at desktop, 390 px, keyboard-only, and 200% zoom.
+
+## Header tree
+
+Stage this tree with `update_partial partial_id="header" patch={blocks:[...]}
+save=true`, then call `set_partial_mode partial_id="header" to="blocks"` and
+read it back. Localize both accessible labels and every link label.
+
+```json
+[
+  {
+    "type": "core/section",
+    "data": { "width": "wide", "padding_y": "sm" },
+    "children": [{
+      "type": "core/container",
+      "data": {
+        "direction": { "mobile": "column", "tablet": "row" },
+        "align_main": "space-between",
+        "align_cross": "center",
+        "gap": "md",
+        "width": "wide",
+        "padding_y": "none",
+        "padding_x": "none"
+      },
+      "children": [
+        { "type": "template/site_logo", "data": { "height": "md", "link_to_home": true } },
+        {
+          "type": "core/navigation",
+          "data": {
+            "aria_label": "Main navigation",
+            "menu_label": "Menu",
+            "links": [
+              { "label": "Home", "href": "/" },
+              { "label": "About", "href": "/about/" },
+              { "label": "Contact", "href": "/contact/" }
+            ]
+          }
+        }
+      ]
+    }]
+  }
+]
 ```
 
-**Why it's robust:** no `overflow:hidden` anywhere near the logo (the #1 cause of a
-clipped wordmark); the logo sizes by `height` with `width:auto` so it never
-distorts and never gets cropped; symmetric padding so it can't collide with the
-section below. If you want a tinted header, set a solid `background` — don't add a
-glow that has to be clipped.
-
-## Header B — Logo left + links right (no-JS responsive menu)
-
-```html
-<header class="tr-hdr tr-hdr--nav">
-  <div class="tr-hdr-inner">
-    <a class="tr-hdr-logo" href="/" aria-label="{{SITE_NAME}} — till startsidan">
-      <img src="{{LOGO_URL}}" alt="{{SITE_NAME}}" />
-    </a>
-    <input type="checkbox" id="tr-nav-toggle" class="tr-nav-toggle" aria-hidden="true" />
-    <label for="tr-nav-toggle" class="tr-nav-burger" aria-label="Meny"><span></span><span></span><span></span></label>
-    <nav class="tr-hdr-nav" aria-label="Huvudmeny">
-      <a href="/">Start</a>
-      <a href="#">Sidan ett</a>
-      <a href="#">Sidan två</a>
-      <a class="tr-hdr-cta" href="#kontakt">Kontakta oss</a>
-    </nav>
-  </div>
-</header>
-<style>
-.tr-hdr--nav{background:var(--color-surface,#fff);border-bottom:1px solid rgba(0,0,0,.06)}
-.tr-hdr-inner{max-width:1160px;margin:0 auto;padding:.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
-.tr-hdr-logo{line-height:0}
-.tr-hdr-logo img{height:clamp(36px,4.6vw,50px);width:auto;display:block}
-.tr-hdr-nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);font-family:var(--font-heading),sans-serif;font-weight:600}
-.tr-hdr-nav a{color:var(--color-text,#1a1a1a);text-decoration:none}
-.tr-hdr-nav a:hover{color:var(--color-primary,#1F4FB8)}
-.tr-hdr-cta{background:var(--color-primary,#1F4FB8);color:var(--color-primary-fg,#fff);padding:.6rem 1.2rem;border-radius:999px}
-.tr-hdr-cta:hover{filter:brightness(1.05);color:var(--color-primary-fg,#fff)}
-.tr-nav-toggle{display:none}
-.tr-nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem}
-.tr-nav-burger span{width:24px;height:2px;background:var(--color-text,#1a1a1a);border-radius:2px}
-@media(max-width:760px){
-  .tr-nav-burger{display:flex}
-  .tr-hdr-nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:.2rem;max-height:0;overflow:hidden;transition:max-height .25s ease}
-  .tr-hdr-nav a{padding:.7rem .2rem}
-  .tr-nav-toggle:checked ~ .tr-hdr-nav{max-height:60vh}
+`core/navigation` emits a real `nav` and list in initial HTML, marks the
+matching page with `aria-current="page"`, and progressively enhances to a
+button-controlled mobile menu. Verify Tab and Shift-Tab order, Enter/Space,
+Escape returning focus to the disclosure, visible focus, long translated
+labels, and no horizontal overflow. Without JavaScript the links remain
+visible and usable.
+
+## Footer tree and consent
+
+Use the same tree for `footer`, normally with `padding_y: "lg"`, a small site
+logo, localized footer navigation, and optional contact/prose blocks. The
+footer navigation gets its own accessible label; it is not the main
+navigation landmark.
+
+Cookie consent is a site feature, not a footer widget. Configure it separately:
+
+```json
+{
+  "cookie_consent": {
+    "enabled": true,
+    "text": "We use optional cookies. <a href=\"/privacy/\">Privacy policy</a>",
+    "privacy_policy_url": "/privacy/",
+    "reload_after_consent": false
+  }
 }
-</style>
-```
-
-**Why it's robust:** the mobile menu is a pure-CSS checkbox toggle — no JS to break,
-no library. The `overflow:hidden` is ONLY on the collapsing nav list (never on the
-header or the logo), so the logo is always fully visible. Links use site colour
-variables so it matches the brand automatically. The header wraps (`flex-wrap`) so
-nothing overflows the viewport on narrow screens.
-
----
-
-## Footer A — Centered minimal
-
-```html
-<footer class="tr-ftr tr-ftr--center">
-  <div class="tr-ftr-inner">
-    <div class="tr-ftr-brand">{{SITE_NAME}}</div>
-    <p class="tr-ftr-tag">{{TAGLINE}}</p>
-    <p class="tr-ftr-contact"><a href="mailto:{{EMAIL}}">{{EMAIL}}</a></p>
-    <p class="tr-ftr-copy">© {{YEAR}} {{SITE_NAME}}</p>
-  </div>
-</footer>
-<style>
-.tr-ftr--center{background:var(--color-primary,#163C8C);color:rgba(255,255,255,.78)}
-.tr-ftr--center .tr-ftr-inner{max-width:1120px;margin:0 auto;padding:2.6rem 1.5rem;text-align:center;display:grid;gap:.45rem}
-.tr-ftr-brand{font-family:var(--font-heading),sans-serif;font-weight:800;font-size:1.35rem;color:#fff}
-.tr-ftr-tag{margin:0;font-size:1rem;color:rgba(255,255,255,.85)}
-.tr-ftr-contact{margin:.15rem 0 0}
-.tr-ftr-contact a{color:#fff;text-decoration:none;font-weight:600}
-.tr-ftr-contact a:hover{text-decoration:underline}
-.tr-ftr-copy{margin:.8rem 0 0;font-size:.85rem;color:rgba(255,255,255,.55)}
-</style>
 ```
 
-## Footer B — Three columns (brand · links · contact)
-
-```html
-<footer class="tr-ftr tr-ftr--cols">
-  <div class="tr-ftr-grid">
-    <div class="tr-ftr-col">
-      <div class="tr-ftr-brand">{{SITE_NAME}}</div>
-      <p class="tr-ftr-tag">{{TAGLINE}}</p>
-    </div>
-    <nav class="tr-ftr-col" aria-label="Sidfot">
-      <a href="/">Start</a>
-      <a href="#">Sidan ett</a>
-      <a href="#">Sidan två</a>
-    </nav>
-    <div class="tr-ftr-col">
-      <p class="tr-ftr-contact"><a href="mailto:{{EMAIL}}">{{EMAIL}}</a></p>
-    </div>
-  </div>
-  <p class="tr-ftr-copy">© {{YEAR}} {{SITE_NAME}}</p>
-</footer>
-<style>
-.tr-ftr--cols{background:var(--color-primary,#163C8C);color:rgba(255,255,255,.78)}
-.tr-ftr--cols .tr-ftr-grid{max-width:1120px;margin:0 auto;padding:3rem 1.5rem 1.4rem;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
-.tr-ftr--cols .tr-ftr-brand{font-family:var(--font-heading),sans-serif;font-weight:800;font-size:1.35rem;color:#fff;margin-bottom:.4rem}
-.tr-ftr--cols .tr-ftr-tag{margin:0;color:rgba(255,255,255,.8);max-width:34ch}
-.tr-ftr--cols .tr-ftr-col{display:grid;gap:.5rem;align-content:start}
-.tr-ftr--cols nav a{color:rgba(255,255,255,.85);text-decoration:none}
-.tr-ftr--cols nav a:hover{color:#fff;text-decoration:underline}
-.tr-ftr-contact a{color:#fff;text-decoration:none;font-weight:600}
-.tr-ftr--cols .tr-ftr-copy{max-width:1120px;margin:0 auto;padding:0 1.5rem 2.4rem;font-size:.85rem;color:rgba(255,255,255,.55)}
-@media(max-width:680px){.tr-ftr--cols .tr-ftr-grid{grid-template-columns:1fr;gap:1.4rem}}
-</style>
-```
+Use `update_site_settings`, then read settings back. `scripts_necessary` and
+`scripts_optional` execute in visitors' browsers and must be reviewed like
+other API-key-authorized script surfaces. Verify accept/necessary/reject,
+optional-script gating, and keyboard focus in preview and the actual build.
 
-**Why these footers are robust:** the columns collapse to one at 680px (no
-horizontal scroll); all colours come from `--color-*` with fallbacks; the contact
-is a real `mailto:` link; nothing relies on fixed heights. Swap `--color-primary`
-for a custom dark if the brand's primary is too light for white text.
+## Version and dependency rules
 
----
+Child versions inherit installed, custom, and third-party block types from
+their base chain. If preview reports a missing type, stop and inspect
+`list_block_types` for that exact version; do not duplicate an Extension or
+installation. A type missing after capability 0.43.0 is a dependency error to
+report, not a reason to let the block silently disappear.
 
-## Restyling notes
+## Final checks
 
-- The logo always comes from `read_site_settings → logo`. If it's `null`, set it
-  first (upload + `update_site_settings`) — don't hard-code a path.
-- For a **shaped transition** from the header/footer into the page, don't build a
-  wave band by hand — that belongs to the adjacent `core/section` via its
-  `divider_top` / `divider_bottom` (see `tr-redesign-branch`).
-- Keep the brand mark + a way home. Even a dramatic redesign keeps the logo
-  linking to `/`.
+- Header and footer landmarks exist exactly once around their content.
+- Logo is fully visible, keeps its aspect ratio, has useful alt text, and links home.
+- Current-page state and localized navigation labels are correct.
+- Mobile disclosure is keyboard accessible and does not trap focus.
+- No tenant CSS is required for spacing, focus, wrapping, or the narrow layout.
+- Preview and a hosted static build match before promotion.

package/skills/tr-migrate-wp.md

@@ -26,6 +26,14 @@ agency) reviews each step in their terminal.
 get_migration_readiness source_url="https://oldsite.com"
 ```
 
+When the migration includes reusable page/item layouts, include each proposed
+block composition and its collection fields in this same call. A
+`waiting_for_native_support` result means leave that template intact and do
+not replace the gap with generic custom blocks, raw HTML, or corrective site
+CSS. Independent content and SEO work may continue. Rerun the review after the
+required Core version is deployed, then verify preview and a fresh hosted
+build.
+
 Pass `source_url` — that adds the checks on the site you're migrating FROM.
 An old host that answers 403/429 to server-side requests is a **blocker**: the
 import would produce empty pages, or pages containing the host's block page,

package/skills/tr-new-site.md

@@ -57,9 +57,9 @@ Common requirements that are easy to misclassify:
 | Responsive icon/card grid | `core/grid` + `core/icon_box`, or `core/feature_grid`; set responsive fields with `set_block_responsive` |
 | Custom cards backed by a collection | `core/repeater` / `core/collection_list` with a site-authored `item_compatible` block type as `item_block` |
 | Grouped collection listing | `core/repeater` with `group_by`; array-valued fields place an item in every matching group |
-| Breadcrumbs in a page template | `template/page_breadcrumbs` (verify that the relevant route supplies a breadcrumb trail) |
-| Generated heading index | `core/table_of_contents`; choose `h2`, `h2-h3`, or `h2-h4` |
-| Previous/next collection item links | `template/item_navigation` in the collection's block template; ordering follows `sort_field` / `sort_dir` |
+| Breadcrumbs in a page template | `template/page_breadcrumbs`; page and item routes supply a server-rendered trail |
+| Generated heading index | `core/table_of_contents`; choose heading levels and set `source_field` for collection content |
+| Previous/next collection item links | `template/item_navigation`; defaults to collection order and can bind explicit neighbor fields |
 | Download CTA that disappears without a file | `template/show_if` around a context-bound `core/button`; a dedicated download block is only editor convenience |
 | Sticky/custom header and multi-column footer | Block-mode header/footer partials plus layout blocks, or one reusable custom block type |
 | Cookie notice | `settings.cookie_consent`, not a page block |
@@ -115,40 +115,22 @@ an iframe cannot be represented.
 
 ### 3. Header + footer partials
 
-**Start from a vetted preset — don't hand-roll the layout.** `read_skill
-tr-header-footer` has robust header + footer presets (centered logo, logo+nav
-with a no-JS mobile menu, centered + 3-column footers) that avoid the usual
-traps: clipped logos (no `overflow:hidden` near the logo), distorted logos
-(`height` + `width:auto`), and broken mobile menus. Fill the placeholders and
-restyle to the palette.
-
-Partials can use either mode. Use HTML for a compact hand-authored nav, or
-block mode when editors need per-field control or an installed Extension must
-be placed there. Partials receive the same `{{site.*}}` render context as page
-blocks, so literal brand data is optional rather than required:
-
-```html
-<header class="site-header">
-  <div class="header-inner">
-    <a class="header-logo" href="/"><img src="LOGO_MEDIA_URL" alt="Acme Studio" height="40" /></a>
-    <nav class="header-nav">
-      <a href="/om-oss">Om oss</a>
-      <a href="/kontakt">Kontakt</a>
-    </nav>
-  </div>
-</header>
-<style>
-.site-header{background:var(--color-background);padding:1rem 2rem}
-.header-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
-.header-nav{display:flex;gap:2rem}
-.header-nav a{color:var(--color-text);text-decoration:none}
-</style>
-```
+**Start from the native preset — don't hand-roll navigation.** Read
+`tr-header-footer` and use its `template/site_logo` + `core/navigation`
+composition. The server-rendered landmark, current-page state, no-JS links,
+mobile disclosure, focus treatment, and responsive behavior are Core
+contracts rather than tenant CSS/JavaScript.
+
+Stage the complete tree with `update_partial partial_id="header"
+patch={blocks:[...]} save=true`, then call `set_partial_mode partial_id="header"
+to="blocks"`. Repeat for the footer and read both partials back. The inactive
+HTML representation is retained for rollback; changing `content_mode` through
+ordinary PATCH/PUT is rejected intentionally.
 
-`replace_partial partial_id="header" html_content="..."` — same pattern
-for the footer. Design notes: **no border-bottom on the header if the
-first page section should meet it seamlessly** — let background color
-changes do the separating. Anchor links in nav (`/#section`) are fine.
+Use HTML mode only when preserving legacy authored markup that cannot yet be
+represented natively. Partials receive the same `{{site.*}}` render context as
+page blocks. Keep the first section and header backgrounds intentional; do not
+add a decorative border merely to compensate for mismatched spacing.
 
 ### 4. Homepage — block tree
 
@@ -181,7 +163,7 @@ on a block *inside* the section instead):
   ] },
   { "type": "core/section", "data": { "padding_y": "lg" }, "children": [
     { "type": "core/heading", "data": { "text": "Så funkar det", "level": "h2", "align": "center" } },
-    { "type": "core/grid", "data": { "cols": 3, "gap": "lg" }, "children": [
+    { "type": "core/grid", "data": { "cols": { "mobile": 1, "tablet": 2, "desktop": 3 }, "gap": "lg" }, "children": [
       { "type": "core/step_card", "data": { "number": "1", "title": "…", "text": "<p>…</p>" } },
       { "type": "core/step_card", "data": { "number": "2", "title": "…", "text": "<p>…</p>" } },
       { "type": "core/step_card", "data": { "number": "3", "title": "…", "text": "<p>…</p>" } }