{"generatedAt":"2026-11-10T22:17:25.779Z","blocks":[{"slug":"fullBleedInterstitial","package":"@wabbit/tome-blocks-house","docs":"https://wabbit.com/docs/packages/blocks-house","usage":{"summary":"A tall, centered dark band that pairs one short display statement (1-2 lines, with optional *asterisk*-accented spans) with an optional full-bleed background scene, a small corner caption, and an optional call to action. No copy is baked in — every string is editor-authored.","whenToUse":["A pacing break between two denser sections (a features grid, a long-form article, a pricing table)","A single high-impact statement moment — a mission line, a guarantee, a closing thought","A section that wants a full-bleed photographic or illustrative backdrop without competing UI"],"pageTypes":["landing","about","marketing","editorial-article"],"howToUse":"Write the Line (1-2 lines; wrap a phrase in *asterisks* for an accent span). Optionally add a Background Scene image — an empty slot renders a labeled placeholder, never a blank band. Set Background to choose the band color (defaults to the theme-invariant Solid Dark band when untouched). Add a Caption for small corner marginalia, or a Call to Action for a link beneath the statement.","pairsWith":["about","media","stat-bar","timeline"],"avoidWhen":["The moment needs interactive content or multiple statements — use a standard content/hero block instead","The page already has a full-bleed band immediately above or below it — back-to-back full-bleed bands read as one shapeless section"],"register":"marketing-landing"}},{"slug":"blog","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"The header and footer shell for a blog section — optional richtext heading/intro and a \"View All\" link row, built to pair with the consuming site's own post-listing implementation. A self-contained, config-driven post grid is on the roadmap: `populateBy`, `categories`, `sortField`, `sortOrder`, `limit`, and `selectedPosts` are captured in config today for that future wave.","whenToUse":["A /blog or /news index page, to supply the section heading/intro and a \"View All\" link, alongside the site's own post-grid implementation","A \"latest from the blog\" teaser band on a homepage or landing page, same caveat","Not yet: a fully self-contained, config-driven post listing with working category/sort/pagination — that part is unimplemented"],"pageTypes":["blog","landing","marketing","about"],"howToUse":"Author the richtext heading/intro and an optional \"View All\" link. The `populateBy` (\"collection\"/\"selection\"), `categories`, `sortField`, `sortOrder`, `limit`, and `selectedPosts` fields exist and validate, but `Blog.tsx` does not read them — it renders only the richtext header and links row today. This is scaffolding for a future hydration wave, not a live integration; trigger to build it: when a consumer needs this block to render its own post grid instead of delegating to the site's data layer, wire the query/selection logic into `Blog.tsx`. For a full-collection browse with advanced filtering reach for `archive`; for curated \"you may also like\" recommendations at the end of an article use `related-posts`. A fully config-driven post listing (collection query, category filter, sort, manual selection) is on the roadmap; those fields are captured today for forward compatibility (see the comment in Blog.tsx).","pairsWith":["archive","related-posts","editorial-opener"],"sequence":{"precedes":["related-posts"]},"avoidWhen":["You need advanced filter UI or faceted search across multiple collection types — use `archive`","You are inside an article body and just want 3-5 contextual recommendations — use `related-posts`"],"register":"editorial"}},{"slug":"archive","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"A grid of manually curated documents — posts, case studies, projects. Editors hand-pick each item via `populateBy: \"selection\"`, the supported mode; the `populateBy: \"collection\"` mode (a query-driven, filterable, paginated listing) is on the roadmap.","whenToUse":["A curated grid of hand-picked documents where the editor selects each item","A numbered reading-room index of essays, talks, podcasts and a book, newest first, with a footer of topics and a sign-up (variant `filed`)","A single \"next in the reading room\" teaser at the end of an essay (variant `filed`, layout `next`)","A \"featured\" or \"highlighted\" set of posts, case studies, or projects","Not yet: a full-collection browse surface with reader-driven filtering and pagination — that mode is scaffolding only"],"pageTypes":["blog","editorial-article","docs","portfolio"],"howToUse":"Set `populateBy` to \"selection\" and pick documents via `selectedDocs` — this is the only mode that renders anything today. The \"collection\" mode (point the block at a Payload collection slug, configure filters, auto-paginate) is scaffolding for a future hydration wave, not a live integration; trigger to build it: when a consumer needs a full-collection browse surface, wire the query into a server-side wrapper feeding this block, then update `Archive.tsx` to render the result the same way its `selection` branch does (the `collection` branch currently renders null — see `RelatedPosts.tsx` for the same corrected pattern). The `filed` variant adds `layout` (`index` or `next`), `lead`, `showNewest`, `externalEntries` (typed talk, podcast and book entries) and a `footer` (topics, a sign-up heading and line, an empty slot). It links each entry to its own URL (the document `url`, else `<postsPath>/<slug>`, `/posts` by default) and numbers entries by a serial the site supplies, else by date rank across the list. The sign-up form is a slot: pass a rendered form to the renderer as `signupSlot`; the block imports no forms engine. Sites that map posts themselves pass `entries`; `excludeEntry` drops entries such as reserved demo posts. For a curated hand-picked selection at the end of an article, reach for `related-posts` instead. For a styled blog listing with category pills, prefer `blog`. The filed variant's footer carries a sign-up slot and an empty slot for the site to fill.","pairsWith":["blog","related-posts","editorial-opener"],"sequence":{"follows":["editorial-opener"]},"avoidWhen":["You want to hand-pick 3-5 items rather than query the whole collection — use `related-posts`","The page is a single article and you only want a few recommendations at the end — use `related-posts`"],"register":"editorial"}},{"slug":"related-posts","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"A curated \"you may also like\" row of 3-6 hand-picked posts, placed at the end of an article or blog post to extend reading engagement before the colophon. Manual selection (`populateBy: \"manual\"`) is the supported mode; the category-matched `populateBy: \"auto\"` mode is on the roadmap.","whenToUse":["At the bottom of an article body, after the last content block and before `editorial-colophon`","On a blog post where you want to surface 3-4 thematically related pieces the editor has selected","A \"keep reading\" section on a docs page linking to related guides"],"pageTypes":["editorial-article","blog","docs"],"howToUse":"Set `populateBy` to \"manual\" and pick specific posts via `selectedPosts` — this is the only mode that renders posts today. The \"auto\" option (pull the most recent from a matching category) is scaffolding for a future hydration wave, not a live integration; trigger to build it: when a consumer needs category-matched related posts, wire a categories-based query into a server-side wrapper feeding this block, then update `RelatedPosts.tsx` to render it. Configure limit (typically 3-6). Place before `editorial-colophon` and after `editorial-footnotes` if present. For a full browsable listing with filtering, use `blog` or `archive` instead.","pairsWith":["editorial-colophon","editorial-footnotes","blog","archive"],"sequence":{"follows":["editorial-footnotes","editorial-bridge"],"precedes":["editorial-colophon"]},"avoidWhen":["You need readers to browse and filter the full collection — use `blog` or `archive`","There are no related posts to surface (an empty block is a layout gap)","The page is a landing or marketing page where outbound article links dilute the conversion path"],"register":"editorial"}},{"slug":"post-hero","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":null},{"slug":"editorial-opener","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"The full-bleed 100svh hero that opens an editorial article: headline, kicker, byline, publication date, and hero media placed asymmetrically. Exactly one per article, always first. Sets the typographic and compositional register for everything that follows.","whenToUse":["At the top of every long-form editorial article or feature piece","Any article where the hero image and headline are the primary entry point for the reader","Blog posts or docs articles that follow the full editorial template (opener → body → colophon)"],"pageTypes":["editorial-article","blog","docs"],"howToUse":"Author headline (required), kicker, byline, date, and hero image. Text placement is asymmetric by default (cols 1-6 text, cols 7-14 media) — do not override this to centered unless the design system explicitly calls for a centered opener variant. Headline, kicker, and byline carry the article's semantic H1/meta structure; do not repeat an H1 in the body. Use exactly one per article. Everything else in the article follows below it. For a landing page hero that is not editorial in register, use a `hero` or `section` block instead.","pairsWith":["editorial-bridge","editorial-figure","editorial-sidenote","editorial-colophon"],"sequence":{"precedes":["editorial-figure","editorial-bridge","editorial-sidenote"]},"avoidWhen":["Landing or marketing pages — the full-bleed editorial opener is the wrong register; use a `hero` block","Short-form posts that don't carry a hero image (use a section with a headline instead)","Placing more than one per article — exactly one opener per article is a hard rule"],"register":"editorial"}},{"slug":"editorial-bridge","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"A deliberate structural pause — viewport-relative whitespace, optionally with centered content — that signals a section shift between major article movements. Not decorative dead space; a pacing instrument.","whenToUse":["Separating two major rhetorical movements in a long-form article (e.g. argument → evidence → implication)","After an `editorial-figure` that spans full-bleed before returning to body text","When a thematic break needs more visual weight than a hairline separator"],"pageTypes":["editorial-article","blog","docs"],"howToUse":"Place between major sections — never back-to-back with another bridge. Optional centered content (a short pullquote or a chapter marker) is the only permitted child. Height is controlled by the pacingModule F defaults (8-16vh desktop, 12-20vh mobile); override only if the containing article design calls for it. For a lighter pause with no height allocation, use a hairline separator instead.","pairsWith":["editorial-opener","editorial-figure","editorial-sidenote","editorial-colophon"],"sequence":{"follows":["editorial-figure"],"precedes":["editorial-sidenote","editorial-colophon"]},"avoidWhen":["Back-to-back with another `editorial-bridge` — space stacks and reads as a layout error","Short articles under ~600 words where the pacing benefit does not justify the vertical cost","Inside a marketing or landing page — reach for a section divider or `section` spacing instead"],"register":"editorial"}},{"slug":"editorial-sidenote","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"A marginal annotation (cols 10-12) aligned by JS to its referencing body paragraph. Used for contextual asides, clarifications, and short citations that should live visually alongside their referencing text rather than collected at the end as footnotes.","whenToUse":["A clarifying aside or definition that benefits from being spatially adjacent to its referencing sentence","Short citations or source attributions (≤2 sentences) that read better inline than as numbered endnotes","Authorial commentary or historical context that enriches a paragraph without interrupting the reading line"],"pageTypes":["editorial-article","blog","docs"],"howToUse":"Author the sidenote text (≤~30ch for clean marginalia measure) and set the paragraph anchor to the ID of the referencing body paragraph. The block JS aligns the sidenote row to the referencing paragraph on render. On mobile it expands inline below the referencing sentence or collapses to an endnotes list — do not author sidenotes that only make sense in the margin. For more than ~5 annotations or when back-link numbering is required, prefer `editorial-footnotes` for the collected end-matter approach.","pairsWith":["editorial-opener","editorial-figure","editorial-footnotes","editorial-bridge"],"sequence":{"follows":["editorial-opener"],"precedes":["editorial-footnotes","editorial-colophon"]},"avoidWhen":["You have more than ~5 annotations — the margin track becomes cluttered; use `editorial-footnotes`","The annotation is long (>60 words) — it will overflow the sidenote column; inline it or use a footnote","Marketing or landing pages where the marginalia grid track is not part of the design system"],"register":"editorial"}},{"slug":"editorial-figure","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"An editorial-grade image figure: the image occupies the body columns while its caption is subgrid-placed in the marginalia (cols 10-12), not stacked below. Three breakout modes (inline, wide, full-bleed) and an optional duotone treatment make this the authoritative image block for long-form articles.","whenToUse":["Any significant image within an editorial article body that deserves a proper caption and credit","When you want the caption in the margin track (marginalia placement) rather than centered below the image","Full-bleed photo moments mid-article — use the full-bleed breakout variant for impact"],"pageTypes":["editorial-article","blog","docs","dossier"],"howToUse":"Author an image, altText, caption, and optional credit. Choose a breakout mode: default (cols 1-9 + caption cols 10-12), wide (margin-to-margin within the column grid), or full-bleed (spans all 14 tracks). Duotone applies a color-wash treatment for visual consistency in mixed-photo layouts. Follow the 4-5 paragraph pacing rule: one figure per 4-5 paragraphs of body copy. Use `editorial-bridge` for a section pause that does not need an image. For non-editorial decorative images reach for `image` or `media`.","pairsWith":["editorial-opener","editorial-bridge","editorial-sidenote","editorial-footnotes"],"sequence":{"follows":["editorial-opener"],"precedes":["editorial-bridge"]},"avoidWhen":["The image is purely decorative with no caption — use `image` or `media` instead","You need a side-by-side image + text split — use `content-two-column`","You are on a marketing or landing page where caption-in-margin is not the design system"],"register":"editorial"}},{"slug":"editorial-colophon","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"The article end-matter footer: author bio, publication date, typeface credits, and copyright. Always the last block in an editorial article — the colophon closes the reading contract.","whenToUse":["At the close of every editorial article or long-form blog post that carries an author byline","After `editorial-footnotes` when footnotes are present, or directly after body copy when they are not","When the article design requires explicit publication metadata (date, version, license)"],"pageTypes":["editorial-article","blog","docs"],"howToUse":"Place as the absolute last block in the article. Author bio, photo, social links, publication date, and optional typeface/image credits are all authored here. The colophon renders in micro type below a hairline separator at cols 3-11. Do not place anything after it. If the article has footnotes, place `editorial-footnotes` immediately before this block.","pairsWith":["editorial-footnotes","editorial-opener","editorial-sidenote"],"sequence":{"follows":["editorial-footnotes","editorial-bridge"]},"avoidWhen":["Short news items or changelog entries that do not carry a byline","Marketing or landing pages where author attribution is not the publishing convention","Anywhere other than the absolute end of the article content"],"register":"editorial"}},{"slug":"editorial-footnotes","package":"@wabbit/tome-blocks-content-writer","docs":"https://wabbit.com/docs/packages/blocks-content-writer","usage":{"summary":"Collected article footnotes rendered as a numbered endnotes section with back-link anchors. Author footnotes in body copy via inline markers; this block collects and displays them at the end of the article before the colophon.","whenToUse":["Articles with inline citations, legal qualifications, or source references that should not interrupt reading flow","Long-form research or investigative pieces where referenced material needs numbered attribution","Docs or technical articles where caveats and version notes belong in end-matter rather than inline"],"pageTypes":["editorial-article","blog","docs"],"howToUse":"Place near the end of the article, after the last body block and before `editorial-colophon`. Footnote items are authored as pairs (marker + text); the block renders a two-column sub-grid (number | text) within cols 1-9. A hairline separator is rendered above the section automatically. Do not manually author a separator block before this. If footnotes are sparse (<3) and don't need back-links, consider using `editorial-sidenote` for individual annotations instead.","pairsWith":["editorial-colophon","editorial-sidenote","editorial-opener"],"sequence":{"follows":["editorial-bridge"],"precedes":["editorial-colophon"]},"avoidWhen":["You only have 1-2 annotations that belong visually adjacent to the referencing paragraph — use `editorial-sidenote`","The content is a short blog post without source references","Marketing or landing pages — footnotes are an editorial convention, not a persuasion pattern"],"register":"editorial"}},{"slug":"high-impact-hero","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The default marketing hero — headline, subheadline, description, CTAs, social proof (rating + avatars), supporting images, optional marquee, and full background control. Seven layout variants cover most landing-page openers, including `quick-ask` for a lead-capture opener (one-question form + tap-to-call) and `venue` for a place people visit (the name large over or under a photo of the room).","whenToUse":["The opening section of a landing or marketing page","Any page that needs a strong above-the-fold statement with CTAs and/or social proof"],"pageTypes":["landing","marketing","about"],"howToUse":"Set headline + subheadline + description and one or two CTA links. Pick a variant for the layout (orientation also shifts left/center/right). Add reviews (rating + avatars) for social proof, supporting images for a richer composition, or a marquee for movement. Use a color or image background (with gradient overlay for legibility). For a quieter look, leave media/reviews empty — this hero degrades gracefully (it supersedes the old low/medium-impact heroes). Variants default / centered / dark / split set data-variant on the root for site or theme CSS (layout comes from the inline orientation and background options). illustrationHero renders its own character-illustration layout; quick-ask renders text left, media right, with a no-JS one-question form, a tap-to-call action and a proof line; split renders the call action as an inline tel link after the buttons and takes an optional choice group (a question and two to six choices, each with an answer and one link, switched with no script); venue renders the opener for a place people visit (meta line, the venue name set large, one line, one action) with the background photo behind the copy or above it. Supporting images can carry an overlay label and a second caption line. Every variant also sets data-block-variant on the root.","pairsWith":["feature","featureHero","logo-slider","testimonial","pricing-plans","cta","faq"],"sequence":{"precedes":["feature","featureHero","logo-slider"]},"avoidWhen":["Article/post headers — use `article-hero`","Type-forward or image-dominant premium openers — use `hero-pro`"],"register":"marketing-landing"}},{"slug":"feature-hero","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The feature showcase — a heading + a list of features, rendered in one of six layouts (cards, three-steps, large-media, icon-grid, media-feature, masonry). One block covers every \"here are our features/steps/benefits\" section.","whenToUse":["A \"features\", \"how it works\", or \"benefits\" section on a landing/marketing page","Any grid/list of titled items with optional icons, images, or descriptions"],"pageTypes":["landing","marketing","about"],"howToUse":"Pick a layout, then fill the features array (title + optional description/icon/image). Icon-grid suits many short items; three-steps suits an ordered process (toggle the timeline connectors); large-media / media-feature lead with a hero image; cards/masonry suit richer feature blurbs. Set heading + eyebrow + subtitle for the section header, and an optional CTA. Follows a hero; precedes social proof / pricing / CTA. The layout is picked by the inline variant select. Variants default / minimal / dark / playful set data-variant on the root for site or theme CSS.","pairsWith":["hero","logo-slider","testimonial","pricing-plans","cta","faq"],"sequence":{"follows":["hero"],"precedes":["testimonial","pricing-plans","cta"]},"avoidWhen":["A single image-led statement (use `hero` / `hero-pro`)","Long-form editorial prose (use the editorial blocks)"],"register":"marketing-landing"}},{"slug":"cta","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The conversion band — an eyebrow + headline + supporting copy, up to three action buttons, optional image, and a fine-print disclaimer. Six variants (default, minimal, with-form for inline name/email capture, footer for dark section ends, door-strip for a compact two-door router, doors for the full two-door close) cover most \"ask for the click\" moments.","whenToUse":["A dedicated conversion prompt mid-page or closing a landing/marketing page","A standalone \"sign up / book / get started\" band between content sections","Inline lead capture without sending the visitor to a separate form (the with-form variant)"],"pageTypes":["landing","marketing","pricing","about"],"howToUse":"Write a single clear ask in the rich text and one or two links — keep the primary action first and outline a secondary. Pick a variant: default for a standard band, minimal for a flat editorial treatment, with-form to append the inline name/email group (schema variant — save and reload to surface its fields), footer for a compact dark close. Set backgroundColor + appearance for emphasis; add an image only when it reinforces the ask. Use the disclaimer for fine print (guarantees, terms). Closes a section or a page — does not open one. Variants default / minimal / with-form / footer set data-variant on the root for site or theme CSS. with-form also adds Inline Form label fields, which this renderer does not draw: the site supplies the form. door-strip and doors render the two-door layouts.","pairsWith":["hero","featureHero","pricing-plans","testimonial","faq","logo-slider"],"sequence":{"follows":["featureHero","pricing-plans","testimonial","faq"]},"avoidWhen":["The page opener — use `hero` / `high-impact-hero` (which already carry CTAs above the fold)","A full pricing decision — use `pricing-plans`; reserve the CTA for the single resulting action","Persistent site-wide announcements — use `banner`"],"register":"marketing-landing"}},{"slug":"logo-slider","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The trust strip — a row of client, partner, or press logos with an optional heading. Four variants run from a moving marquee (default, dark) through a slow, muted editorial drift (marquee-editorial) to a still grid (static-grid) so it reads as \"trusted by\" proof rather than decoration.","whenToUse":["Establishing credibility right under the hero with recognizable client/partner logos","A \"trusted by\" or \"as seen in\" press strip on a landing or marketing page","A quiet logo wall on an about or portfolio page where motion would distract"],"pageTypes":["landing","marketing","about","portfolio"],"howToUse":"Add 5+ logos (more reads better at marquee speeds) with accurate alt text per company and optional link-out URLs. Set a short heading like \"Trusted by\". Pick a variant: default/dark scroll automatically (tune speed, size, spacing); marquee-editorial drifts at half speed with wider spacing and muted opacity; static-grid sits still in a wrapping grid where logos with a URL link out. Use the dark/brand background to sit it against a colored band. Requires the motion capability for the scrolling variants. Typically follows the hero as the first proof point. default and dark scroll as a marquee (dark also sets data-variant for site or theme CSS); marquee-editorial scrolls slower, wider and muted; static-grid shows a still grid.","pairsWith":["hero","featureHero","testimonial","cta","pricing-plans"],"sequence":{"follows":["hero"],"precedes":["featureHero","testimonial"]},"avoidWhen":["You have only one or two logos — they read as thin; use a `testimonial` or inline mention instead","Quoted social proof with a name and face is the goal — use `testimonial`","A clickable partner directory or grid of cards is needed — this is a brand strip, not navigation"],"register":"marketing-landing"}},{"slug":"pricing-plans","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The plans-and-pricing section — a titled grid of subscription and/or project pricing cards (entered on the block, or drawn from a card collection the site names) with an optional toggle between the two. Four variants (default full-width, compact table-like, dark, editorial typographic) cover the spectrum from SaaS-grid to minimal price list.","whenToUse":["A pricing page laying out subscription tiers and/or one-off project packages","A \"plans\" or \"packages\" section on a landing/marketing page where price is the decision","Offering both recurring and one-time options via the subscription/project toggle"],"pageTypes":["pricing","landing","marketing"],"howToUse":"Add the subscription and/or project cards on the block (or, when the site configured a card collection, relate cards from it) and set a section title. Enable the toggle when you offer both recurring and one-time options, and choose which list shows first. Pick a variant: default for full-width cards, compact for a denser table-like list, dark to sit on a colored band, editorial for a hairline typographic price list with no card surfaces. Requires the motion capability. Usually the central decision block — follow it with a CTA and an FAQ that answers pricing objections.","pairsWith":["hero","featureHero","faq","cta","testimonial","logo-slider"],"sequence":{"follows":["featureHero","testimonial"],"precedes":["faq","cta"]},"avoidWhen":["Comparing features rather than prices — use `featureHero` (a comparison/grid layout)","A single offer with one action — a `cta` band is enough; reserve pricing for real choice","You have no product-card content authored yet — the cards drive this block"],"register":"marketing-landing"}},{"slug":"testimonial","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The social-proof block — pulls quoted testimonials from the testimonials collection, shown as a single featured quote or a paginated carousel. Four variants (default card, editorial pull-quote, dark with a star strip, carousel) place a customer voice wherever proof is needed.","whenToUse":["Backing a claim with a named customer quote on a landing or marketing page","A rotating set of short quotes via the carousel mode/variant","An author sign-off or end-matter quote on an article (editorial-colophon layout)","Several short quotes side by side, optionally with one supporting figure (quotes-grid layout)"],"pageTypes":["landing","marketing","about","editorial-article"],"howToUse":"Pick a mode: single relates one testimonial; carousel relates many (order sets the sequence, dots let viewers jump). Quote content lives in the testimonials collection — override only the section title here when needed. Choose a variant: default card, editorial large pull-quote (no card), dark with an accent star rating, or carousel. Set text color, padding, and an optional background band; show the publication date for recency. For article end-matter use the editorial-colophon layout. For several short quotes at once use the quotes-grid layout: every testimonial becomes a grid cell, and the optional stat tile (value, text, label) takes the cell its 1-based position names (default 2). Each testimonial can carry a complianceLabel (e.g. \"Illustrative quote\"), shown with it in every layout. Requires the motion capability. Strongest right after a feature or pricing block, before the closing CTA.","pairsWith":["hero","featureHero","logo-slider","pricing-plans","cta","faq"],"sequence":{"follows":["featureHero","logo-slider","pricing-plans"],"precedes":["cta"]},"avoidWhen":["You have only logos, not quotes — use `logo-slider` for a brand trust strip","No real attributable testimonial exists — fabricated proof undermines the page; omit the block","A primary headline statement is the goal — that belongs in the `hero`"],"register":"marketing-landing"}},{"slug":"faq","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The objection-handler — a headline, optional intro, and an accordion of question/answer pairs with a closing callout link. Four variants (default accordion, minimal hairline, two-column for dense sets, dark) answer the questions that block a decision.","whenToUse":["Pre-empting buying objections near the bottom of a landing or pricing page","A dedicated FAQ / support page or a help section","Any \"common questions\" set where progressive disclosure keeps the page scannable"],"pageTypes":["faq","landing","pricing","marketing","docs"],"howToUse":"Write a headline and a badge (\"FAQ\"), then add question/answer pairs (answers are rich text — keep them tight). Pick a variant: default accordion, minimal for hairline-separated editorial pages, two-column when the list is long, dark to match a colored band. Tick openFirst to show the first answer open on load. Set the layout width and add a callout link to route unanswered questions to contact or a CTA. Order questions by likely concern; place it after pricing, before the final CTA so it clears the last objection. Variants default / minimal / two-column / dark set data-variant on the root for site or theme CSS; the layout itself is the same accordion in each.","pairsWith":["pricing-plans","featureHero","cta","hero","testimonial"],"sequence":{"follows":["pricing-plans","featureHero"],"precedes":["cta"]},"avoidWhen":["Long-form documentation or guides — use the docs/editorial blocks, not a Q&A accordion","A single message or note — use `banner`","The questions are really a feature list — use `featureHero`"],"register":"marketing-landing"}},{"slug":"banner","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The announcement bar — a short title/description with optional links, styled as an info/warning/error/success alert or as a quiet editorial aside. Four variants (default alert, editorial hairline callout, dark announcement bar, sticky persistent bar) carry a one-line message without taking over the page.","whenToUse":["A site-wide notice — promo, launch, sale, maintenance, or policy/cookie message","A persistent top/bottom bar that stays as the visitor scrolls (the sticky variant)","An inline editorial callout or marginalia aside within body content (editorial mode)"],"pageTypes":["landing","marketing","editorial-article","blog","docs"],"howToUse":"Keep the message to a title plus one line of description and at most one or two links. Set the alert style (info/warning/error/success) or switch on editorial mode for hairline + muted treatment with a grid placement (inline / marginalia / wide). Choose a variant: default alert, editorial aside, dark bar, or sticky for persistent top placement. Use position (top/bottom) and defaultVisible for dismissible notices. It is a thin one-liner — not a conversion section. Variants default / editorial / dark / sticky set data-variant on the root for site or theme CSS; the alert color comes from the inline style select.","pairsWith":["hero","cta","pricing-plans","faq"],"sequence":{"precedes":["hero"]},"avoidWhen":["The real goal is conversion with a headline and buttons — use `cta`","A multi-paragraph announcement or rich content — use a `hero` or content block","A pricing or feature decision — use `pricing-plans` / `featureHero`"],"register":"marketing-landing"}},{"slug":"exhibit","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"The museum wall — an asymmetric 12-col grid of hairline-framed white canvases, each holding a REAL nested block render (not a screenshot) under a plate caption naming it and its source. One variant (gallery-wall) cycles four offset positions so the wall reads as curated, not tiled.","whenToUse":["Showing off what a page can actually contain — real live block renders, wired to real data, framed as exhibits","A capability/gallery/showcase section that needs to prove range across several block families in one composition","Closing a platform or agency page with tangible proof instead of another round of prose"],"pageTypes":["landing","marketing","portfolio"],"howToUse":"Add 1-6 exhibits. Each exhibit gets a bold plateTitle (required) and an optional plateNote for attribution (e.g. \"Marketing pack · live testimonial\"), then a blocks array holding the ONE (or few) real nested block(s) to frame — populate it from the site's curated nested-allowlist, not arbitrary blocks. The allowlist itself is a factory-config contract: pass `exhibitBlocks` (an array of Payload Block configs) when registering this block; omit it and the wall defaults to this pack's own `testimonial` block so the field is never empty. Position cycles exA/exB/exC/exD automatically by exhibit index — no manual placement control. An asymmetric wall of hairline-framed, real nested block renders. Its one variant, gallery-wall, is the only layout and sets data-variant on the root for site or theme CSS.","pairsWith":["feature-hero","testimonial","cta","pricing-plans"],"sequence":{"follows":["feature-hero","pricing-plans"],"precedes":["cta"]},"avoidWhen":["Only screenshots or static mockups are available — that is what this block explicitly replaces; use a plain image block instead","A single message needs full attention — a wall of several exhibits dilutes focus; use one block directly","The nested content is not real/live — placeholder-only exhibits undercut the \"exhibits, not screenshots\" promise"],"register":"marketing-landing"}},{"slug":"stop-viewer","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"A walk through the parts of a product, one stop at a time. A rail lists the stops with a price or short label each. Picking one shows a route bar, a picture of the page and, when you add one, a second picture of its admin behind a site/admin toggle, then a description, a command or a note, and an open button. The picture links to the stop's page. The first stop is in the server HTML, so the block reads and indexes without JavaScript.","whenToUse":["Showing several parts of a product or site as real pages, each with what a visitor sees and what an editor sees","A tour band where every stop has its own page to open and its own install command or price","A proof section that lets the reader pick what to look at, instead of scrolling a long run of screenshots"],"pageTypes":["landing","marketing","about"],"howToUse":"Add 2-8 stops. Each has a name (required), a short price or label for the rail, the route label shown in the bar (for example /products), a link to the page, a site picture and an optional admin picture, a one or two sentence description, and one detail line. Set the detail kind to Command to set that line in mono, or leave it as Note for a plain sentence. A stop with no admin picture hides the toggle while it is selected. Use pictures of one shape for every stop: the frame keeps one height, so a different crop is cut to fit. The block paints its own band from the page colors (foreground and background swapped), so place it full width.","pairsWith":["section-header","switch-tally","proof-ledger","cta"],"sequence":{"follows":["section-header"],"precedes":["switch-tally","cta"]},"avoidWhen":["There is one thing to show: use a single image block","The stops have no pages or pictures to point at: use a card grid","The pictures are not real captures: the frame presents them as the actual page"],"register":"marketing-landing"}},{"slug":"switch-tally","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"A configurator for optional add-ons. Each row is a switch with a name, a line of description, a price and the packages it installs. Turning rows on updates a running total and the exact install command, with each package listed once. A closing note and up to three links sit beside the total. On narrow screens the total stays pinned above the switches.","whenToUse":["Add-ons or modules priced separately, where the visitor should see what their own mix costs","A product with an install step per option, where showing the exact command removes a question","Closing a pricing explanation with something the reader can try, not another table"],"pageTypes":["landing","marketing","pricing"],"howToUse":"Set the currency symbol and the period words once (\"a year\", \"a month\"); each row then takes a plain number, so no price is typed twice. List each row's packages separated by spaces, commas or new lines: a package shared by two rows is printed once. Use the command prefix for the install command (it defaults to npm install). The zero text is what the command area says before anything is on. Keep to 3-8 rows. The block paints an accent band from the page's primary color, so use it once per page.","pairsWith":["stop-viewer","pricing-plans","cta","faq"],"sequence":{"follows":["stop-viewer","pricing-plans"],"precedes":["faq","cta"]},"avoidWhen":["There is one price: use a pricing plan card","The options are not independent: switches imply any combination works","Prices depend on a quote, not a number: the total would be a guess"],"register":"marketing-landing"}},{"slug":"proof-ledger","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"A band that answers \"why is this safe to depend on?\" It opens with a heading and a short list of promises, then sets one very large figure and its caption beside a window that lists every check by name, with a footer line, and ends with a row of small figures. The figure and caption stay together and are centered against the window.","whenToUse":["A trust or safety section that has a real number behind it, such as checks run before a release","Backing a promise with the list that proves it, instead of a badge row","Closing a product page with counts the reader can verify"],"pageTypes":["landing","marketing","about"],"howToUse":"Add a heading and 2-4 promises (a title and a sentence each). Optionally add a second heading to introduce the figure. Set the figure (for example a count) and its caption, then fill the window: a title, a short label on the right, the check names one per line, and a footer line such as a date. Add up to four small figures (a value and a label each). Every number is yours to enter; the block invents none, so generate them from the source of truth where you can. The window reads as a terminal on the page's inverted colors; the band sits on a slightly tinted ground.","pairsWith":["stop-viewer","switch-tally","cta"],"sequence":{"follows":["switch-tally","stop-viewer"],"precedes":["cta"]},"avoidWhen":["There is no list behind the figure: a bare large number is decoration, not proof","The figures cannot be checked by the reader","You need customer quotes: use a testimonial"],"register":"marketing-landing"}},{"slug":"terminal-steps","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"A \"how it goes\" band. A big heading and a short intro sit over two columns: numbered steps on the left, each with a title and a sentence or two, and a terminal pane on the right whose lines are either commands (marked with a prompt) or output. The band is inverted from the page colors.","whenToUse":["Walking a developer from nothing to a running result in a few steps, with the real output next to the prose","An onboarding or install explainer where seeing what the terminal prints builds trust","Describing steps whose commands are not public yet: describe the steps and show only output that really ran"],"pageTypes":["landing","marketing","about","docs"],"howToUse":"Add 3-6 steps (a title and a body each; use the rich body for links and inline code, or the plain text body for a sentence). Fill the terminal with a title and its lines in order, setting each line to Command or Output. Only show output that came from a real run, and say when it ran in the intro. The intro takes plain text; a blank line starts a new paragraph. When commands are not ready to publish, leave command lines out and keep the output.","pairsWith":["section-header","layer-stack","term-rows","cta"],"sequence":{"follows":["section-header"],"precedes":["layer-stack","cta"]},"avoidWhen":["The output is invented: a terminal that looks real but is not misleads the reader","The steps are not sequential: use a feature grid","There is no terminal output to show: use a numbered list in a content block"],"register":"marketing-landing"}},{"slug":"layer-stack","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"Shows what a system is made of as a stack of rows, top layer first and the runtime at the bottom. Each row has a label (set in mono, for a package or tool name), a sentence about it and a tone: accent for the layer you want noticed, neutral for the rest, optional (dashed) for layers a reader may leave out, and base (inverted) for the foundation. A heading and intro sit beside the stack.","whenToUse":["Explaining an architecture where order matters: what sits on what","An about or docs page where each layer is a package or service a reader can add or skip","Marking which parts are optional without a second diagram"],"pageTypes":["about","docs","marketing","landing"],"howToUse":"Add 3-7 rows from top to bottom. Give each a short label and one or two sentences of body; the rich body allows a link, the plain text body does not. Set tone: accent (one row at most), neutral (the default), optional for a layer that can be left out, and base for the bottom row. The first row you add is drawn at the top. Keep labels short, since they sit in a narrow column.","pairsWith":["terminal-steps","term-rows","section-header"],"sequence":{"follows":["terminal-steps"],"precedes":["term-rows"]},"avoidWhen":["The parts are peers, not layers: use a card grid","There are more than about seven layers: group them first","The order is not a real dependency order: the stack implies one"],"register":"marketing-landing"}},{"slug":"term-rows","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"A band for the choices behind something and why they were made. Each row sets one term very large on the left, with a hairline above, and a sentence or two of reasoning on the right. A heading sits over the rows on a faintly tinted ground.","whenToUse":["Explaining the choices behind a product, a stack or a method, one word each","An about page that gives reasons in the reader's terms instead of a list of features","A short glossary where each term earns its size"],"pageTypes":["about","landing","marketing","docs"],"howToUse":"Add 3-6 rows, each a term (one or two words) and a reason (one or two sentences). Write the reason as the consequence for the reader, not a definition. The term is set large, so long phrases wrap; keep them short. Pair it after a layer stack or a terminal steps band on an about page.","pairsWith":["layer-stack","terminal-steps","cta"],"sequence":{"follows":["layer-stack"],"precedes":["cta"]},"avoidWhen":["The terms need more than two sentences each: use content sections","The terms are labels with no reasoning behind them: use a plain list","There are many items: the big type stops reading as a choice"],"register":"marketing-landing"}},{"slug":"slat-deck","package":"@wabbit/tome-blocks-marketing-starter","docs":"https://wabbit.com/docs/packages/blocks-marketing-starter","usage":{"summary":"A photo-led band for two to seven items. Each is a full-height slat with its own picture. One slat is open and shows its title, one or two sentences, a short chip line and one link; the others narrow to a vertical name over a dark scrim. Hovering, focusing or tapping a slat opens it. Below 768px the slats stack and open vertically.","whenToUse":["Showing the parts of a place or an offer as pictures, where each deserves a name, a line and one link","A landing page band that lets the visitor pick the thing they came for","Two to seven items that each have a strong photograph"],"pageTypes":["landing","marketing","about"],"howToUse":"Add two to seven items, each with a photo, a name, one or two sentences, an optional chip line and one link. Give any name longer than about 24 characters a short name: the collapsed slat sets its name sideways on one line and a long one would be cut off. Write alt text that describes the photo. Pick the item to open on load with Open on load (empty opens the first). Put a section heading above the band, or fill in the block's own heading and intro.","pairsWith":["high-impact-hero","faq","cta"],"sequence":{"follows":["high-impact-hero"],"precedes":["faq","cta"]},"avoidWhen":["There are fewer than two items, or more than seven: use a gallery or a list","The items have no photographs: use term rows or a feature grid","Each item needs more than two sentences: use content sections"],"register":"marketing-landing"}},{"slug":"about","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"The primary \"who we are\" section — a headline, up to three stacked rich-text columns (text1/text2/text3), an optional image upload array, optional logos strip, optional counter array, and a CTA link. Four variants (default, centered, dark, brutalist) cover the tonal range from editorial-warm to high-contrast brand statement. The `designVersion` field is a deprecated shim; always set `_variant` directly.","whenToUse":["An about-us or company-story section that needs rich prose alongside images","A brand-values or mission statement block with supporting counters","A logos/social-proof strip directly beneath a narrative paragraph","Any page section that needs a CTA link anchored to a narrative introduction"],"pageTypes":["about","landing","marketing","dossier"],"howToUse":"Author headline as richText (h1/h2/h3 allowed). Use text1 for the primary column, text2 and text3 for secondary columns when you want a split-body layout. Add images (multiple allowed) for visual support. Add counters (value + title + description) when social proof numbers are part of the story. The link group renders a CTA; set type to \"custom\" and provide url + label. Choose `_variant`: default (editorial warm), centered (symmetrical brand statement), dark (high-contrast), brutalist (typographic punch). For a leaner named-contact card, use `team-roster` instead.","pairsWith":["stat","team-roster","gallery","timeline","media"],"sequence":{"precedes":["stat","team-roster","timeline"]},"avoidWhen":["You only need a raw text column without images or counters — use the platform `content` block","The page goal is a staff directory — use `team-roster`","You need a counter-focused layout where numbers dominate — use `stat` or `stat-bar`"],"register":"marketing-landing"}},{"slug":"contact","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"A contact section combining a richText intro (h1/h2/h3), a repeating contactBlocks array (label + value + optional iconName for email, phone, address rows), and an optional inline form (toggled by showForm + formIntro). Designed as a standalone contact section, not a thin form embed — it owns the surrounding context.","whenToUse":["A dedicated contact page or contact section with multiple info rows and an optional message form","A footer-adjacent contact info panel with phone, email, and office address","A landing page CTA section where a brief pitch precedes a contact form"],"pageTypes":["landing","about","marketing"],"howToUse":"Author richText as the section heading and intro copy. Add contactBlocks rows: each row takes a label (e.g., \"Email\"), a value (e.g., \"hello@example.com\"), and an optional iconName string your renderer maps to an icon component. Toggle showForm to reveal the inline form; add formIntro for a short sentence above the form fields. A value that is exactly one phone number or email address renders as a tel: / mailto: link. For a request band (quote, booking, enquiry), pick the `estimate` variant: richText carries the heading and intro, then fill promise (value + unit + text), callAction, hours and areas, and optionally an aside (label + a few short bold/italic paragraphs) for a note such as a confidentiality notice, shown last in the intro column. For a closing section beside a face, also set media (a portrait with alt text and an optional label), motif (a small image with alt text), primaryAction (a link-out button: label, href, newTab) and signOff (a closing line and a name, at the end of the note above the form); each renders only when set. Register the block with `contactBlock.block({ formsCollection: \"forms\" })` to let editors pick the card form (`cardForm`); the site form integration fills the data-form-id slot in the card. For a booking band that hands off to a reservation provider, pick `reserve`: set reserve.provider and reserve.urlTemplate (with {party}, {date} and {time} tokens), the times, and optionally sampleSlots (shown under sampleSlotsLabel, never as live availability), callAction and altActions; leave the provider empty for an actions-only band (e.g. pickup), where contactBlocks render as its facts row. For a standalone form without surrounding contact info, use `form` instead. Phone and email values render as tel: / mailto: links. The estimate variant's form card hosts your form through the same data-form-id slot as the form block (pass it as formSlot). The reserve variant is a no-JavaScript GET form that links out to the booking provider, with labeled sample-time chips and alternative actions; with no provider it leads with its actions. Every variant sets data-variant and data-block-variant on the root.","pairsWith":["form","about","media"],"sequence":{"follows":["about"]},"avoidWhen":["You only need an embedded Payload form with no surrounding contact info — use `form`","The section is purely a newsletter sign-up — reach for a form with a focused intro"],"register":"marketing-landing"}},{"slug":"team-roster","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"A named-member roster — an array of members each with callsign (required), rank, wing, dateJoined, dateOfPassing, portrait photo (falls back to a decorative initial), a note, and an accentColor. Supports a section-level sectionLabel, headline, subtext, and epigraph (quote displayed between the header and the member grid). Optional showFrame wraps the block in a labeled card with a dark header band. Four member variants: default (centered formal portraits), horizontal (card-per-member horizontal layout), minimal, dark. A fifth, `people`, has its own fields instead of members[]: people[] (name required, role, credential, fact, photo, photoLabel), a statement tile (text + label, and an optional link button) shown first, and emptyCells (1-based cell positions, statement included, for deliberate empty cells). The `designVersion` field is a deprecated shim; set `_variant` directly.","whenToUse":["An about page team section listing staff with portraits and roles","A memorial or tribute roster with dateOfPassing entries and an epigraph","A dossier-style \"meet the team\" section on a landing or agency page","A nested sub-section within a split-view that introduces a team or unit","A professional team (partners, practitioners, advisors) shown as tall portraits with credentials and one personal fact (the `people` variant)"],"pageTypes":["about","dossier","landing","marketing"],"howToUse":"Add members (minRows: 1); callsign is required. Fill rank and wing for role/department labeling. Upload photo (falls back to an initial avatar). Set accentColor per member for visual differentiation (primary/success/info/warning). Add an epigraph for a dedication quote displayed before the grid. Use showFrame + frameLabel when this block is one of several named sections on the page and needs a labeled container. Choose `_variant`: default for portrait-grid layouts, horizontal for card-per-row, minimal for text-only, dark for high-contrast, people for a professional team. For `people`, fill people[] instead of members, write one statement sentence for the first tile (add a link label and URL only when a button should follow it), set photoLabel when a portrait needs a disclosure (e.g. a stock stand-in), and add emptyCells only to even out the rows of a three-column grid. For a narrative \"about us\" section with images and counters rather than a named list, use `about`.","pairsWith":["about","stat","gallery","timeline"],"sequence":{"follows":["about"]},"avoidWhen":["You need a narrative brand or company story rather than a named member list — use `about`","The members have product-specific roles (course instructors) — consider the LMS pack blocks"],"register":"dossier"}},{"slug":"gallery","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"A multi-image gallery with five layout variants (overlay, carousel, card, 4-column grid, blur-vignette), per-item richText captions and per-item links, a gallery-level richText heading/tagline, an optional gallery link, and editorial controls (editorialMode, captionPlacement, breakoutMode, aspectRatioLock). Each element carries its own image, imageHeight, icon, richText, and link.","whenToUse":["A portfolio or work-samples section with multiple images that need individual captions or links","A project-showcase or case-study image strip on a marketing or landing page","An editorial article that needs a multi-image breakout (full-bleed or wide) mid-body","A client-logos or partners grid when logos need hover states or individual links"],"pageTypes":["portfolio","landing","marketing","about","editorial-article"],"howToUse":"Add elements (minRows: 1); each needs at minimum a required image upload. Set imageHeight per item (12rem–32rem) for vertical rhythm control. Set the top-level variant: \"grid\" (default 4-col) for uniform layouts, \"carousel\" for sequential browsing, \"overlay\" for darkened caption-on-hover, \"card\" for framed tiles, \"blur-vignette\" for atmospheric moody treatment. Use breakoutMode (\"wide\", \"full-bleed\") when the gallery needs to escape the body column. Turn on editorialMode and set captionPlacement to \"marginalia\" when sitting inside an editorial 14-track grid. Use aspectRatioLock to enforce uniform crops across items.","pairsWith":["media","about","timeline","stat"],"sequence":{"follows":["about","timeline"]},"avoidWhen":["You only need a single image or video — use `media`","The images are purely decorative and need no captions or links — use `media` in full-bleed mode"],"register":"marketing-landing"}},{"slug":"timeline","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"A chronological event list — a required heading followed by a sections array, each with a date, required tagline, optional icon name, optional image upload, and optional richText body (h2/h3/h4, lists). Renders as a vertical timeline spine with dated nodes. No variant axis beyond backgroundColor; content depth is controlled per section.","whenToUse":["A company or project history section with dated milestones","A roadmap or phased-plan overview with sequential events","A case-study \"how we got here\" narrative on an about or portfolio page","An editorial deep-dive section showing chronological development of a topic"],"pageTypes":["about","dossier","editorial-article","portfolio","marketing"],"howToUse":"Author heading (required). Add sections (minRows: 1): each section needs a tagline (the milestone label, required) and optionally a date, icon name, image upload, and richText body for supporting detail. The timeline renders nodes in the order sections are authored — reorder via drag in the admin. Set backgroundColor for tonal context. Use icon names your renderer maps to an icon component for visual node markers. For a grid of named members with dates, use `team-roster` instead; for a sequential stat argument, use `stat`.","pairsWith":["about","stat","media","gallery"],"sequence":{"follows":["about"]},"avoidWhen":["The entries are not ordered events — use `stat` for metric highlights or `about` for narrative prose","You need a named-person list with portraits — use `team-roster`"],"register":"dossier"}},{"slug":"stat","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"A grid of counter statistics — each stat has a counter string (e.g., \"99%\", \"$1M\"), a title label, an optional richText description, and a suffix. Supports an optional richText headline above the grid, a colorScheme (blue/green/purple/orange/red) applied to all counters, optional CTA links below the grid, and a backgroundColor for the section.","whenToUse":["A social-proof numbers section on a landing or about page (e.g., \"50+ clients, $2M revenue\")","A figures ledger where every number cites the record behind it (the `sourced` variant, with a source on each stat)","A metrics highlight mid-page to punctuate a narrative with evidence","A compact trust strip with 3–5 key performance numbers"],"pageTypes":["landing","marketing","about"],"howToUse":"Add stats (minRows: 1, maxRows: 10). Each stat requires counter (the displayed value string — include symbol, e.g. \"50+\") and title. Set suffix per item for units that follow the counter value. Add an optional richText headline for a section label above the grid. Set colorScheme to match brand tone. Add links to provide CTAs beneath the stats. Give a stat a `source` (record number, label, link) to print the record it cites; turn on `requireSource` to hide any stat that cites nothing. The `sourced` variant is the ruled ledger for such figures: clear the suffix of each stat (it defaults to \"%\"), and set `sampleLabel` only on a demo. For animated percentage bars instead of raw counter values, use `stat-bar`. For counters embedded inside a longer about narrative, the `about` block has its own counter array.","pairsWith":["about","stat-bar","timeline","gallery"],"sequence":{"follows":["about"]},"avoidWhen":["The values are percentages that benefit from visual bar animation — use `stat-bar`","Counters are part of a larger about-us narrative with images — use the counter array on `about`"],"register":"marketing-landing"}},{"slug":"stat-bar","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"An animated percentage bar chart — each stat is a label + numeric value (0–100) + suffix rendered as a horizontal progress bar. Supports optional section title and description, a colorScheme (blue/green/purple/orange/red/custom), and animation timing controls (delay and duration in ms). All bars share one color scheme; use colorScheme \"custom\" + a hex code for brand-specific fills.","whenToUse":["Displaying skill proficiency, capability ratings, or portfolio mix as visual percentage bars","A service breakdown showing relative share (e.g., \"Strategy 70%, Design 50%, Dev 80%\")","A metrics section where the bar visualization adds meaning beyond a raw number"],"pageTypes":["about","landing","marketing","portfolio"],"howToUse":"Add stats (minRows: 1, maxRows: 10). Each stat requires label and a numeric value 0–100 (the bar fill amount); suffix defaults to \"%\" but can be overridden (e.g., \"pts\", \"ms\"). Give a bar a `source` (record number, label, link) to print the record it cites under the row, and turn on `requireSource` to hide any bar that cites nothing. Set animationDelay (default 1000ms) to control when bars begin animating on scroll-enter; set animationDuration (default 800ms) for bar fill speed. For counters without bar visualization (raw numbers like \"$1M\" or \"50+ clients\"), use `stat` instead.","pairsWith":["stat","about","timeline"],"sequence":{"follows":["about"]},"avoidWhen":["The values are not percentages or are not comparative — use `stat` for raw counter strings","You need more than one color per bar — the block applies one scheme to all bars; consider splitting into multiple blocks by section"],"register":"marketing-landing"}},{"slug":"split-view","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":null},{"slug":"media","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"A single image or video embed (upload or YouTube/Vimeo URL) with aspect ratio control, layout width (small/inline/narrow/normal/fullWidth), optional caption with placement (below/marginalia/hidden), breakout mode (default/wide/full-bleed/spread), optional duotone tint, and art-directed mobile crop for spread mode. The canonical single-asset pacing block in editorial contexts.","whenToUse":["A hero or section-break image within an article or landing page body","A YouTube or Vimeo video embed with a custom thumbnail fallback","A full-bleed photographic pacing intervention between two editorial sections (max 1 per 800 words)","A narrow or inline figure with a marginalia caption in an editorial 14-track layout"],"pageTypes":["editorial-article","landing","about","marketing","blog","portfolio"],"howToUse":"Set mediaType to \"upload\" and select the media relation, or set to \"video\" and enter a YouTube/Vimeo URL (add videoThumbnail for a custom preview). Set layout for width within the body column. Use breakoutMode \"wide\" for margin-to-margin or \"full-bleed\" for a full-start/full-end span; reserve \"spread\" for paired art-directed crops (add artDirectionMobile). Toggle showCaption and set captionPlacement to \"marginalia\" when the editorial grid has sidebar columns available. Use duotoneEnabled + duotoneIntensity (0.1–0.6) for accent-tinted grayscale treatment. For multiple images side by side, use `gallery`.","pairsWith":["gallery","about","timeline","stat"],"sequence":{"follows":["about"]},"avoidWhen":["You need more than one image displayed together — use `gallery`","The asset is decorative background (no caption, no user focus) — consider inline CSS or a section background instead"],"register":"editorial"}},{"slug":"form","package":"@wabbit/tome-blocks-agency-essentials","docs":"https://wabbit.com/docs/packages/blocks-agency-essentials","usage":{"summary":"A thin Payload form embed — a required relationship to a form document (from the `forms` collection) plus an optional richText intro block (h1–h4, fixed + inline toolbar) shown above the form when enableIntro is checked. The block renders the form as-configured in Payload; all field structure, validation, and submission logic live in the linked form document.","whenToUse":["Embedding any Payload-managed form on a page (newsletter, inquiry, booking, survey)","A focused conversion block where the form is the entire content, not part of a larger contact section","Reusing the same form document across multiple pages without duplicating fields"],"pageTypes":["landing","marketing","about","faq"],"howToUse":"Select the form relationship (required). Toggle enableIntro and author introContent only when you need a headline or 1-2 sentences above the form; otherwise leave it off to let the form lead. The form slug is determined by the linked document — changing field structure means editing the form document, not this block. For a contact section that also displays phone/email rows, use `contact` instead; it has an integrated showForm toggle that embeds the same concept with surrounding context. For a closing conversion band, pick the `signup-band` variant: set eyebrow, heading, body, the form relationship, a promise line and an optional secondary link; it renders as a dark band, with a single-field form laid out inline (field and button on one row). The form itself comes from your site: pass it as formSlot, or let your form integration fill the data-form-slot / data-form-id slot (the Payload form relationship).","pairsWith":["contact","about","media"],"sequence":{"follows":["about","media"]},"avoidWhen":["You need contact info rows (email, phone, address) alongside the form — use `contact`","The page needs a full \"contact us\" narrative section — use `contact` with showForm enabled"],"register":"marketing-landing"}},{"slug":"product-card","package":"@wabbit/tome-blocks-catalog-pack","docs":"https://wabbit.com/docs/packages/blocks-catalog-pack","usage":{"summary":"A single product tile — title, description, price (with optional compare-at strike), a label badge, and an add-to-cart CTA. Renders the authored props by default; no @wabbit/tome-catalog peer required. When a consumer wires `createHydratedRenderers` from `@wabbit/tome-blocks-catalog-pack/server` AND the SKU matches an active `catalog-products` doc, title and description hydrate live over the authored fallback — anonymous-visible data only (see the /server README) — and, when the commerce layer has registered a listing source, so do the price (\"from\" when variant prices differ), a real compare-at price, the product image and a stock line. Three variants: default card, minimal (title + price only), and horizontal (image left, details right).","whenToUse":["Highlighting one product on a landing, marketing, or about page","A \"featured item\" or \"shop this\" callout inside editorial or campaign content","A single hand-picked product where a full grid would be overkill"],"pageTypes":["marketing","landing","about"],"howToUse":"Author title (required), description, price and compare-at price, SKU, an optional badge, and the CTA label/URL. The SKU is the v1 hydration lookup key: with @wabbit/tome-catalog present and `createHydratedRenderers` wired in, a matching `catalog-products` doc overlays its `title` and `excerpt` (into description) over these authored fields — nothing else. Without a registered commerce listing source, price, compare-at price, badge, and the CTA are the authored values: @wabbit/tome-catalog carries no pricing or stock field. With one, the live price and compare-at price replace the authored pair (a struck price is only ever a real saving), the optional `image` fills when empty, and a stock line shows the real availability. Choose the variant: default for a full card, minimal for a sparse price-led row, horizontal for a compact list-style item. For a set of products, use `product-grid` instead of stacking many cards — same product shape, but the grid takes the array (product-grid is not part of the v1 hydration wave).","pairsWith":["product-grid","inventory-badge","price-table","featured-product"],"sequence":{"precedes":["inventory-badge"]},"avoidWhen":["Showing several products at once — that is `product-grid` (it takes the array)","Spotlighting one product as a full-width hero — use `featured-product`","Comparing pricing tiers of a plan — use `price-table`"],"register":"marketing-landing"}},{"slug":"product-grid","package":"@wabbit/tome-blocks-catalog-pack","docs":"https://wabbit.com/docs/packages/blocks-catalog-pack","usage":{"summary":"A responsive grid of products. Static by default: a heading, a column count (2/3/4), an array of product items and a max-items cap. The `shelf` variant is the catalog shelf: an opener, a four-across row of product tiles, a dashed next-batch slot, occasion tabs and a guide tile; with the live data source it also carries the filter bar (shelves, facets with counts, chips, sort, live count, paging, a phone sheet) with the page URL holding the state.","whenToUse":["A catalog, shop, or collection page listing many products at once","A \"shop the collection\" or \"new arrivals\" section on a marketing/landing page","Any place you would otherwise stack several product cards"],"pageTypes":["marketing","landing","about"],"howToUse":"Set a heading and column count, then author the `products` array (title, price, badge, image, CTA per item); that array is what renders unless the data source is live. For a store, choose the `shelf` variant, set `dataSource` to live and give it a query (category, tag, edition, explicit ids, sort, limit); the host registers a listing source once at boot and, on a filtered shop page, passes the page URL through the render context. Turn on `showFilters` for the shop page (the left rail or a bar, `pageSize` pieces per step). With no source registered the block renders the authored list, so it is safe everywhere. Choose the static variant by density: default for standard cards, compact for a dense catalog wall, editorial for a varied masonry feel. This is the multi-product block: for a single product use `product-card`, and for a hero spotlight use `featured-product`.","pairsWith":["product-card","category-strip","featured-product","inventory-badge"],"sequence":{"follows":["category-strip","featured-product"]},"avoidWhen":["You only have one product to show — use `product-card`","The goal is to spotlight one hero product — use `featured-product`","Navigating between categories rather than listing products — use `category-strip`"],"register":"marketing-landing"}},{"slug":"category-strip","package":"@wabbit/tome-blocks-catalog-pack","docs":"https://wabbit.com/docs/packages/blocks-catalog-pack","usage":{"summary":"A wayfinding row of product categories — a heading and an array of category tiles (label, slug, URL, icon), scrollable or wrapped. Renders the authored labels/URLs by default; no @wabbit/tome-catalog peer required. When a consumer wires `createHydratedRenderers` from `@wabbit/tome-blocks-catalog-pack/server`, each tile's `slug` is looked up (one batched query) against `catalog-categories` and a match overlays the live category name onto the label — the authored URL always stays the route (there is no live \"route\" field), and the `contents` variant additionally takes a live order number and product count per category from the commerce layer's listing source when one is registered. Four variants: scrollable default tiles, minimal text links, a fixed-column grid with thumbnails, and `contents`, numbered rows ruled like a printed contents page (number, title, one line and a live piece count on one shared baseline, under the shared opener).","whenToUse":["A shop or catalog landing page that needs top-level category navigation","A \"browse by category\" row above a product grid","A homepage entry point that routes visitors into product collections"],"pageTypes":["marketing","landing","about"],"howToUse":"Author a `categories` array (label required; optional slug, URL, and icon/emoji); toggle horizontal scrolling. The slug is the v1 hydration lookup key: with @wabbit/tome-catalog present and hydration wired in, a matching `catalog-categories` doc overlays its live `name` onto the tile's label — nothing else. The authored URL is always the route used (there is no live route to overlay it with), and an unmatched slug simply keeps its authored label. Choose the variant: default for icon tiles in a scroll strip, minimal for a clean text-link row, grid for a thumbnailed category board, contents for a numbered shop contents page (add a `line` per category, an opener kicker and link, and `showCount` for the live total). This is navigation — it routes to product listings rather than displaying products, so it typically sits above a `product-grid`.","pairsWith":["product-grid","product-card","featured-product"],"sequence":{"precedes":["product-grid","featured-product"]},"avoidWhen":["You want to display products, not links to category pages — use `product-grid`","There is only one category — a strip of one is pointless","The page needs a product spotlight, not navigation — use `featured-product`"],"register":"structural"}},{"slug":"price-table","package":"@wabbit/tome-blocks-catalog-pack","docs":"https://wabbit.com/docs/packages/blocks-catalog-pack","usage":{"summary":"A side-by-side pricing comparison — up to five tiers, each with a name, price, billing note, description, a per-tier feature checklist (included/excluded), a recommended-highlight flag, and its own CTA. Fully authored content with no catalog peer required. Three variants: default multi-tier table, minimal single highlighted plan, and dark with an accent on the recommended tier.","whenToUse":["A pricing page comparing plan or package tiers where features differ by tier","A \"choose your plan\" section where the visitor picks among recurring options","A product page offering good/better/best variants of the same offering"],"pageTypes":["pricing","landing","marketing"],"howToUse":"Author a `tiers` array (1-5): each tier needs a name, price, and CTA label/URL, plus optional price-note, description, a features array (each with an included checkbox), and a highlight flag for the recommended plan. Choose the variant: default for two-to-four comparable tiers, minimal when there is effectively one plan to present, dark to make the table the page's focal band. Use this when features-per-tier is the decision; for a single product's buy action use `product-card` or `featured-product`. Fully static: no @wabbit/tome-catalog peer required.","pairsWith":["featured-product","product-card","product-grid","category-strip"],"sequence":{"follows":["featured-product"]},"avoidWhen":["There is a single offer with one price — a `product-card` or `featured-product` CTA is enough","You are listing distinct products rather than tiers of one offering — use `product-grid`","Tiers have identical features and differ only in price — a simple list beats a comparison table"],"register":"marketing-landing"}},{"slug":"inventory-badge","package":"@wabbit/tome-blocks-catalog-pack","docs":"https://wabbit.com/docs/packages/blocks-catalog-pack","usage":{"summary":"A small inline stock-status indicator — In Stock / Low Stock / Out of Stock, with a low-stock threshold and an optional exact count. Shows the authored status by default; no @wabbit/tome-catalog peer required. When the commerce layer has registered an availability source and a consumer wires `createHydratedRenderers` from `@wabbit/tome-blocks-catalog-pack/server`, the status (and the remaining count, when stock is low) follows the SKU's real availability. Three variants: colored pill default, text-only minimal, and a with-count form (\"Only 3 left\").","whenToUse":["Inline beside a product title or price to signal availability","A scarcity cue (\"Low Stock\") on a product or featured-product block","A catalog row where stock state affects whether the visitor can buy"],"pageTypes":["marketing","landing","about"],"howToUse":"Provide a SKU, the status to show, a low-stock threshold, and an optional exact count for the with-count variant. The SKU is the live lookup key: with an availability source registered by the commerce layer and `createHydratedRenderers` wired in, the status follows the SKU's real availability (in stock, low stock, out of stock), the count shows only when stock is low and is cleared otherwise (a stale authored count never sits against a live state), and an untracked or unknown SKU keeps the authored values. @wabbit/tome-catalog itself carries no stock field, so without a registered source the badge stays authored. Choose the variant: default for a colored pill, minimal for an unobtrusive text status, with-count when exact remaining quantity adds urgency. This is a status accent, not a standalone section — pair it with a product block rather than placing it alone.","pairsWith":["product-card","featured-product","product-grid"],"sequence":{"follows":["product-card","featured-product"]},"avoidWhen":["As a standalone block with no product context — it is an accent on a product","Stock state is irrelevant to the page (e.g. digital/always-available goods)","You need full pricing or purchase UI — use `product-card` or `price-table`"],"register":"application"}},{"slug":"featured-product","package":"@wabbit/tome-blocks-catalog-pack","docs":"https://wabbit.com/docs/packages/blocks-catalog-pack","usage":{"summary":"A full-width hero spotlight for one product — eyebrow, title, description, price with compare-at strike, a highlights list, a badge, and a primary CTA. Renders the authored props by default; no @wabbit/tome-catalog peer required. When a consumer wires `createHydratedRenderers` from `@wabbit/tome-blocks-catalog-pack/server` AND the SKU matches an active `catalog-products` doc, title and description hydrate live over the authored fallback — anonymous-visible data only — and, when the commerce layer has registered a listing source, so do the price (\"from\" when variant prices differ), a real compare-at price, the product image and a stock line. Four variants: split (image left / details right), centered (image above, details below), dark for a premium treatment, and annotated (the shared opener, an in-use plate, the product's line and margin notes beside the plate).","whenToUse":["The hero of a product or campaign landing page built around a single item","A \"product of the month\" or new-release spotlight above the catalog grid","Any place one product deserves full-width emphasis rather than a card"],"pageTypes":["marketing","landing","about"],"howToUse":"Author title (required) and CTA label (required), plus eyebrow, description, price/compare-at, SKU, a highlights array (up to 8), an optional badge, and the CTA URL. The SKU is the v1 hydration lookup key: with @wabbit/tome-catalog present and `createHydratedRenderers` wired in, a matching `catalog-products` doc overlays its `title` and `excerpt` (into description) over these authored fields — nothing else. Without a registered commerce listing source, price, compare-at price, highlights, badge, and the CTA all stay authored: @wabbit/tome-catalog carries no pricing/stock/highlights field. With one, the live price and compare-at price replace the authored pair, the image fills when empty, and the stock line shows the real availability. The annotated variant adds an in-use frame (`media`, 3:2), margin `notes`, and an opener link. Choose the variant: split for a classic image-and-details hero, centered for a symmetrical full-width feel, dark for premium contrast. This is the single-product hero — for several products use `product-grid`, and for a compact single item use `product-card`. Typically the lead block, followed by a grid of related products.","pairsWith":["product-grid","product-card","inventory-badge","price-table","category-strip"],"sequence":{"precedes":["product-grid","price-table","inventory-badge"]},"avoidWhen":["Showing many products — use `product-grid`; this block is for one hero item","A compact list-style product entry — use `product-card`","Comparing plan tiers rather than spotlighting a product — use `price-table`"],"register":"marketing-landing"}},{"slug":"product-gallery","package":"@wabbit/tome-blocks-catalog-pack","docs":"https://wabbit.com/docs/packages/blocks-catalog-pack","usage":{"summary":"The image gallery of a product page: every frame cropped to one ratio (4:5 by default), one frame showing at a time, a static thumbnail row to choose from and a cross-fade between them; on phones the frames swipe with scroll snap and a row of dots. The first frame loads first and the rest load invisibly, so changing frames never waits. Renders its authored frames by default; no @wabbit/tome-catalog peer required. When a consumer wires `createHydratedRenderers` from `@wabbit/tome-blocks-catalog-pack/server` and the SKU (or slug) matches an active product, that product's catalog media frames (the primary first, then by sort order) replace the authored ones — anonymous-visible data only.","whenToUse":["The left column of a product page, beside the buy box","Any place one product needs several images at one steady ratio","A product template that maps the product's media in"],"pageTypes":["marketing","landing"],"howToUse":"Author frames (an image and a description of what it shows, in order), or set the SKU or slug and let the catalog supply them. Pick the frame ratio: 4:5 portrait suits most objects, 1:1 or 3:2 suit flatter ones. Every frame is cropped to that one ratio so the page does not shift. The first frame is the lead image. On wide screens the gallery stays in view while the page scrolls past; on phones the frames swipe. A single frame renders with no thumbnails or dots.","pairsWith":["featured-product","inventory-badge","product-grid"],"sequence":{"precedes":["featured-product","product-grid"]},"avoidWhen":["Showing many different products — use `product-grid`","A single decorative image with no product behind it — use the page's image or media blocks"],"register":"structural"}},{"slug":"annotated-page","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"Rows of prose, each with an automatic paragraph number and its own margin notes. A note is one of nine kinds (note, person, citation, fee, timeline, jurisdiction, reviewed, exercise, footnote); a citation note is linked from a superscript marker typed as [^n] in the paragraph. The Voice variant reads as an essay: no paragraph numbers, every note numbered and anchored in the text, footnotes collected at the end.","whenToUse":["A service, practice or policy page where each claim needs a source, a responsible person, a price or a date beside it","Reference prose a reader cites back by paragraph number","Pages where footnotes at the bottom would separate a claim from its proof"],"pageTypes":["docs","dossier","editorial-article","about"],"howToUse":"Add one row per paragraph. Give a row a subheading to open a new part. Add notes to the row they belong beside; for a citation, set the note kind to citation and its citationNumber to n, and type [^n] in the paragraph where the superscript goes. A person note can be initials only (no photo). Leave the block heading empty when the page head above already names the page. For the Voice variant, notes are numbered for you; footnote notes are not shown beside the paragraph but collected in a list at the end.","pairsWith":["info-panel","editorialSection"],"sequence":{"follows":["info-panel"]},"avoidWhen":["Prose with no notes: use editorialSection or a plain rich-text block","One rail of facts for a whole section rather than per paragraph: use info-panel or editorialSpread","Inside a layout grid cell: the block needs the page margins"],"register":"editorial"}},{"slug":"compareColumns","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A strict two-column A vs B layout — each column carries a label, a sense (positive/negative/neutral), and a list of line items. The positive column gets an accent treatment; the negative column gets a muted one. Use when the editorial goal is explicit contrast between two options, approaches, or time periods.","whenToUse":["Comparing two service tiers, approaches, or outcomes side-by-side","A \"Before vs After\" or \"Old way vs New way\" editorial contrast","Decision support where one option is clearly favored — set that column sense to positive"],"pageTypes":["editorial-article","landing","marketing","dossier","about"],"howToUse":"The block enforces exactly two columns (minRows/maxRows: 2). Label each column, set its sense (positive, negative, or neutral), and add items as plain text strings. The column set to positive receives the accent treatment automatically — only one column should be positive. Use breakoutWidth to control how wide the block sits in the editorial grid; default is \"content\". For a free-form multi-column text layout use `content` instead.","pairsWith":["metric-strip","info-panel","feature"],"sequence":{"precedes":["message-panel"]},"avoidWhen":["More than two options — use a table or a `status-board` for multi-item grids","Free-form richText columns where widths differ — use `content` with column sizing"],"register":"editorial"}},{"slug":"data-hero","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":null},{"slug":"editorialSection","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":null},{"slug":"editorialSpread","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A full-bleed band pairing a narrow living rail (kicker, index, footnotes, stats) with a main reading column — the workhorse of long-form editorial pages.","whenToUse":["Long-form articles or dossiers that want marginalia alongside the reading flow","When sections need a running rail for asides, footnotes, or section indices"],"pageTypes":["editorial-article","dossier","docs"],"howToUse":"Pick a rail placement via the variant (rail-left default / rail-right / rail-top / rail-both / emphasis). The main column is a nested-blocks surface — compose prose, figures, and pull-quotes inside it. Alternate the appearance value between consecutive spreads for the F-system rhythm. Use editorialSection (no rail) for ordinary prose that does not need marginalia.","pairsWith":["editorialSection","editorialOpener","editorialFigure","editorialFootnotes"],"sequence":{"follows":["editorialOpener"],"precedes":["editorialColophon"]},"avoidWhen":["Marketing landing pages (use the marketing-starter hero/feature/CTA family)","Short prose with no marginalia — use editorialSection instead to avoid an empty rail"],"register":"editorial"}},{"slug":"feature","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A multi-variant feature showcase that pairs a hero image with an array of USP cards, steps, a full-bleed statement, numbered stop cards, or an ink stat band. Five layout modes — Wing Grid (image + USP card grid), Process Steps (numbered flow), Manifest (statement), Walk Strip (numbered route cards), and Ledger Dark (full-bleed stat band) — cover the core marketing \"why us / how it works / we stand for X / prove it with numbers\" surface area.","whenToUse":["Showcasing product capabilities or service differentiators with supporting images","Communicating a sequential process or methodology as numbered steps","A manifesto-style statement section that anchors a page's value proposition","A numbered walkthrough of concrete stops (routes, milestones, deliverables) each with its own link","A dark, full-bleed band of hard numbers/stats with an honesty note underneath"],"pageTypes":["landing","marketing","about","portfolio"],"howToUse":"Select a variant via `_variant`: default (Wing Grid) for an image beside a grid of USP cards — set cardLayout to left or top. steps for a numbered process flow — links are hidden in this mode. manifest for a full-bleed statement — links appear as CTAs. walk-strip for numbered stop cards — each USP item can carry its own link (shown as the route link under the card body). ledger-dark for a full-bleed ink stat band — each USP tagline becomes a numeral (a tagline of \"96 free\" splits into \"96\" with a superscript \"free\"); the block-level `note` field (Ledger Dark only) renders as a ruled honesty-note row under the grid; seed `columnSpan` as `1 / -1` for full bleed. Each USP item takes a tagline, richText, and optional image. The top-level richText is the block's headline/intro. Note: `designVersion` is a legacy shim — always set `_variant` on new content.","pairsWith":["split-panel","metric-strip","compare-columns","info-panel"],"sequence":{"follows":["data-hero"],"precedes":["compare-columns","metric-strip"]},"avoidWhen":["A single image-plus-text two-column layout — use `split-panel` for that shape","Pure prose without USP items — use the `content` or `info-panel` block"],"register":"marketing-landing"}},{"slug":"info-panel","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A two-zone layout pairing richText prose with a structured key-facts sidebar. The sidebar carries label/value pairs with optional status colors and a related-links list; the sidebar can stick to the viewport while the prose scrolls. A full-width stacked layout drops the sidebar when marginalia aren't needed.","whenToUse":["An \"about this entity\" or briefing section where quick-reference facts (location, status, date) sit beside descriptive prose","Dossier or intelligence-report pages where the sidebar holds metadata the reader glances at while reading","Any richText block that benefits from a scannable key-facts column without going to a full editorialSpread rail"],"pageTypes":["dossier","editorial-article","about","docs","portfolio"],"howToUse":"Use variant default for the prose+sidebar layout — add keyFacts label/value pairs, set status colors on values that need signaling (success, warning, destructive, info, stat), and optionally enable stickyPanel so the sidebar tracks scroll. Add relatedLinks for cross-navigation. Set sectionLabel as a mono eyebrow (e.g. \"ABOUT · OVERVIEW\"). Use variant dark for a dark-surface treatment. For full-width stacked prose without a sidebar, the legacy full-width designVersion drops the sidebar fields. Note: `designVersion` is a legacy shim — set `_variant` on new content.","pairsWith":["split-panel","metric-strip","status-board","compare-columns"],"sequence":{"follows":["data-hero","split-panel"]},"avoidWhen":["Long multi-section prose requiring a running marginalia rail — use `editorialSpread` instead","Only a headline + CTA with no key facts — use `feature` or `split-panel`"],"register":"dossier"}},{"slug":"message-panel","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A styled callout that renders a single message at one of three priority levels — Info (blue), Warning (orange), or Urgent (red) — with optional source attribution, category label, timestamp, and an image. Two design modes: left-border accent for inline callouts, and full tinted background for stronger interruption.","whenToUse":["Inlining an important notice, system alert, or announcement inside a page without breaking the editorial flow","Quoting or surfacing a real communication (email, memo, alert) in a dossier or report","Drawing attention to a time-sensitive update with a visible priority signal"],"pageTypes":["editorial-article","dossier","docs","about"],"howToUse":"Set priority (INFO, WARNING, or URGENT) — this drives the color scheme and default header label. Override headerLabel if the default (\"MESSAGE\" / \"PRIORITY ALERT\") doesn't fit. Author the message body in the richText field. Add transmissionSource for attribution and timestamp for temporal context. For an inline image alongside the message set image and imagePosition (left or right). Use variant default (left-border) for subtle callouts; minimal for a borderless large-type treatment. Note: `designVersion` is a legacy shim — set `_variant` on new content.","pairsWith":["info-panel","status-board","metric-strip"],"sequence":{"follows":["info-panel","split-panel"]},"avoidWhen":["Multiple stacked alerts — prefer a `status-board` to list many status items at once","Long prose commentary that isn't truly a message or alert — use `info-panel` or `content`"],"register":"editorial"}},{"slug":"metric-strip","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A horizontal row of up to 6 labeled metric cells, each showing a large value, an optional sub-label, a delta indicator (up/down arrow), and a status color. A section label and report date anchor the strip in time; optional summary prose sits below the row for brief interpretation.","whenToUse":["Leading a dossier or report section with key performance numbers at a glance","Anchoring a landing page with social-proof stats (clients served, uptime, revenue)","Summarizing a time-boxed period (Q4, sprint, campaign) with 2-6 headline numbers"],"pageTypes":["dossier","landing","marketing","about","editorial-article"],"howToUse":"Add 1-6 metric items. For each: set label (e.g. \"PARTICIPANTS\"), value (e.g. \"127\"), optional sublabel for a secondary descriptor, delta (NONE/UP/DOWN) for trend signaling, and color (default/success/stat/warning/destructive/info) for semantic emphasis. Set operationLabel as the section header (e.g. \"Q4 Performance Review\") and reportDate to timestamp the data. Add summary prose if the numbers need a sentence of context. Use variant dark for a dark-surface glowing-value treatment.","pairsWith":["data-hero","info-panel","compare-columns","status-board"],"sequence":{"follows":["data-hero","feature"],"precedes":["info-panel","status-board"]},"avoidWhen":["More than 6 metrics — split into two strips or use a `status-board` for a card grid","Narrative prose alongside the numbers is the main content — use `info-panel` with a key-facts sidebar"],"register":"dossier"}},{"slug":"split-panel","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A 50/50 image-plus-text split with an optional collapsed data panel (label/value pairs with status colors), an optional image caption (freeform or structured location+timestamp+credit), and an optional author's aside. Two skin modes — light and dark scanline — cover standard and high-contrast editorial contexts.","whenToUse":["A product, person, or place introduction that needs one strong image beside descriptive prose","A dossier \"subject at a glance\" section where key facts sit in the collapsible data panel","An editorial spread segment pairing a documentary photo with contextual body copy"],"pageTypes":["dossier","editorial-article","about","portfolio","landing"],"howToUse":"Image is required. Set imagePosition (left or right) for layout direction. Author eyebrow, richText, and optional ctaLabel/ctaUrl for the text side. Toggle intelPanel.enabled to show a key-facts sidebar beneath the text, then add label/value items with status colors. Enable caption for a freeform description or a structured location+timestamp+credit. Enable aside for a pull-quote-style author annotation. Use variant dark with enableScanline for a cinematic CRT-style image treatment. Note: `designVersion` is a legacy shim — set `_variant` on new content.","pairsWith":["info-panel","metric-strip","feature","data-hero"],"sequence":{"follows":["data-hero"],"precedes":["info-panel","metric-strip"]},"avoidWhen":["Multiple images in a grid — use `status-board` (image card grid) or `feature` (Wing Grid) instead","No image is available — `info-panel` or `content` handles prose-only layouts better"],"register":"editorial"}},{"slug":"status-board","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A labeled card grid where each card carries a title, status badge (Active/Completed/Scheduled/Canceled), optional category string, date, link URL, and thumbnail image. Two layout modes — Image Card Grid (2-4 columns) and Compact List Rows — handle visual catalogs and dense status lists respectively. A section header with an optional \"View All\" link anchors the board.","whenToUse":["Displaying a collection of work items, case studies, or projects with status signals","A \"recent items\" or \"latest work\" module on a portfolio or dossier page","A compact ops-style status list showing pipeline items with active/completed/scheduled states"],"pageTypes":["portfolio","dossier","about","editorial-article","marketing"],"howToUse":"Set label as the section header (e.g. \"RECENT PROJECTS\"). Add cards: title is required; set status for the badge color, category for a descriptor string, date for temporal context, and url to make the card linkable. Add image for the Image Card Grid variant — images are ignored in Compact List Rows. Set columns (2/3/4) in card grid mode. Add viewAllUrl/viewAllLabel if there is a full listing page. Override badge for non-status labels like \"NEW\" or \"UPDATED\". Use variant minimal for a hairline-separated compact list.","pairsWith":["metric-strip","info-panel","message-panel"],"sequence":{"follows":["metric-strip","data-hero"]},"avoidWhen":["A single highlighted item — use `split-panel` or `feature` for a focused showcase","A two-option A/B comparison — use `compare-columns` instead"],"register":"dossier"}},{"slug":"text-reveal","package":"@wabbit/tome-blocks-editorial-pack","docs":"https://wabbit.com/docs/packages/blocks-editorial-pack","usage":{"summary":"A full-width statement block that sets a short text on its own band. The word-by-word scroll reveal the name promises is not wired yet — the text renders fully visible. Acts as an editorial pacing interstitial — a Breakout D moment that resets visual tempo between dense content sections. Not prose; for statement-level copy only.","whenToUse":["Marking a major thematic boundary between two editorial sections (e.g. from problem to solution)","Placing a manifesto-style sentence or bold claim mid-article to re-engage reader attention","A section opener that earns space before the reader encounters a dense table or data block"],"pageTypes":["editorial-article","dossier","marketing","about","landing"],"howToUse":"Author a single statement or short paragraph in the text field — this is the reveal content, not a prose block (avoid multiple paragraphs). Set maxWidth (sm/md/lg/xl) to control the measure. Set maxHeight to determine how much viewport scroll space the animation consumes (80vh default for a full pacing beat). Enable invertedTheme for the characteristic dark-background editorial treatment. Add an optional title eyebrow above the text. Use statementOnly to constrain to a single line with no wrapping. Apply max once per 800 words — it shares the Breakout D budget with full-bleed media blocks.","pairsWith":["split-panel","info-panel","metric-strip"],"sequence":{"follows":["info-panel","compare-columns"],"precedes":["split-panel","status-board"]},"avoidWhen":["Paragraph-length prose — this block is for statements, not body copy; use `content` or `info-panel`","Back-to-back reveals — max one per 800 words; stacking them kills the pacing effect"],"register":"editorial"}},{"slug":"course-card","package":"@wabbit/tome-blocks-lms-pack","docs":"https://wabbit.com/docs/packages/blocks-lms-pack","usage":{"summary":"A single course tile — image, title, instructor, level, rating, and an enroll CTA. Fully static — renders the authored props; no @wabbit/tome-lms peer required. Three variants (default, minimal title-and-CTA, featured hero with rating) cover the range from catalog row to spotlight.","whenToUse":["Surfacing one course on a landing, about, or program page where the course is the call to action","A \"featured course\" or \"start here\" highlight on a course-catalog or homepage","Cross-linking a related course from inside an article or lesson page"],"pageTypes":["landing","about","docs","marketing"],"howToUse":"Author title (required), instructor, duration, level, rating, image, and enroll URL/label — these are the authored floor, always rendered as-is when hydration is absent. Optionally set `courseSlug` to a live @wabbit/tome-lms course: when a consumer wires `@wabbit/tome-blocks-lms-pack/server`'s createHydratedRenderers into their components map, live title/level/featuredImage/instructor overlay these fields at render time (v1 hydration matrix — see the pack README). Description, price, and enrollment count are NOT hydrated in v1 (richText/enum mismatch, third-layer catalog dependency, and anonymous-access limits respectively — see README). Pick a variant via the `_variant` axis: default for a full card with image and description, minimal when you only need title + instructor + CTA in a tight space, featured for a large hero tile that leads with image and rating, offer for a purchase card (kicker, price with a note, a button label that carries {price}, and a line under it; no image or rating). For a wall of courses, repeat the card or reach for a grid block rather than stacking many featured tiles.","pairsWith":["lesson-list","instructor-card","enrollment-cta","progress-bar"],"sequence":{"precedes":["lesson-list","instructor-card","enrollment-cta"]},"avoidWhen":["Listing many courses at once — repeat the card in a grid; a single Course Card is for one course","You need the full curriculum breakdown — that is `lesson-list`, not the card","The page goal is the purchase decision with price and guarantee — use `enrollment-cta`"],"register":"application"}},{"slug":"lesson-list","package":"@wabbit/tome-blocks-lms-pack","docs":"https://wabbit.com/docs/packages/blocks-lms-pack","usage":{"summary":"The course curriculum — modules and their lessons with per-lesson duration, type (video/article/quiz/assignment), and free-preview flags, plus an optional total-duration readout. Renders the authored module/lesson arrays; no @wabbit/tome-lms peer required. Four variants (numbered default, compact title-and-duration rows, accordion grouped by module, and open: every module open, lessons numbered across the course, with module totals and a locked state).","whenToUse":["A course landing or sales page that needs to show \"what you will learn\" as a structured syllabus","A docs-style curriculum page where lessons group under modules","Marking certain lessons as free-preview to pull prospects into enrollment"],"pageTypes":["landing","docs","about","marketing"],"howToUse":"Author a `modules` array, each with a title and a nested `lessons` array (title required; optional duration, type, and a free-preview checkbox); set the heading and toggle the total-duration readout — this structure is the authored floor, always rendered as-is when hydration is absent. Optionally set `courseSlug` to a live @wabbit/tome-lms course: when a consumer wires `@wabbit/tome-blocks-lms-pack/server`'s createHydratedRenderers into their components map, the live curriculum (lesson titles, order, lock state) replaces `modules` at render time: grouped by module with gated lessons marked locked for the `open` variant (or for any variant when the site passes `groupByModule`), and flattened into a single ordered list otherwise — see the pack README. The `open` variant also reads `locked` and `reason` on authored lessons, and prints module totals, a total line and a counts line, each computed from the lessons shown. Only anonymous-visible lesson metadata is ever read — never gated lesson content. Choose the variant by length: default for a numbered overview, compact for a dense long syllabus, accordion when there are many modules and you want collapsible sections. Sits naturally below a course-card or hero and above the enrollment CTA.","pairsWith":["course-card","progress-bar","instructor-card","enrollment-cta"],"sequence":{"follows":["course-card"],"precedes":["enrollment-cta","instructor-card"]},"avoidWhen":["You only need a one-line \"12 lessons\" stat — that is a metric, not the full list","The content is a flat article rather than a structured course — use an editorial list","Showing learner progress percentage — that is `progress-bar`"],"register":"application"}},{"slug":"progress-bar","package":"@wabbit/tome-blocks-lms-pack","docs":"https://wabbit.com/docs/packages/blocks-lms-pack","usage":{"summary":"A single learner-progress indicator — a labeled bar with an optional percentage and status line (\"3 of 12 lessons complete\"). Fully static — always pinned to the authored percent; no @wabbit/tome-lms peer required. Three variants: horizontal default, thin minimal bar, and a circular donut with a central percentage.","whenToUse":["An authenticated course or dashboard page showing how far a learner has gotten","A \"resume where you left off\" prompt that needs a visual completion cue","A module header that shows progress through that module"],"pageTypes":["docs","about","landing"],"howToUse":"Set a label, the percent to show (0-100), and an optional status string; toggle whether the label and percentage show — the authored percent is the only figure shown today, and stays that way in v1. Deliberately excluded from the v1 hydration wave (`@wabbit/tome-blocks-lms-pack/server`): a learner's real progress (`CourseEnrollment.overallProgress`) is per-user data, and v1 hydration only ever runs anonymous, unauthenticated queries — see the pack README's \"Hydration (v1)\" section for the v2 trigger (an authenticated principal threaded through the resolver contract). Choose the variant by emphasis: default for a labeled inline bar, minimal for an unobtrusive thin bar inside a list or header, circular when progress is the focal stat (e.g. a dashboard ring). This is a status readout, not a navigation or content block — keep it small and near the thing it measures. Fully static: no @wabbit/tome-lms peer required.","pairsWith":["lesson-list","course-card","quiz-summary"],"sequence":{"follows":["course-card"],"precedes":["lesson-list"]},"avoidWhen":["On a marketing/sales page to a logged-out visitor — there is no learner to measure","You want the lesson-by-lesson breakdown — that is `lesson-list`","Reporting a quiz score rather than course completion — use `quiz-summary`"],"register":"application"}},{"slug":"quiz-summary","package":"@wabbit/tome-blocks-lms-pack","docs":"https://wabbit.com/docs/packages/blocks-lms-pack","usage":{"summary":"A quiz-result panel — the score, a pass/fail verdict against a passing threshold, tailored pass/fail messages, an optional category breakdown, and a retake link on fail. Fully static — always shows the authored score; no @wabbit/tome-lms peer required. Three variants: default (score + badge + breakdown), minimal (score and verdict only), detailed (question-by-question review).","whenToUse":["An assessment-results page shown after a learner submits a quiz","A module checkpoint that reports the learner's standing and offers a retake","A certification gate that needs to show pass/fail clearly"],"pageTypes":["docs","about"],"howToUse":"Set the quiz title, the authored score, a passing-score threshold, and the pass/fail messages — the authored score is the only source shown today. @wabbit/tome-lms is not wired in yet; the isLmsLayerPresent/resolveLmsLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this panel to show the learner's actual attempt. Choose the variant by depth: minimal for a compact verdict, default for score plus category breakdown, detailed for a full per-question review. This is an outcome block — show it after an attempt, not as marketing.","pairsWith":["progress-bar","lesson-list","enrollment-cta"],"sequence":{"follows":["lesson-list"]},"avoidWhen":["There is no quiz attempt to report — this block needs a result, real or static","Tracking overall course completion rather than a single quiz — use `progress-bar`","Marketing a course to logged-out visitors — nothing to summarize yet"],"register":"application"}},{"slug":"instructor-card","package":"@wabbit/tome-blocks-lms-pack","docs":"https://wabbit.com/docs/packages/blocks-lms-pack","usage":{"summary":"A single instructor profile — avatar, name, title, bio, a list of credentials, and social links. Pure authored content (no live LMS dependency). Five variants: default horizontal layout, minimal (avatar, name, title only), editorial (large avatar with full bio in a magazine column), letter (a small face and name in a rail beside a printed letter, for a lead teacher) and one-line (a small face and one paragraph, for a second teacher).","whenToUse":["A \"meet your instructor\" section on a course landing or sales page","An about or team page introducing the people behind a program","Establishing authority/credibility next to the curriculum and enrollment ask"],"pageTypes":["about","landing","marketing","docs"],"howToUse":"Author name (required), title, bio, a credentials array (up to 6), and social links (platform + URL, up to 5). Choose the variant by role on the page: minimal for a compact byline, default for a standard profile beside other content, editorial when the instructor's story carries the section and deserves a full bio column. For multiple instructors, repeat the card. Works well as a trust beat between the curriculum and the enrollment CTA.","pairsWith":["course-card","lesson-list","enrollment-cta"],"sequence":{"follows":["lesson-list"],"precedes":["enrollment-cta"]},"avoidWhen":["Listing a whole faculty roster compactly — repeat the minimal variant or use a team grid","The page is about the course outcome, not the people — lead with curriculum and CTA","You need course content rather than a person — use `course-card` or `lesson-list`"],"register":"dossier"}},{"slug":"enrollment-cta","package":"@wabbit/tome-blocks-lms-pack","docs":"https://wabbit.com/docs/packages/blocks-lms-pack","usage":{"summary":"The enroll-now conversion block — heading, price with note, an included-features list, the enroll button, and an optional trust/guarantee line. The default, minimal and dark variants are fully static: the button always targets the authored URL. Three more variants (split, buy-box, closing) can read the live course, price and totals when courseSlug is set and the server renderers are wired. Six variants: centered default, minimal banner (heading + price + button), dark for high-contrast emphasis, split (outcomes beside the price), a sticky buy-box, and a one-sentence closing.","whenToUse":["The decision point on a course sales/landing page where the visitor enrolls","A closing band after the curriculum, instructor, and proof have been presented","A standalone \"ready to start?\" banner mid-page or in a sticky footer","A sticky price column beside the syllabus (buy-box)"],"pageTypes":["landing","marketing","about"],"howToUse":"Author the heading (required), price and price-note, the included-features array (up to 10), the CTA label/URL (label required), and an optional guarantee line. For the default, minimal and dark variants the URL is the only enrollment target. For split, buy-box and closing, set courseSlug to read the live price (the newest active one-time price of the course's catalog product, only when it is what checkout would charge), outcomes, modules, lessons, total time, prerequisite and first free lesson; the action can link a ctaHrefTemplate built from the product slug. A string with an unresolved token (for example {price}) renders nothing rather than a half sentence, and totals print only from live data. Live enrollment state (open or closed) is still not read: an anonymous query cannot tell a closed course from an unpublished one. See the pack README's \"Hydration (v1)\" section. Choose the variant by weight: default for a full feature-listed offer, minimal for a compact banner where the offer is already understood, dark to make the close pop against the page, split to set what the student will be able to do beside the price, buy-box for a sticky column beside the syllabus, closing to end a page with one action. This is the closer — place it after the value has been built, and give it one clear action.","pairsWith":["course-card","lesson-list","instructor-card","quiz-summary"],"sequence":{"follows":["lesson-list","instructor-card","course-card"]},"avoidWhen":["Early on the page before any value is established — earn the ask first","You are comparing multiple plans/tiers — that is a pricing table, not a single CTA","There is no enrollment action yet (content still in development) — use a content block"],"register":"marketing-landing"}},{"slug":"course-index","package":"@wabbit/tome-blocks-lms-pack","docs":"https://wabbit.com/docs/packages/blocks-lms-pack","usage":{"summary":"A typeset list of courses: each row carries the name, level, teacher, lesson count, total time and price. Group by subject, name a course that begins every subject (the interchange), and offer filters that are plain GET-parameter links, so everything works without script. Reads live courses through the server wrapper, or an authored list.","whenToUse":["A school's catalog or home page that lists every course as one calm index","A \"courses in the order you might take them\" list, where the editor sets the order","A filterable course list that must work without JavaScript"],"pageTypes":["landing","marketing","docs"],"howToUse":"Pick the source. With `courses` (the default), list the courses you want in order under `courses[]` (each with an optional one-line summary), or leave it empty for every published course; this needs the server wrapper from `@wabbit/tome-blocks-lms-pack/server` and renders nothing without it. With `authored`, fill `rows[]` by hand. Set `groupBy` to `subject` to group, `interchange` for courses that begin every subject, and `filters` for the filter row. The route passes `context={{ searchParams }}` to RenderBlocks so the filter links know the current query (see `readCourseIndexContext`). Totals and prices are read, never typed; lesson counts and times come from the course outline, and a price prints only when the catalog and economy layers resolve one.","pairsWith":["course-card","skill-path-rows","enrollment-cta"],"sequence":{"precedes":["skill-path-rows","enrollment-cta"]},"avoidWhen":["You are showing one course in depth, which is `course-card` plus `lesson-list`","You need card tiles with images, which is `course-card` in a grid"],"register":"application"}},{"slug":"skill-path-rows","package":"@wabbit/tome-blocks-lms-pack","docs":"https://wabbit.com/docs/packages/blocks-lms-pack","usage":{"summary":"An ordered way through several courses, one row per skill path: the path name, a summary line with totals counted from its courses (lessons, time, and the price of buying them one at a time), and the courses in order joined by arrows. Totals are computed, never typed, and a figure is dropped rather than understated when any course lacks it.","whenToUse":["Showing the order in which a school's courses are meant to be taken","A catalog page that offers a few named ways through the courses"],"pageTypes":["landing","marketing","docs"],"howToUse":"With the `skill-paths` source (the default), the block lists the active skill paths from the LMS layer by display order, or the ones you name in `paths[]` by `pathSlug` with an optional name and summary override; this needs the server wrapper from `@wabbit/tome-blocks-lms-pack/server` and renders nothing without it. Only course requirements form the row; certifications and custom requirements are skipped. With the `authored` source, fill `paths[]` by hand with course slugs and short labels. Totals print only for live paths.","pairsWith":["course-index","course-card","enrollment-cta"],"sequence":{"follows":["course-index"],"precedes":["enrollment-cta"]},"avoidWhen":["You are listing courses with no order between them, which is `course-index`","You want a certification checklist, which is not what a path of courses means here"],"register":"application"}},{"slug":"division-card","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"A single division/department display — logo, name, description, member count, and named leader. The unit-level companion to member-card, summarizing a sub-org rather than a person. Fully static — renders the authored fields; no @wabbit/tome-org peer required.","whenToUse":["Introducing a division, department, or regional sub-unit on an about/structure page","A \"Our divisions\" section where each unit gets a summary card with its leader and headcount","Leading into a member-grid or org-chart that drills into that division","A list of programs or crews, each with a photo, its lead, what it does and when it next meets (the entry variant)"],"pageTypes":["about","docs","dossier"],"howToUse":"Provide name (required) plus description, memberCount, logoUrl, and leaderName — these are the only data source today, not a static fallback. @wabbit/tome-org is not wired in yet; the isOrgLayerPresent/resolveOrgLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this card to render a live Division record. Use one card per unit, or several side by side, as the header for the people that belong to it. Two variants: default (the card above) and entry, a program or team entry that sets a captioned photo beside a lead line (\"Led by ...\"), the name, the purpose, an authored next date and a link. Entry ignores memberCount, logoUrl and leaderName; its photo is an upload, and its label and credit print in a caption after the image, never on it. Alternate mediaSide down the page.","pairsWith":["member-grid","member-card","org-chart","document-link"],"sequence":{"follows":["org-chart"],"precedes":["member-grid","member-card"]},"avoidWhen":["Profiling an individual rather than a unit — use member-card","You need the full three-level structure tree — use org-chart"],"register":"application"}},{"slug":"member-card","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"A single member profile card — avatar, display name, role, and position for one person. Fully static — renders the authored fields; no @wabbit/tome-org peer required.","whenToUse":["Spotlighting one person on an about/leadership page (a director, a guild leader, a founder)","A \"meet the director\" callout where a single profile carries the section","Inside a custom layout where you place individual cards by hand rather than a generated grid"],"pageTypes":["about","portfolio","dossier"],"howToUse":"Provide one member: displayName (required), plus avatarUrl, rank, and position — these are the only data source today. @wabbit/tome-org is not wired in yet; the isOrgLayerPresent/resolveOrgLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this card to render a live Member record. This is the single-member primitive — to lay out many people in a generated grid use member-grid, which renders the same card shape from an array. One variant (default).","pairsWith":["member-grid","division-card","org-chart"],"sequence":{"follows":["division-card"],"precedes":["member-grid"]},"avoidWhen":["Showing a team or roster — use member-grid (array-driven) instead of hand-placing cards","You need the org hierarchy itself rather than individuals — use org-chart"],"register":"application"}},{"slug":"member-grid","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"A responsive grid of member cards under an optional heading — the team/roster directory block. Renders the same card shape as member-card from a list, with column count and an item cap. Fully static — renders the authored members array; no @wabbit/tome-org peer required.","whenToUse":["A \"Meet the team\" / \"Our people\" / \"Leadership\" section listing many members at once","A company or community directory page where you want every member tiled in a grid","Any directory of people you want generated from data rather than placed card by card"],"pageTypes":["about","portfolio","dossier"],"howToUse":"Set a heading, pick columns (2, 3, or 4), and cap with maxItems. Supply the members array — it is the only data source today, not a static fallback. @wabbit/tome-org is not wired in yet; the isOrgLayerPresent/resolveOrgLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this grid to render a live Member collection. This is the array/layout counterpart to member-card — same per-person card, generated in bulk. One variant (default).","pairsWith":["member-card","division-card","org-chart","campaign-banner"],"sequence":{"follows":["division-card","org-chart"],"precedes":["event-calendar"]},"avoidWhen":["Featuring a single person — use member-card","You want the reporting hierarchy rather than a flat people grid — use org-chart"],"register":"application"}},{"slug":"event-calendar","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"An upcoming-events list under an optional heading — each row carries a title, start time, status (scheduled/live/completed/cancelled), and location. The array/section counterpart to event-list-item. Fully static — renders the authored events array; no @wabbit/tome-org peer required.","whenToUse":["An \"Upcoming events\" / \"What's on\" section on an org, community, or company page","A schedule of workshops, meetups, or streams where each entry needs date and status","Any place you want the next N events generated from data with a single block"],"pageTypes":["about","docs","dossier"],"howToUse":"Set a heading and cap with maxItems, then supply the events array (title required, plus startsAt ISO string, status, location) — it is the only data source today. @wabbit/tome-org is not wired in yet; the isOrgLayerPresent/resolveOrgLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this block to render the live Event collection. Use this for the full list; drop a single event-list-item into a sidebar or feed when you only need one row. One variant (default).","pairsWith":["event-list-item","campaign-banner","member-grid"],"sequence":{"follows":["campaign-banner","member-grid"],"precedes":["document-link"]},"avoidWhen":["You only need one event row in a sidebar or feed — use event-list-item","Promoting a single flagship campaign rather than a dated list — use campaign-banner"],"register":"application"}},{"slug":"event-list-item","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"A single event row — title, start time, status, and an optional click-through — sized for feeds, sidebars, and inline placement. The single-item primitive behind event-calendar. Fully static — renders the authored fields; no @wabbit/tome-org peer required.","whenToUse":["Surfacing one upcoming event in a sidebar, footer, or \"next event\" callout","Inline within editorial content where a full calendar would be too heavy","Hand-placing individual event rows rather than generating a list"],"pageTypes":["about","docs","blog"],"howToUse":"Provide title (required) plus startsAt (ISO string), status, and an optional href — these are the only data source today. @wabbit/tome-org is not wired in yet; the isOrgLayerPresent/resolveOrgLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this row to render a live Event record. This is the single-row counterpart to event-calendar — same row shape, one at a time. One variant (default).","pairsWith":["event-calendar","member-card","document-link"],"sequence":{"follows":["event-calendar"]},"avoidWhen":["Listing several upcoming events — use event-calendar (array-driven) instead of stacking rows","You need date, status, and location laid out as a section header — use event-calendar"],"register":"application"}},{"slug":"event-list","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"Events read from the org layer at render time and shown as rows: date, time, title, location, and a capacity chip (\"N spots left\", \"Full\" or \"Waitlist open\") that appears only when the event has capacity data. Modes: upcoming, today (a board that renders nothing when nothing is true, with closures first) and a date range. Each row can offer an .ics link. The live sibling of event-calendar.","whenToUse":["A class timetable or workshop schedule that should show how many places are left","A \"today\" board for a venue: today's events, closures first, hidden on quiet days","A dated record of events where each row is a filed entry","A same-day venue board that says what is live now, what starts next and what has finished","A \"what is on\" strip of event cards with a date tile and a price chip for each authored event","Any events list that must stay current without republishing the page"],"pageTypes":["landing","about","dossier"],"howToUse":"Leave source on live and pick a mode (upcoming, today or range). Narrow with eventType or location, set timezone to the venue's IANA zone so \"today\" and the times are the venue's, and cap with maxItems. The chip reads maxAttendees and attendeeCount from the event and is hidden when either is missing; a full event reads \"Waitlist open\" when the event keeps a waitlist (see waitlist). Closures are events whose type matches closureType; in today mode they come first. Today mode renders nothing when there is nothing to say, heading included. Turn on showIcs for a per-event calendar link, or point icsHrefTemplate at your own route. Live reads need the createHydratedRenderers wrapper from the pack's /server entry and an Event collection that anonymous visitors can read; without it the block shows its authored events array, filtered by the same rules. Four variants: default, filed (dated rows; can open with a lead event), board (a same-day board whose rows say Live now, Starts at a time or Finished and stay true on a cached page) and cards (a still list of date-tile cards; authored events can carry a price chip and an audience line, live org events carry neither). Set facilityHrefTemplate (e.g. #plan-{key}) to link each event's place to its facility on a site plan.","pairsWith":["event-calendar","campaign-banner","document-link"],"sequence":{"follows":["campaign-banner"],"precedes":["document-link"]},"avoidWhen":["The events are fixed copy that never changes - use event-calendar","You need one hand-placed row in a sidebar - use event-list-item"],"register":"application"}},{"slug":"org-chart","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"A simple three-level hierarchy display — a top-level unit, its teams, and their groups — the structure-of-the-org block, showing reporting lines rather than individual profiles. Fully static — renders the authored teams array; no @wabbit/tome-org peer required.","whenToUse":["An \"Org structure\" / \"How we are organized\" section showing the levels from department down to working groups","Orienting a reader before they meet the people — the map that member-grid then fills in","A dossier page where the unit hierarchy itself is the information"],"pageTypes":["about","docs","dossier"],"howToUse":"Set divisionName (required) and supply the teams array (each team carries its squads) — it is the only data source today. @wabbit/tome-org is not wired in yet; the isOrgLayerPresent/resolveOrgLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this chart to render live org-structure records. Use it once near the top of a structure page to frame the divisions and people that follow. One variant (default).","pairsWith":["division-card","member-grid","member-card"],"sequence":{"precedes":["division-card","member-grid"]},"avoidWhen":["Showing people rather than structure — use member-grid or member-card","Summarizing one unit with its leader and headcount — use division-card"],"register":"application"}},{"slug":"document-link","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"A linked document card — title, category label (SOP, Policy, Handbook), and last-updated timestamp pointing at a document URL. The resource/reference primitive for an org. Fully static — renders the authored fields; no @wabbit/tome-org peer required.","whenToUse":["A \"Resources\" / \"Documents\" / \"Policies\" section linking out to SOPs, handbooks, or forms","A knowledge-base or onboarding page where members find the canonical documents","Anywhere you want a clean, dated link card instead of a bare hyperlink"],"pageTypes":["docs","about","dossier"],"howToUse":"Provide title (required) and href (required) plus category and updatedAt (ISO string) — these are the only data source today. @wabbit/tome-org is not wired in yet; the isOrgLayerPresent/resolveOrgLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this card to render a live Document record. Stack several to form a resource list, often under a division-card or near an org-chart on a structure/docs page. One variant (default).","pairsWith":["division-card","org-chart","event-calendar"],"sequence":{"follows":["division-card","org-chart"]},"avoidWhen":["Linking to an event rather than a document — use event-list-item","You want rich body content inline rather than a link out — use a richText/content block"],"register":"application"}},{"slug":"campaign-banner","package":"@wabbit/tome-blocks-org-pack","docs":"https://wabbit.com/docs/packages/blocks-org-pack","usage":{"summary":"A full-width campaign hero — campaign name, tagline, full-bleed banner image, objective count, and a CTA. The promotional top-of-page block for an org campaign or initiative. Fully static — renders the authored fields; no @wabbit/tome-org peer required.","whenToUse":["Topping a campaign or initiative page with a cinematic banner and a single call to action","Announcing an active campaign on a community/org home or landing section","Driving members toward a campaign detail view or sign-up via the CTA"],"pageTypes":["about","portfolio","dossier"],"howToUse":"Set codename (the campaign's display name, required) plus tagline, bannerUrl, objectiveCount, and the ctaLabel/ctaUrl pair — these are the only data source today. @wabbit/tome-org is not wired in yet; the isOrgLayerPresent/resolveOrgLayer seam in src/index.ts is scaffolding for a future hydration wave, to be wired when a consumer needs this banner to render a live Campaign record. Place it at the very top of the page as the hero, with the objective list, member-grid, or event-calendar following beneath. One variant (default).","pairsWith":["event-calendar","member-grid","org-chart"],"sequence":{"precedes":["event-calendar","member-grid"]},"avoidWhen":["You need a generic marketing hero outside the org-campaign context — use a marketing hero block","Listing dated events rather than promoting one campaign — use event-calendar"],"register":"application"}},{"slug":"case-file-grid","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A scan strip of case-file/proof tiles — a mono case number, an italic-serif proof numeral (a stat, a result, a status), a one-line brief, and a subject name, with an optional arrow CTA per tile. Three variants (default, field-manual, filmstrip) cover a receipts-band register, a tighter architecture-document register, and an edge-to-edge photographic filmstrip. An optional gold CTA panel can close the row as its final tile.","whenToUse":["A \"receipts\" or \"proof\" section presenting several short case results side by side","A portfolio strip where each entry needs a headline stat plus a one-line context brief","A closing row that should end on a call-to-action tile rather than a plain link"],"pageTypes":["landing","about","marketing","portfolio"],"howToUse":"Author 2-5 tiles: a case number, a proof value, an optional brief, and a subject. Toggle Tile Images on to add a header image per tile — untouched tiles render a bracketed placeholder. Pick a Variant: default (receipts band), field-manual (tighter document register), or filmstrip (full-bleed photographic strip, requires Tile Images on). Set a CTA Panel heading to close the row with a call-to-action tile instead of a plain link.","pairsWith":["evidence-sheet","exhibit-artifact","proof-plates"],"avoidWhen":["You need a single full-bleed case study, not a row of short ones — use exhibit-artifact instead","The entries carry no comparable numeral/stat — use a plain card grid instead"],"register":"marketing-landing"}},{"slug":"case-file-row","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A single dark band opening with a lane kicker beside a headline, then a bordered row of up to 6 stat cells — each a kicker, a stat, a supporting line, and an optional name + plain link — closing on an anchored see-all link. One cell can be flagged to invert to a light card, useful for calling out the one honest or unusual result in an otherwise uniform set.","whenToUse":["A receipts/results row that needs plain, unstyled outbound links rather than relationship-driven cards","A \"the record\" band closing a case-study or evidence section","A moment that wants exactly one result visually set apart from its peers"],"pageTypes":["landing","about","marketing","editorial-article"],"howToUse":"Write a kicker and heading (wrap a phrase in *asterisks* for an accent run). Add up to 6 cells: kicker, stat, line, name, and an optional plain href + link label. Flag exactly one cell to invert it to a light card. Close with a see-all label + URL.","pairsWith":["case-file-grid","evidence-sheet","receipts-trio"],"avoidWhen":["Each entry needs a real relationship-driven link with a resolved reference — use case-file-grid or proof-plates instead","You need more than 6 entries — split into multiple rows or use case-file-grid"],"register":"marketing-landing"}},{"slug":"evidence-sheet","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A dossier masthead: mono kicker strip, then a set of spec rows (a mono label + a value, with an optional muted note and an emphasis treatment for the standout row), plus two optional chip rows — Scope (outlined pills) and Stack (filled pills). Four treatments reflow the same data: Table (label-left/value-right), Grid (a 3-column cell grid), Strip (one compact hairline row), and Ledger (a tall narrow column, optionally paired with a short Opening Narrative beside it). An optional call to action shows in all four treatments and can be switched off with Show call to action.","whenToUse":["A project/engagement masthead summarizing client, scope, timeline, result","A compact spec sheet before or after a case study","A verticalized \"at a glance\" ledger paired with a short narrative opener"],"pageTypes":["landing","about","marketing","dossier"],"howToUse":"Fill in Spec Rows (label + value, optional note, optional emphasis). Add Scope/Stack chips as needed. Pick a Treatment: Table for the default wide spread, Grid for a 3-column reflow, Strip for one compact glance row, or Ledger for a tall narrow column — Ledger unlocks the optional Opening Narrative field group beside it, and Ledger Rails: Split spreads a long ledger over two rails with the narrative between them and the chips under it. Add a Call to action to link to the full study: it follows the evidence in Table, Grid and Strip, and sits under the opening narrative in Ledger (under the ledger when there is no narrative). Untick Show call to action to hide it.","pairsWith":["case-file-grid","exhibit-artifact","proof-plates"],"avoidWhen":["You need a single narrative paragraph with no label/value structure — use a plain content block"],"register":"marketing-landing"}},{"slug":"evidence-plate","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"An evidence moment: an eyebrow, up to 3 stats (two large serif numerals plus an optional smaller, muted \"source\" cell), a body paragraph, optional linked source citations, and a closing pull statement whose two runs ink-fill in sequence on scroll.","whenToUse":["A data-backed argument that needs real, citable numbers","A moment that wants to land a two-part statement with a visual ink-fill reveal"],"pageTypes":["landing","about","marketing","editorial-article"],"howToUse":"Add up to 3 stats (numeral + value + label; flag the source cell as Muted). Write a body paragraph and, if citing external data, add Sources (label + URL — each renders as a real link). Fill the Ink-in pull with two runs: the first inks in the body ink color, the second in the accent color.","pairsWith":["case-file-row","evidence-sheet","proof-plates"],"avoidWhen":["The numbers are not real/citable — use a plain statement block instead"],"register":"marketing-landing"}},{"slug":"exhibit-artifact","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A single exhibited document — the \"here is the actual artifact\" answer to a case study or study section that has no photograph to show. A tag chip labels the exhibit; the inner card carries header rows (e.g. From/To/Re), a subject line, a rich-text body, and a signature; a centered caption sits below.","whenToUse":["A case study with no real photograph to show, but a real communication/document to reproduce","A moment that benefits from a letter, memo, or transcript-style artifact"],"pageTypes":["dossier","about","landing"],"howToUse":"Set a Tag (the chip label). Add Header Lines (label/value rows), a Subject Line, a rich-text Body, and a Signature. Add a Caption to describe the artifact below it, and an optional CTA link.","pairsWith":["evidence-sheet","case-file-grid","proof-plates"],"avoidWhen":["A real photograph exists for this moment — use a media block instead"],"register":"marketing-landing"}},{"slug":"proof-plates","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A \"what it runs on\" or \"here is the proof\" section: a kick label + heading + intro, then 2-4 proof plates, each with a kicker, title, body, an optional stats line, an optional inline continuation link, and an optional proof-capture image. One plate can be flagged to render as an inverted, emphasized card. Two shells are available: Strip (one joined bordered row) or Situational (separate floating cards with their own border/shadow) — Auto derives the shell from whether any plate carries a kicker.","whenToUse":["Comparing 2-4 concrete deployments, tiers, or outcomes side by side","A chooser section where each option needs its own floating card","A closing proof row that wants one option visually flagged as the default/flagship"],"pageTypes":["landing","pricing","marketing"],"howToUse":"Write a kick label, heading (wrap a phrase in *accent*), and intro. Add 2-4 plates: kicker, title, body (supports **bold** and *em* runs), an optional stats line, and an optional inline link. Flag one plate for emphasis. Choose a Shell, or leave Auto to let the kicker-presence heuristic decide. Add a proof-capture image per plate where a real screenshot exists.","pairsWith":["evidence-sheet","case-file-grid","exhibit-artifact"],"avoidWhen":["You have more than 4 comparable items — use a table or a card grid instead"],"register":"marketing-landing"}},{"slug":"receipts-trio","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A single dark band making the case for showing real results, not just wins: a kicker, a heading (with an optional accented run), a prose paragraph making the honesty argument, and up to 3 quote cards (quote + name + role) — deliberately built to hold an honest, non-flattering result alongside the wins.","whenToUse":["A section arguing for transparency — \"here is what actually happened,\" wins and losses both","A quote-grid closing a methodology or process section"],"pageTypes":["landing","about","marketing"],"howToUse":"Write a kicker and heading (wrap a phrase in *asterisks* for an accent run). Write the body paragraph making the honesty case. Add up to 3 quotes — keep any non-flattering one if the source material includes it; the point of this block is not to only show wins.","pairsWith":["case-file-row","evidence-plate"],"avoidWhen":["Every quote is a straightforward win — a simple testimonial block is a lighter fit"],"register":"marketing-landing"}},{"slug":"record-roster","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A single \"the record\" section: a top-ruled kicker, a ledger of rows (an index, a bold value, and a description), a hairline-bordered logo grid, and an optional centered coda line. The logo grid's cell count follows the number of logos actually uploaded — up to 10 — with empty cells (when fewer than the configured maximum are provided) rendering a numbered mono placeholder.","whenToUse":["A social-proof close listing client/partner logos alongside a short ledger of facts","A \"the numbers\" section that wants a real logo wall, not a generic grid"],"pageTypes":["landing","about","marketing"],"howToUse":"Write a kicker. Add ledger rows (index, value, description) — keep numbering real and complete. Add up to 10 logos; the grid sizes itself to however many you add. Add a coda for a short centered closing line.","pairsWith":["case-file-grid","proof-plates"],"avoidWhen":["You have no real logos to show — an invented or placeholder-only grid is not appropriate here"],"register":"marketing-landing"}},{"slug":"compare-ledger","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A ruled-out-vs-full-ink comparison: 2-3 columns each with a mono label and a display value (all but one struck through), then a table of paired rows contrasting the same options attribute by attribute, closed by a short anchored statement. Every field is plain text — no catalog or pricing peer required.","whenToUse":["Contrasting the old way against the new way (or a competitor against your own approach) as a single honest display","A \"before you decide\" section that shows what changes across 2-3 options, row by row","Closing an argument with a visual verdict rather than a paragraph of prose"],"pageTypes":["landing","marketing","dossier"],"howToUse":"Add 2-3 `columns`, each with a label, a display value, and an \"emphasis\" flag on the one option that should render in full ink (the rest render struck through, muted). Add up to 6 `rows`, each with one cell per column in column order. Optionally close with an anchored `closeText` statement. For an N-column feature matrix with per-cell Yes/No/tone values, use `comparison-table` instead — this block is for a short, opinionated 2-3-way contrast, not an exhaustive feature grid.","pairsWith":["comparison-table","cost-ledger","term-ledger"],"avoidWhen":["You need more than 3 columns, or a feature-by-feature grid with many rows — use `comparison-table`","The comparison is really just one product's price against nothing — use `price-table` instead"],"register":"dossier"}},{"slug":"comparison-table","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A feature-by-feature comparison table: 2-6 columns (the options), 1-24 rows (the capabilities), and a cell per intersection with an optional value string and tone (default/affirmative/absent/emphasis). Columns and rows are free text, so this serves plan comparisons, package matrices, spec sheets, or before/after grids equally. Cells are positional — cell N in a row belongs to column N.","whenToUse":["\"Which one do I need?\" pages comparing 3+ options across many capabilities in a single scan","A specification sheet where every option needs the same set of attributes checked off","A feature matrix accompanying a pricing or plan page, distinct from the tiers themselves"],"pageTypes":["pricing","landing","marketing","docs"],"howToUse":"Add a headline (required) and optional eyebrow/description. Add 2-6 `columns`, each with a label and an optional highlight flag for the recommended option. Add 1-24 `rows`, each with a label and a `cells` array — cell order follows column order; a missing cell renders blank rather than shifting the table. Give a cell a `tone` of \"affirm\" (accent, bold) or \"absent\" (muted) to make a column read as a shape at a glance, or \"emphasis\" to set one value in accent ink (a theme tunes that ink with `--tome-comparison-emphasis-ink`). Three options, all off by default: `railHeader` sets the eyebrow in a narrow ruled column beside a large headline (whose `*accent*` runs drop to their own line), `emphasisHighlight` gives highlighted columns a solid fill instead of the subtle tint, and `descriptionAboveTable` moves the description out of the header to sit directly above the table. For a short 2-3-way opinionated contrast rather than an exhaustive grid, use `compare-ledger` instead.","pairsWith":["price-table","compare-ledger","term-ledger"],"avoidWhen":["You are comparing exactly 2-3 options with a handful of contrast points, not an exhaustive feature grid — use `compare-ledger`","There is only one offer with one price — a plain `price-table` or product CTA is enough"],"register":"dossier"}},{"slug":"term-ledger","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A ruled list of term + rich-text body pairs — \"what changes\", \"what this covers\", a glossary, or a spec sheet read as a ledger rather than a table. The variants share one row template and differ only in tone: `shifts` (light band, bold display term), `spec` (dark band, mono accent term) and `spec-measure` (the `spec` tone with each row body held to the prose measure). An optional supporting image can sit beside the rows, and an optional anchored line closes the section.","whenToUse":["Listing what changes, what is included, or what a term means, one row per item, with room for a paragraph of explanation per row","A \"how it works\" or \"under the hood\" section that reads better as short labeled rows than as a table","Pairing a small number of terms with a supporting photo or diagram beside the list"],"pageTypes":["landing","marketing","docs"],"howToUse":"Set the variant: `shifts` for a light band with a bold display term (the default, everyday case), `spec` for a dark, technical-feeling band with a mono accent term, `spec-measure` for the same dark band with row bodies capped at the prose measure (`--tome-prose-max-width`). Add an optional kicker, a heading (`*accent*` runs render italic accent; set `headingFace` to `display` for a larger, light serif heading), and intro rich text. Add `rows` — each needs a term and rich-text body. Optionally add a supporting figure (image + a placeholder note for when no image is set yet) that renders beside the rows. Close with an optional anchored statement (`**strong**`/`*em*` runs supported). For a strict 4-column forensic ledger (line/category/cost/what-compounds) use `cost-ledger` instead; for a feature matrix use `comparison-table`.","pairsWith":["cost-ledger","comparison-table","compare-ledger"],"avoidWhen":["The content is fundamentally tabular with many columns — use `comparison-table`","Each row needs a fixed line/category/cost/compounds shape — use `cost-ledger`"],"register":"dossier"}},{"slug":"cost-ledger","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A forensic-accounting-styled ledger: an optional kicker + heading + intro, a 3-column strip header labeling the row shape (line/category, the debit, what compounds), up to 6 rows each with a line number, category, a plain-language debit, and what it compounds into — with exactly one row markable as \"lit\" to render as a dark accent plate — closed by a coda kicker + centered statement naming the total cost.","whenToUse":["Making the cost of inaction or a status quo concrete, one line item at a time","A \"here is what this actually costs you\" section building toward a single closing statement","Highlighting one specific cost line as the fact the reader cannot unsee"],"pageTypes":["landing","marketing","dossier"],"howToUse":"Add an optional kicker, heading (`*accent*` runs render italic accent), and intro paragraph. Set the three column-strip labels (line/category, the debit, what compounds). Add up to 6 `rows`: line (e.g. \"L01\"), category, the debit in plain language, what compounds, and a \"lit\" flag — mark exactly one row lit to render it as the dark plate the reader cannot unsee. Close with a codaKicker + codaText naming the total. For a strict term/definition ledger without the lit-row device, use `term-ledger`; for a multi-option comparison, use `compare-ledger` or `comparison-table`.","pairsWith":["term-ledger","compare-ledger","comparison-table"],"avoidWhen":["You need more than 6 rows or a general feature matrix — use `comparison-table`","There is no single \"cost\" narrative — a plain `term-ledger` fits a neutral list of terms better"],"register":"dossier"}},{"slug":"ledger","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A four-column ledger table (Line / Category / Cost / What Compounds) built from 2-10 rows, with one optional accent (\"emphasis\") row for a running total, and an optional closing note rendered on a dark inset band beneath the table. An optional top strip (label + right-aligned section locator) can run above the headline, and an optional CTA link can run below the block. Two variants: default (full ledger with top strip) and compact (denser rows, no top strip).","whenToUse":["Breaking down the hidden or compounding cost of a decision, delay, or status quo into discrete line items","A \"here is what this actually costs\" section that needs to read as itemized and audited rather than a single claim","Closing an argument with one line-item table plus a single summary verdict on an inset band"],"pageTypes":["landing","marketing","about","dossier"],"howToUse":"Author 2-10 `rows`, each with a line id, category, cost (debit) string, and an optional \"what compounds\" note; mark at most one row `emphasis` to accent it (typically a running total). Column header labels are editable and default to LINE / CATEGORY / THE COST (DEBIT) / WHAT COMPOUNDS. Add an optional `closingNote` for a summary verdict rendered on a dark inset band beneath the table, with its own `closingLabel` kicker. Use `compact` when the ledger sits inside a denser section and does not need the top strip.","pairsWith":["shift-rows","fit-list","grants-ledger"],"sequence":{"follows":["fit-list"]},"avoidWhen":["There are fewer than 2 comparable line items — a single stat or a short paragraph makes the point faster","The cost is a single number rather than several compounding factors — use a stat block instead"],"register":"dossier"}},{"slug":"grants-ledger","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A real <table> feature matrix: an optional lane kicker + heading above it, then columns (one per plan/tier, each with a label) and rows (one per feature/grant, each with one cell per column). Any column can be flagged `zone2` for a fully inverted dark/accent treatment (e.g. an \"Agency\" or enterprise tier that reads as categorically different, not just pricier); a separate optional `highlightedColumnIndex` marks exactly one column with a lighter \"featured\" tint, for when a plan should stand out without the full inversion. Any cell can be flagged `conv` for a mono accent treatment (e.g. \"By conversation\" instead of a plain value).","whenToUse":["Comparing 3+ plans, tiers, or offers feature-by-feature in a real table, not a card grid","One column needs to read as categorically different from the others (e.g. an enterprise/agency tier reached by conversation, not checkout)","A single column should be called out as recommended without going all the way to a fully inverted band"],"pageTypes":["pricing","landing","marketing"],"howToUse":"Author `columns` (one per plan) and `rows` (one per feature); each row's `cells` are positional against `columns` — `cells[i]` belongs to `columns[i]`. Set `zone2: true` on at most one or two columns for the full dark/accent inversion; set `highlightedColumnIndex` to a 0-based column index for a lighter featured tint on a different column. Set `conv: true` on a cell whose value should read as a conversational/mono-accent exception (e.g. \"Conversation\") rather than a plain value.","pairsWith":["price-table","ledger","fit-list"],"sequence":{"follows":["fit-list"]},"avoidWhen":["There are only 1-2 columns to compare — a simple two-column split reads faster than a table","Every column is equivalent with no tier needing special emphasis — a plain comparison table without the zone/highlight fields is simpler"],"register":"dossier"}},{"slug":"shift-rows","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A numbered list of 2-6 rows, each a literal before/after transformation: an optional thumbnail + label + short caption, a BEFORE panel (headline + body), an arrow, and an AFTER panel (headline + body) styled as the positive outcome. An optional heading/eyebrow/section-marker runs above the rows and an optional italic footer note and CTA link run below. Reuses copy that is already phrased as a shift rather than a list of features.","whenToUse":["Every item already reads as \"X becomes Y\" — a timeline compressing, a cost dropping, a process simplifying","A \"here is what changes when you work with us\" section built from 3-4 concrete transformations","Reinforcing a single argument with a repeated visual rhythm (label / before / arrow / after) rather than a paragraph per point"],"pageTypes":["landing","marketing","about"],"howToUse":"Author 2-6 `rows`; each needs a label, a before headline, and an after headline (body copy and a thumbnail are optional). When any row sets a thumbnail, the thumbnail column activates for every row — rows without one render a blank placeholder frame. Use the shared Image Display controls to set the thumbnail fit/border/alignment. Keep rows to the 3-4 sweet spot; more than that dilutes the rhythm.","pairsWith":["ledger","fit-list","grants-ledger"],"sequence":{"follows":["fit-list"]},"avoidWhen":["The benefits are not naturally before/after pairs — a plain feature list or `stat-bar` fits better","There is only one transformation to show — a single stat or a short paragraph makes the point without the row apparatus"],"register":"dossier"}},{"slug":"fit-list","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A self-qualification section: an optional kicker + heading, then two ruled columns — a \"build\" list of conditions where the offer fits, and a muted \"skip\" list of conditions where it does not — closed by an optional anchored statement. Reads as candor rather than a sales pitch because it names the cases where the reader should walk away.","whenToUse":["Helping a visitor self-select in or out before they contact sales","Building trust by naming who the offer is NOT for, alongside who it is","Closing a pitch section with an honest qualifier rather than another benefit claim"],"pageTypes":["landing","marketing","pricing"],"howToUse":"Author up to 6 `buildItems` and up to 6 `skipItems` (short, single-line conditions each). Add an optional `kicker` + `heading` above the columns and an optional `closeText` anchored statement below — both accept `*em*` runs for an accented span. Keep each item to one line; this block is a scanning aid, not a place for paragraphs.","pairsWith":["ledger","shift-rows","grants-ledger"],"sequence":{"precedes":["ledger"]},"avoidWhen":["The offer has no real disqualifying cases — a forced \"skip\" list reads as false modesty","The comparison needs more than two columns or per-item detail — use `grants-ledger` instead"],"register":"dossier"}},{"slug":"fit-prose","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A qualifying section written as two facing prose plates — one paragraph for who this is NOT for, one for who it IS for — each carrying its own label, then a single anchored closing statement (e.g. a guarantee or refund line). Plain prose paragraphs, never a checklist.","whenToUse":["A sales or landing page section that pre-qualifies the reader before the pitch continues","An offer page that wants to repel the wrong buyer as deliberately as it attracts the right one","A closing statement (guarantee, refund line, commitment) that needs to sit directly beneath a fit judgment rather than float alone"],"pageTypes":["landing","marketing","about"],"howToUse":"Author an optional kicker + heading (wrap a phrase in *asterisks* for the accent run), then a not-fit label/body and a fit label/body — both plain prose paragraphs. The optional anchored close renders as one statement beneath a rule (also accepts *asterisk* accents). Any missing piece collapses cleanly: the block renders nothing when heading, both bodies, and the close are all empty.","pairsWith":["spec-sheet","spec-plate","zone-directory"],"avoidWhen":["The comparison is a checklist of features rather than a spoken paragraph — a bulleted compare block fits better","There is no honest \"not for you\" case to state — a one-sided pitch does not need this device"],"register":"marketing-landing"}},{"slug":"zone-directory","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A directory board splitting one decision into 2-4 named zones — each cell is a whole-cell link carrying an outline numeral, a kicker, a title, a short description, and a go label. One or more cells can flip to an inverted dark register independent of the block's own background, for visually separating a self-serve path from a higher-touch one.","whenToUse":["A page that offers the reader 2-4 distinct next steps or paths and needs each one named and justified before the link","A \"how you work with us\" section splitting self-serve vs. guided engagement","A landing page moment that wants the decision itself to read as the page's own design device"],"pageTypes":["landing","marketing","about"],"howToUse":"Author an optional eyebrow + heading (wrap a phrase in *asterisks* for the accent run) + description, then 2-4 cells: each takes a number (renders as an outline numeral), a kicker, a title, a description, a go label (type the arrow glyph yourself — the component does not add one), an href, and an optional dark toggle to invert that one cell's register. The board's column count and border layout adapt automatically to however many cells (2, 3, or 4) are authored.","pairsWith":["fit-prose","spec-sheet","spec-plate"],"avoidWhen":["There is only one path forward — a single CTA needs no directory","More than 4 destinations are being compared — this reads as a considered decision, not a menu; use a larger grid block instead"],"register":"marketing-landing"}},{"slug":"spec-sheet","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A row of up to 4 label/value cells on a bordered strip — the shape of an engagement's or offer's terms at a glance (Duration, Fee, What happens if you proceed, …), with an optional muted note line underneath. Cells with neither a label nor a value are dropped rather than rendered empty.","whenToUse":["Stating the concrete terms of a paid engagement, sprint, or audit directly on the page (duration, price, next step)","A proposal or process page that needs a scannable terms strip near a CTA","Any place a handful of short facts belong side by side, not in prose"],"pageTypes":["landing","marketing","about"],"howToUse":"Author 1-4 cells, each an optional label + value pair; the strip's column count matches however many cells actually have content, so the row fills edge to edge without a phantom empty column. Add an optional note for a single muted qualifying line beneath the row. The block renders nothing if every cell is empty and no note is set.","pairsWith":["spec-plate","fit-prose","zone-directory"],"avoidWhen":["There are more than 4 terms to state, or the values need explanation — use `spec-plate`'s larger grid with its heading + lede instead","The content is really prose, not discrete label/value facts"],"register":"dossier"}},{"slug":"spec-plate","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"The technical buyer's cheat sheet — a heading (with an optional larger display face) and a one-sentence lede explaining why the detail exists, followed by up to 6 label/value cells (framework, hosting, integrations, …) each with an optional small muted note under the value. The 3-column desktop grid degrades to 2 columns on narrower viewports with its own border rewiring, never collapsing to 1.","whenToUse":["Listing the technical stack or specs behind a build for a reader who asks, without making it the pitch","A \"Under the Hood\" or \"Tech Specs\" section on a platform, product, or case-study page","Launch-detail lists (ownership terms, what's included) that read as facts, not marketing copy"],"pageTypes":["landing","marketing","about"],"howToUse":"Author an optional heading (wrap a phrase in *asterisks* for the accent run; `headingFace: display` renders it at the larger elevation-page serif size) and lede, then up to 6 cells: each takes a label, a value, and an optional small note line beneath the value. Use `spec-sheet` instead when there is no heading/lede and 4 or fewer plain terms to state — the two blocks are intentionally not merged; this one carries a head and a larger cell cap.","pairsWith":["spec-sheet","fit-prose","zone-directory"],"avoidWhen":["There is no heading or lede to frame the cells — `spec-sheet` is the leaner fit","More than 6 facts need stating — split into two plates rather than cramming the grid"],"register":"dossier"}},{"slug":"lab-notes","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A candid \"here is what we tried and what we learned\" disclosure beat, styled as a field-notebook entry: an optional top strip (label + right-aligned locator), an italic-serif headline and subtitle, then 2-8 labeled entries — a mono kicker plus a body line — running down a continuous margin rule, with one entry markable as the emphasis landing. Closes with an optional handoff line: a label, a body sentence, and a link, either in its own cell or glued inline at the end of the sentence.","whenToUse":["A retrospective or \"we tried this, and here is what happened\" disclosure section","A sequence of attempt/outcome/lesson entries that reads like lab notes or a changelog narrative","A closing handoff that sends the reader to a follow-up resource or a next step"],"pageTypes":["editorial-article","about","docs"],"howToUse":"Author a headline and 2-8 entries (kicker + body; mark one as emphasis for the accent landing). Add an optional italic subtitle under the headline, and an optional closing handoff (label + body + link). Toggle the top strip off via \"Show Section Header\" without losing its text — useful when this block follows another one closely. Switch spacing to \"Spacious\" for an airier, larger-type treatment.","pairsWith":["phase-ledger","practice-modes","wall-rows"],"avoidWhen":["The content is a forward-looking roadmap rather than a retrospective — use `phase-ledger` instead","There is only one point to make — a single paragraph beats the notebook conceit"],"register":"dossier"}},{"slug":"phase-ledger","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A curriculum- or process-ledger section: an optional lane kicker + serif heading + rich-text intro, then 1-9 numbered phase rows under a 2px top rule, each carrying a locator (a phase number and a bordered chip, e.g. \"21 lessons\"), a title, and a body paragraph with an italic outcome line. Reads as a syllabus or a roadmap made literal — the numbering is meant to be real and complete, not decorative. Five variants: default (the ruled rows); rail (the same rows beside a progress rail that fills as the section is read, each phase dot lighting when reached; fully drawn under reduced motion or without JavaScript); index (a numbered index of ruled rows, each with a byline and an optional link covering the row, for a list of areas or sections that each have their own page); panel (one large media panel above a row of numbered steps that the reader clicks, arrows or, from 768px, scrolls through; every step listed in full without JavaScript); and pinned (a numbered list that sticks beside one captioned 3:2 plate per phase, the phase whose plate is in view marked in the list; every phase shown without JavaScript).","whenToUse":["A course or program page listing its phases/modules in order, each with a scope and an outcome","A step-by-step process or roadmap where each step needs more than a one-line label","Proving a curriculum is real and complete — the register gate is exactly this: no gaps, no out-of-order phases","An index of numbered areas or sections, each linking to its own page (`index`)","A short process of 2-6 steps where a picture per step helps, shown one step at a time (`panel`)","A process whose every step has a plate worth looking at, read down the page beside a list that keeps its place (`pinned`)"],"pageTypes":["docs","about","editorial-article"],"howToUse":"Author 1-9 phases in strict order, each with a number, an optional chip tag, a title, a body paragraph, and an optional italic outcome line. `*accent*` runs in the heading render as the band-relative accent-italic style. Keep the phase count real — gaps or reordering break the register the block is built to prove. Pick `rail` when the order itself is the point (a process the reader moves through), so the filling rail shows how far along they are. Pick `index` for a numbered list of areas that each have a page: set `link` (label and URL) per row and use `outcome` for the byline. Pick `panel` for a stepped process with a picture per step: set `image` and `meta` per phase, keep it to 2-6 steps, and keep the text of each step short enough to read beside the picture. Pick `pinned` for a process of 3-6 phases with one plate each: set `image`, `caption` and `credit` per phase and `phaseLabel` for the first line of each caption (the default is Phase {n}); keep each body to a sentence, since it also reads under the plate on phones.","pairsWith":["lab-notes","practice-modes","wall-rows"],"avoidWhen":["There are fewer than 2-3 real steps — a single paragraph or a `stat-bar` communicates it faster","The steps are interchangeable/parallel rather than sequential — a card grid fits better than a numbered ledger"],"register":"dossier"}},{"slug":"practice-modes","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A two-mode comparison section for a single practice or approach that comes in exactly two flavors — e.g. \"Compressed\" vs \"Expanded.\" A kicker-lane heading sits above two ruled, equal-weight prose columns (label + body each), closing with an anchored statement and an optional real link off to the side.","whenToUse":["Explaining that the same practice/method has exactly two usable modes and describing each","A \"how people actually use this\" section that needs two contrasting descriptions, not a feature list","A closing statement that anchors the section with an optional pointer to more detail"],"pageTypes":["editorial-article","docs","about"],"howToUse":"Author exactly two modes (label + body each). The ledger variant adds, per path, a name, a phone tab label, what is included, how long, who it fits (short chips), a price, a recommended flag and two buttons (a link out such as a scheduler, and a link to the contact form that can prefill a form field), plus the row labels in the left lane. Add an optional kicker and heading above them (`*em*` runs render serif-italic accent). Close with an anchored statement (`*em*` runs render the same way) and, optionally, a real link — leave both close-link fields blank if the beat has no follow-up.","pairsWith":["lab-notes","phase-ledger","wall-rows"],"avoidWhen":["There are more than two modes/variants to compare — a card grid or table fits better","The two things being compared are not equal in weight — an asymmetric layout communicates that better than two even columns"],"register":"dossier"}},{"slug":"wall-rows","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A \"here is who asked and why the answer was no\" section: a kick rule + serif heading (with `*accent*` runs) + rich-text intro, then a bordered, rounded ledger of rows — each carrying a who, a need, and a one-word verdict repeated as the row's own anatomy (e.g. \"Wall.\") — closing with an anchored statement (`**strong**` runs render semibold).","whenToUse":["Listing a set of asks/requests and the same verdict landing on each one, to make a pattern visible","A \"we said no to this, repeatedly\" section where the repetition of the verdict word IS the point","A closing statement that needs a bordered, scannable ledger of examples behind it"],"pageTypes":["editorial-article","about","docs"],"howToUse":"Author a kick label, a heading (`*accent*` runs render serif-italic accent), and an intro rich-text paragraph. Add any number of wall rows — each with a required \"who,\" an optional \"need\" body, and an optional verdict word rendered bold and large at the row end. Close with an anchored statement; `**strong**` runs render semibold.","pairsWith":["lab-notes","phase-ledger","practice-modes"],"avoidWhen":["Every row has a different verdict — the block's whole point is ONE repeated verdict word; use a table instead if verdicts vary","There is only one example — a single pull quote communicates it with less furniture"],"register":"dossier"}},{"slug":"dated-ledger","package":"@wabbit/tome-blocks-dossier-pack","docs":"https://wabbit.com/docs/packages/blocks-dossier-pack","usage":{"summary":"A dated log of recent, real entries: an optional lane kicker + heading + rich-text intro, then 1-12 entries. Each entry is led by its date as a large day numeral with a month, year and reference line in tabular figures, then an optional photo, a chip (a place or a category), a title, one result line and an optional big figure, with an optional per-entry link. An optional \"more\" link closes the log. Two variants: columns (up to four per row) and rows (ruled rows with the date and reference in the left lane and the figure in the right lane). Options: the date as a day (default) or a year (`datePrecision`), a regular or compact density (`density`; compact for short entries such as awards), a compliance label per entry (`complianceLabel`) and a closing note under the entries (`note`).","whenToUse":["A log of recently finished work where the date and a reference number prove each entry is real","A news-like record of dated outcomes (cases closed, releases shipped, projects delivered) with one result per entry","A \"related entries\" strip under a detail page, linking to each entry","Past results or awards by year, each with the label an advertising rule asks for (`datePrecision: year`, `complianceLabel`, `note`)"],"pageTypes":["landing","marketing","about","dossier","portfolio"],"howToUse":"Author 1-12 entries newest first, each with a date, an optional reference (e.g. a job or case number), an optional chip, a title, one result line, an optional figure (value + label), an optional photo and an optional link. Pick `columns` for a scan strip of up to four entries per row, or `rows` for a longer ruled ledger with the figure in the right lane. Add a \"more\" link to point at the full record. Set `datePrecision` to `year` when only the year matters, `density` to `compact` for a list of short entries (title, one line, a chip such as who it was for), `complianceLabel` on any entry that states a result your rules require a disclaimer for, and `note` for a closing source line or disclaimer.","pairsWith":["phase-ledger","case-file-row","record-roster"],"avoidWhen":["The entries have no real dates — a card grid or `case-file-grid` fits better than a dated record","There is only one entry — a single case study block tells it better"],"register":"dossier"}},{"slug":"campaign-hero","package":"@wabbit/tome-blocks-campaign-pack","docs":"https://wabbit.com/docs/packages/blocks-campaign-pack","usage":{"summary":"The opening section of a single-page pledge campaign. Four directions: Portrait (a photo from the page edge beside the copy, its label and credit in a caption below it, weight-only emphasis, two buttons, and the Running Total under them, hidden entirely with no live figures when asked), Ledger (solid + outlined caps headline, tilted marginalia figure, cream band), Counter (single accented sentence headline, opposite-tilt figure, cream band), and Night Launch (dark band, inline solid+outline headline, an outlined mega-percent monument in place of the figure, driven by the live figures from the campaign source the site supplies; with no source the monument is left out). Portrait has no tilt and no placeholder frame.","whenToUse":["The first section of a crowdfunding or pre-order campaign page","Any single-page pledge/launch pitch that needs a strong opening statement plus an immediate CTA into the reward tiers","A dark, high-contrast opening moment where the funding percent itself is the visual (Night Launch)"],"pageTypes":["landing","marketing"],"howToUse":"Write Headline — solid line (and, for Ledger/Night Launch, Headline — outlined line). Wrap a phrase in *asterisks* in Lede for an accent run. Set CTA label + CTA link to point at the reward-tier section (e.g. \"#tiers\") or an external URL. Ledger/Counter show a Marginalia figure (an empty slot renders a labeled placeholder frame, never a blank space) — Night Launch instead shows a percent monument from the live figures for the Campaign key, read from the campaign source the site supplies (no source, no monument). Choose the direction from the variant picker.","pairsWith":["campaign-count","campaign-tiers","campaign-terms","campaign-close"],"sequence":{"precedes":["campaign-count","campaign-tiers"]},"avoidWhen":["The page is not a single pledge/launch campaign — use a standard marketing hero instead"],"register":"marketing-landing"}},{"slug":"campaign-count","package":"@wabbit/tome-blocks-campaign-pack","docs":"https://wabbit.com/docs/packages/blocks-campaign-pack","usage":{"summary":"The progress instrument for a pledge campaign page. Ledger Strip shows pledged/goal/backers/days-left over a fill bar with an optional rule-line caption. Counter Tally shows one giant backer number beside the bar and a caption. Every figure comes from the campaign source the site supplies at render; a figure the source does not supply is left out, and with no source the block renders nothing. Line is the Running Total: one sentence over a fill bar, inline, with no band, for a closing band or a lane of a grid. Captions support {raised} {goal} {count} {daysLeft} {percent} {updated} tokens (and {pledged}, {backers}, {dayNumber}, {totalDays}), filled from the live figures.","whenToUse":["Below the hero on a crowdfunding or pre-order page, to show progress toward the goal","Anywhere a campaign page should show its current numbers, read from the site's campaign data"],"pageTypes":["landing","marketing"],"howToUse":"Set Campaign to the key your site's campaign source looks up; the figures, percent and bar fill come from that source. Ledger Strip also accepts an optional Strip label and a Rule line using {tokens}. Counter Tally accepts a Tally label and a Tally caption using the same tokens. A caption that uses a token with no figure is hidden rather than shown with a gap.","pairsWith":["campaign-hero","campaign-tiers"],"sequence":{"follows":["campaign-hero"],"precedes":["campaign-tiers"]},"avoidWhen":["The site has no campaign data source — the block renders nothing without one, so state the campaign's numbers in copy instead"],"register":"marketing-landing"}},{"slug":"campaign-tiers","package":"@wabbit/tome-blocks-campaign-pack","docs":"https://wabbit.com/docs/packages/blocks-campaign-pack","usage":{"summary":"The \"ways to back it\" section of a pledge campaign. Wall renders 2-4 tiers as a seam-wall of cards with feature bullets and an optional \"recommended\" highlight + flag chip. Board renders the same tiers as stacked numbered rows with a single description paragraph. Giving levels renders levels of a gift or membership as plain cells (price label, title, one sentence, a link), with no \"pledge\" word, no features and no recommended highlight. Every tier is fully authored — title, price label, description, features, and its own CTA link — no relationship to a commerce collection.","whenToUse":["The reward-tier / pricing section of a crowdfunding or pre-order campaign page","Any page presenting 2-4 priced options as a wall of cards or a stacked list"],"pageTypes":["landing","marketing","pricing"],"howToUse":"Add one row per tier: title, price label (e.g. \"$45\"), description, and feature bullets (Wall) or a single description paragraph (Board). Set CTA label + CTA link per tier — point it at a checkout, waitlist, or contact page. Mark one tier Recommended to highlight its cell/row and show an optional Flag chip. Choose Wall for a side-by-side comparison or Board for a narrower, numbered stack.","pairsWith":["campaign-hero","campaign-count","campaign-terms"],"sequence":{"follows":["campaign-count"],"precedes":["campaign-terms","campaign-close"]},"avoidWhen":["The tiers need to check inventory or live pricing from a commerce backend — this block renders authored text only"],"register":"marketing-landing"}},{"slug":"campaign-terms","package":"@wabbit/tome-blocks-campaign-pack","docs":"https://wabbit.com/docs/packages/blocks-campaign-pack","usage":{"summary":"Plain-language reassurance copy for a pledge campaign — charge timing, what happens if the goal is missed, when shipping details are collected, and similar all-or-nothing mechanics — as one to three short statements, each a bold lead-in plus a body sentence.","whenToUse":["Anywhere a pledge/pre-order campaign needs to state its charge and refund mechanics plainly","A trust-building strip between the reward tiers and the closing CTA"],"pageTypes":["landing","marketing"],"howToUse":"Row: add one to three rows, each a bold Lead-in phrase and a Body sentence; keep each to one idea, it renders as a tight three-column row on wide screens. Ledger: add a Heading, an optional Intro, a Statement (wrap one phrase in *asterisks* to set it heavier) and up to six terms, each a Lead-in and a Body that sit as definition rows beside the heading.","pairsWith":["campaign-tiers","campaign-close"],"sequence":{"follows":["campaign-tiers"],"precedes":["campaign-close"]},"avoidWhen":["The terms need to be a full legal document — link to one instead of authoring it here"],"register":"marketing-landing"}},{"slug":"campaign-close","package":"@wabbit/tome-blocks-campaign-pack","docs":"https://wabbit.com/docs/packages/blocks-campaign-pack","usage":{"summary":"The last section of a pledge campaign page. Settle is a dark full band with a solid+outlined two-line headline, a body paragraph, and a right-aligned CTA. Monument is a compact, centered outlined days-left numeral with a caption and one CTA — a lighter-weight closer for a page that already made its case. The numeral is live, from the campaign source the site supplies; without one, Monument shows its CTA alone.","whenToUse":["The final section of a crowdfunding or pre-order campaign page, restating the ask","A compact urgency closer showing days remaining (Monument)"],"pageTypes":["landing","marketing"],"howToUse":"Settle: write Headline — solid line, Headline — outlined line, and Body, plus a CTA label + link. Monument: set Campaign to the key your site's campaign source looks up, plus a CTA label + link — no headline/body fields render in this direction.","pairsWith":["campaign-terms","campaign-tiers"],"sequence":{"follows":["campaign-terms"]},"avoidWhen":["The page needs more than one final CTA — use a standard content/CTA block for a secondary ask"],"register":"marketing-landing"}},{"slug":"give-form","package":"@wabbit/tome-blocks-campaign-pack","docs":"https://wabbit.com/docs/packages/blocks-campaign-pack","usage":{"summary":"The giving form for a campaign or a standing appeal. Pair with campaign-count for the running total and membership-card for dues. One-time is the only pre-selection: no amount, no Monthly and no fee cover is ever pre-chosen, and there is no decline copy. The button repeats the total, and the form works without script (a native post to the site's action, which hands off to the payment provider).","whenToUse":["A campaign or appeal page that takes gifts of any amount, one-time or monthly","The closing band of an organization site, beside the running total and a membership card"],"pageTypes":["landing","marketing"],"howToUse":"Set the one-time Price (a one-time Price that allows custom amounts) and, for monthly gifts, a monthly Price. Add up to six amount chips. Bounds and currency come from the Price. Your site passes its server action, its Price source and its fee rule to the pack's `./server` createHydratedRenderers; without them the block renders nothing.","pairsWith":["campaign-count"],"avoidWhen":["Selling goods or tickets (use the storefront pack)","You want an amount pre-selected or Monthly as the default: the block never does either"],"register":"marketing-landing"}},{"slug":"membership-card","package":"@wabbit/tome-blocks-campaign-pack","docs":"https://wabbit.com/docs/packages/blocks-campaign-pack","usage":{"summary":"Membership tiers as cards at wallet proportion. Each card leads with the price from your own recurring Price (so the card can never disagree with the charge), then says what the tier covers and what it doesn't. One tier can be recommended: a heavier border and a hidden \"(Recommended)\" label, with no popularity claim. On a narrow column a segmented control (native radios, no script) shows one card at a time, opening on the recommended tier; wider, all cards sit side by side.","whenToUse":["The closing band of an organization site, beside the running total and a give form","A join page where each tier is a recurring Price (monthly or yearly)","An organization that collects dues offline: set the source to Authored and write the prices as labels"],"pageTypes":["landing","marketing"],"howToUse":"Source Live (the default): give each tier the id of its recurring Price, and optionally a second monthly Price for the \"$2 a month\" figure. Your site passes its Price source to the pack's `./server` createHydratedRenderers; a tier whose Price is missing, inactive or one-time is dropped, and with no tier left the block renders nothing. Source Authored: write each tier's price and period as labels. Tick Recommended on at most one tier. The CTA link may contain {priceRef}.","pairsWith":["give-form","campaign-count"],"avoidWhen":["Selling goods or one-time products (use the storefront pack)","You want a \"most popular\" badge: the block has none, by design"],"register":"marketing-landing"}},{"slug":"campaign-case","package":"@wabbit/tome-blocks-campaign-pack","docs":"https://wabbit.com/docs/packages/blocks-campaign-pack","usage":{"summary":"The case for a campaign: the argument in prose, with accountability, a budget whose total is computed from its lines, and the terms in the margins. Pair with campaign-count and campaign-terms. The margins fold after the prose on a narrow screen.","whenToUse":["A campaign page that argues for its goal and wants the reader to see who is accountable and where the money goes","A page where the budget is filed somewhere you can cite"],"pageTypes":["landing","marketing"],"howToUse":"Write the case in Body. In the margins, list who is accountable, the last update, the budget lines (in whole currency units, with the record that backs them) and a terms link. The budget total is added up for you and, with Campaign set, the block warns in development when it differs from your campaign source's goal.","pairsWith":["campaign-count","campaign-terms"],"sequence":{"follows":["campaign-count"],"precedes":["campaign-tiers","campaign-terms"]},"avoidWhen":["A budget you can't cite to a filed document; leave the budget empty instead"],"register":"marketing-landing"}},{"slug":"media-panel","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A tall, full-viewport cover image where the photograph IS the layout — a translucent, docked copy card (kicker, fig label, heading, body) anchors to one corner, with an optional call to action below the panel.","whenToUse":["A single strong photograph needs to carry a section on its own, with copy annotating it rather than competing with it","A cinematic full-bleed moment between denser content sections","A case-study or gallery opener where the image IS the argument"],"pageTypes":["landing","about","marketing","editorial-article","portfolio"],"howToUse":"Upload a full-bleed cover image, then choose which corner the docked copy card anchors to (bottom left by default). Fill in a kicker, fig label, heading, and body as needed — the dock only renders if at least one is set. Add an optional call to action below the panel, and choose a panel height (Tall or Standard).","pairsWith":["pull-interlude","scene-plate","statement-band"],"avoidWhen":["The section needs more than one image or a gallery of photos — use a video wall or scene plates instead","The copy is the primary content and the image is secondary — use a standard media + content block instead"],"register":"marketing-landing"}},{"slug":"pull-interlude","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A full-bleed dark band (a painterly background image, or a hatched placeholder when none is set) carrying ONE centered display-serif pull-line. Wrap a run in `**double asterisks**` for an accent-colored span. A single-line entrance reveal plays on scroll (honors reduced motion).","whenToUse":["A mid-argument cinematic pause between two dense sections — letting one line of copy breathe on its own","A single memorable statement that deserves a full-bleed art moment, not a bullet in a list","A page that already has a features/content grid and needs a tonal break before the next section"],"pageTypes":["landing","about","marketing","editorial-article"],"howToUse":"Write the Pull line — one sentence, wrap a phrase in `**double asterisks**` for an accent-colored run. Optionally add Background Art (a full-bleed painterly scene); an empty slot renders a labeled hatched placeholder, never a blank band. Set a Background Art Note to customize the placeholder tag text.","pairsWith":["media-panel","statement-band","scene-plate"],"avoidWhen":["The moment needs a heading plus supporting body copy — use a standard statement or interstitial block instead (this block is exactly one line)","The page already has a full-bleed band immediately above or below it — back-to-back full-bleed bands read as one shapeless section"],"register":"marketing-landing"}},{"slug":"cinema-feature","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"One flagship full-bleed video frame — an optional eyebrow + heading context band, a 21:9 (or 16:9) poster that swaps to a real player on click, and a hairline-topped caption rail with title/duration/description. Zero video bytes load until the visitor clicks play. Renders a hairline placeholder frame when no video is set, so the block ships before content exists.","whenToUse":["A flagship reel or hero clip that should feel restrained until requested","The single most important piece of video on a page","A moment that wants a cinematic full-bleed frame rather than an inline tile"],"pageTypes":["landing","marketing","about","portfolio"],"howToUse":"Set the video (upload or an external URL — direct file, Mux, YouTube, Vimeo, or Bunny Stream) and choose a ratio (21:9 cinematic or 16:9). Optionally add an eyebrow + heading context band above the frame, and a caption (title, duration, description) below it. Leave the video unset to show an intentional placeholder frame during authoring.","pairsWith":["video-wall","testimonial-rail","trigger-tile"],"avoidWhen":["The video is one of several clips in a set — use video-wall instead","The video needs to sit inline in a reading column rather than as a full-bleed hero — use trigger-tile"],"register":"marketing-landing"}},{"slug":"trigger-tile","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"One inline video tile with zero video bytes at rest — a poster tile inside the reading flow, click opens a modal that mounts a real player on demand and tears it down completely on close. Framed (inset within the column) or edge-to-edge styles.","whenToUse":["A single clip that belongs inline in an article or long-form page, not as a full-bleed hero","Dropping a supporting video into prose flow without loading any video bytes until requested"],"pageTypes":["blog","editorial-article","docs","about"],"howToUse":"Set the video (upload or an external URL) and an optional poster. Title feeds the accessible label only; Caption is the visible mono line under the tile. Duration is display-only, shown in the corner chip and caption line. Choose Framed (inset within the column) or Edge-to-edge.","pairsWith":["cinema-feature","video-wall"],"avoidWhen":["The video is the page hero — use cinema-feature for a full-bleed treatment","Several clips need to sit side by side — use video-wall"],"register":"editorial"}},{"slug":"video-wall","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A grid of 2 or 3 columns of video cells — muted loops that play only while their cell is in view, pausing off-screen. Click opens a page-local lightbox with controls and sound. An empty cell renders a hairline placeholder slot, so a wall can mix filled and empty cells while it is being authored.","whenToUse":["Showcasing several short clips together as a single ambient composition","A \"reel wall\" or gallery of motion moments rather than one flagship video"],"pageTypes":["landing","marketing","portfolio"],"howToUse":"Add clips (upload or external URL), each with an optional title shown in the hover chip and lightbox label. Choose 2 or 3 columns and a gap (seamless seals the wall into one continuous field of motion). Autoplay-in-view is on by default and always forced off under reduced motion.","pairsWith":["cinema-feature","testimonial-rail","trigger-tile"],"avoidWhen":["There is one flagship video that deserves full-bleed emphasis — use cinema-feature","The clips are client testimonials with names/quotes — use testimonial-rail"],"register":"marketing-landing"}},{"slug":"video-spread","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A 50/50 spread pairing copy (eyebrow, heading, rich body, optional accent link) with a full-height video panel on the other side. Loop mode plays muted ambient motion in view with a sound-on-request chip; click-to-play shows a poster and play affordance until clicked. Reduced motion always forces click-to-play. Two variants swap which side carries the video.","whenToUse":["A rhythm-break moment pairing a short editorial statement with motion","Introducing a process, place, or product with ambient video alongside supporting copy"],"pageTypes":["landing","marketing","about"],"howToUse":"Write an eyebrow, heading, and body, plus an optional accent link. Set the video (upload or external URL) and pick loop or click-to-play preview mode. Choose the video-right (default) or video-left variant, an appearance band, and optional per-element type-size overrides. The video is optional; until one is set the panel renders a placeholder slot.","pairsWith":["cinema-feature","video-wall"],"avoidWhen":["The video is the sole focus with no supporting copy — use cinema-feature","Several short clips need to sit together as a set — use video-wall"],"register":"marketing-landing"}},{"slug":"testimonial-rail","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A drag-to-scroll, scroll-snap rail of portrait video testimonial cards. Each card swaps its poster for a playing video on click, with strict one-at-a-time playback — starting a new card stops whichever one was playing. Name, role, and a one-line quote sit under each card. A card with no video renders a hairline placeholder, so a rail can mix filled and empty cards while it is being authored.","whenToUse":["A set of client or customer video testimonials on a landing or about page","Social proof that benefits from a face and a voice, not just a quote"],"pageTypes":["landing","marketing","about"],"howToUse":"Add testimonials: each needs a video (upload or external URL), an optional poster, and a name/role/quote. Choose a card width (compact/standard/wide) and a gap (seamless butts cards edge-to-edge). Add an optional call to action below the rail, e.g. linking to all client stories.","pairsWith":["cinema-feature","video-wall"],"avoidWhen":["The testimonials are text-only, with no video — use a text testimonial block instead","There is only one testimonial to feature — a single card in a rail reads sparse"],"register":"marketing-landing"}},{"slug":"chaptered-walkthrough","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A real <video> element next to (or above) a chapter rail. Chapter durations and each chapter's progress fill are derived live from the chapters' start times and the video's real length — nothing is stored. Clicking a chapter seeks and plays from that point.","whenToUse":["A product demo or engagement walkthrough with distinct named sections a visitor may want to skip between","A recorded call, training video, or long-form explainer that benefits from a visible table of contents","Any single video where \"jump to the part I care about\" is the primary way people will use it"],"pageTypes":["landing","marketing","docs","about"],"howToUse":"Upload a video or paste a direct file URL (this block only plays a file it can seek directly — no YouTube/Vimeo/Bunny Stream embeds). Add at least two chapters with a title and a start time in seconds; each chapter's length is computed automatically from the next chapter's start (or the video's real duration for the last one). Choose whether the rail sits to the right of the player or below it.","pairsWith":["scrub-story","ambient-band"],"avoidWhen":["The clip has no meaningful sections to jump between — use a plain video block instead","You need an embeddable YouTube/Vimeo/Bunny Stream link — this block only plays a direct file it can seek"],"register":"marketing-landing"}},{"slug":"scrub-story","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A pinned, full-viewport scroll container: as the reader scrolls through it, the video's current time lerps toward the scroll position — the reader scrubs the clip by reading. Beats (2-5) activate a left-rail copy stack at their own scroll-progress thresholds. Three-tier degrade: scrub (seekable video) -> crossfading beat stills -> reduced-motion unpinned static stacked beats.","whenToUse":["A product or process story that unfolds as the visitor scrolls, rather than one they must press play on","A narrative with 2-5 clear beats that benefit from scroll-synced pacing","A cinematic, editorial-feeling section that should feel authored, not just embedded"],"pageTypes":["landing","marketing","about","portfolio"],"howToUse":"Upload a video or paste a direct file URL (this block only plays a file it can seek directly — no YouTube/Vimeo/Bunny Stream embeds). Add 2-5 beats in scroll order, each with an activation percent (0-100, first beat at 0), an eyebrow, a heading, body copy, and an optional still image (used as the crossfade fallback and the reduced-motion frame). Choose a pin length — longer pins slow the scrub across the same footage.","pairsWith":["chaptered-walkthrough","ambient-band"],"avoidWhen":["The content has fewer than 2 beats — this block requires at least 2","You need an embeddable YouTube/Vimeo/Bunny Stream link — this block only plays a direct file it can seek"],"register":"marketing-landing"}},{"slug":"ambient-band","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A full-bleed band filled by a muted, looping video (or its poster, for reduced-motion visitors) with a scrim and a left-weighted copy column — eyebrow, heading, coda, and an optional ghost-button link. A visual \"breath\" between two denser sections rather than a content-heavy moment.","whenToUse":["A pacing break between two sections that wants atmosphere rather than another message","A short ambient loop (b-roll, product-in-motion) with a light supporting line of copy","A quieter, slower cinematic beat than a full autoplay hero"],"pageTypes":["landing","marketing","about"],"howToUse":"Upload a video or paste a direct file URL (this block only plays a file — no YouTube/Vimeo/Bunny Stream embeds). Choose a band height and scrim strength, then add an eyebrow, heading, coda, and an optional CTA label + URL. Leave the video unset and add a poster for a fully static ambient band, or leave both unset to show an intentional placeholder frame.","pairsWith":["scrub-story","chaptered-walkthrough"],"avoidWhen":["The moment needs to be the flagship, attention-demanding video on the page — use cinema-feature instead","The video needs a click-to-play affordance rather than an ambient muted loop"],"register":"marketing-landing"}},{"slug":"scene-plate","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A full-viewport (or medium/tall) chapter plate: a full-bleed scene image with an optional gradient scrim, and a display heading (wrap a phrase in *asterisks* for an accent span) — either centered as an act plate, or seated bottom-left as a cinema-frame chapter title. An optional side-seated reading panel adds a subline and rich-text body for prose-adjacent scene breaks.","whenToUse":["Opening or dividing a long-form piece into named acts or chapters","A full-viewport scene-backed statement with an optional supporting paragraph","A repeatable page-opening moment, used more than once down a page"],"pageTypes":["landing","about","editorial-article","marketing"],"howToUse":"Write a heading (wrap a span in *asterisks* for the accent-serif treatment) and pick a treatment: Act Plate (centered) or Cinema Frame (bottom-left, display scale). Add a background scene — an empty slot renders a placeholder label. Choose a scrim and height, and optionally seat a reading panel (left/right/center) with a subline and rich-text body alongside the plate.","pairsWith":["scene-caption","statement-band"],"avoidWhen":["The page needs a short atmospheric pause with no headline — use scene-caption instead","Back-to-back full-bleed plates already precede it — two in a row reads as one shapeless section"],"register":"editorial"}},{"slug":"scene-caption","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A small, quiet cinematic beat: full-bleed atmospheric art (or a labeled hatched placeholder when unset) under a hatch texture and scrim, with a bare 2px accent rule and one left-anchored italic caption line. Deliberately smaller and quieter than a hero — a breathing space, not a second headline moment.","whenToUse":["A quiet pause between two denser sections that wants atmosphere and a single understated line, not another headline","A recurring \"chapter breath\" in a long-form narrative page","A moment that needs to feel authored and cinematic without competing for attention"],"pageTypes":["landing","about","editorial-article","marketing"],"howToUse":"Add a background art image (an empty slot renders a hatched placeholder, never a blank band) and a short italic caption line. Leave the art unset during authoring — the placeholder carries an editable note tag so the gap stays visible and intentional.","pairsWith":["scene-plate","statement-band"],"avoidWhen":["The moment needs a real headline or a call to action — use scene-plate or full-bleed-interstitial instead","Back-to-back full-bleed atmospheric bands already precede it — two in a row reads as one shapeless section"],"register":"editorial"}},{"slug":"statement-band","package":"@wabbit/tome-blocks-cinema-pack","docs":"https://wabbit.com/docs/packages/blocks-cinema-pack","usage":{"summary":"A single centered statement on a full-bleed band, reading like the closing line of an argument rather than a marketing headline. Wrap a phrase in *asterisks* for the accent emphasis. An optional support line beneath it inks in from muted to fully-colored as it scrolls through view. Two faces: a quieter serif italic (default) or a heavier display register for an event-scale moment.","whenToUse":["A single verdict or promise the page wants to state once, plainly — a guarantee, a pricing philosophy, a closing thought","A pacing beat between denser sections that wants one line of real weight rather than a new topic","A closing statement for a pricing or proof-heavy page"],"pageTypes":["landing","pricing","about","marketing"],"howToUse":"Write the statement (wrap the emphasis phrase in *asterisks*). Choose the Statement Face — Serif for the quieter default register, Display for a heavier event-scale moment. Add an optional support line, which inks in on scroll. Toggle the section header strip on to add a mono label + section-number locator above the statement.","pairsWith":["scene-plate","ambient-band"],"avoidWhen":["You need more than one statement or any supporting body copy beyond the single support line","The moment needs a call to action — this block has none by design; follow it with a block that does"],"register":"marketing-landing"}},{"slug":"section","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"The universal page band — a full-width container with a background color, top/bottom padding, and a max-width constraint. Wrap related blocks in one to give them a shared surface, rhythm, and reading width. The structural workhorse of nearly every page.","whenToUse":["Grouping a heading + body + media into one visually distinct band","Putting a color or dark surface behind a stretch of content","Establishing consistent vertical rhythm between page regions"],"pageTypes":["landing","editorial-article","docs","about","marketing","portfolio","blog"],"howToUse":"Set a backgroundColor (none/white/light-gray/dark) to alternate bands and signal a new region; tune paddingTop/paddingBottom for vertical rhythm; pick a maxWidth (default/narrow/wide/full) to constrain the reading line — narrow for prose, full for edge-to-edge media. Nest your real content blocks inside. Has no schema variants — its options ARE its variation.","pairsWith":["section-header","content","text-block","grid","spacer"],"sequence":{"precedes":["section-header","spacer"]},"avoidWhen":["You only need vertical gap between two blocks — use `spacer`","You need a scroll-stacking card effect across bands — use `stacking-wrapper`"],"register":"structural"}},{"slug":"spacer","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A pure vertical-gap block — inserts controlled whitespace between two blocks with a size scale and responsive show/hide. Bridge mode upgrades it into a viewport-tall breathing pause that can center a hairline rule or a section numeral for editorial pacing.","whenToUse":["Adding deliberate breathing room where padding alone is not enough","Showing or hiding the gap only on mobile or only on desktop","A quiet editorial transition between major sections (bridge mode)"],"pageTypes":["landing","editorial-article","docs","about","marketing","portfolio","blog"],"howToUse":"Pick a size (extraSmall–large) or set Custom for a precise base-unit value. Use responsiveOptions (mobileOnly / desktopOnly) to make a gap appear on one breakpoint only. For an editorial beat, enable bridgeMode and choose bridgeContent: hairline for a centered rule, numeral for a section number (set bridgeNumeral), or custom-text. Renders nothing but space — never put real content in it.","pairsWith":["section","section-header","content","text-block"],"sequence":{"follows":["section"],"precedes":["section-header"]},"avoidWhen":["A whole band needs a surface or padding — use `section` instead","You want a visible labeled divider with copy — use `section-header`"],"register":"structural"}},{"slug":"grid","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A simple equal-column CSS grid container — choose a fixed column count (1/2/3/4/6) and a gap, then drop repeating items inside. The go-to scaffold for card rows, feature triplets, logo walls, and any uniform tiled layout.","whenToUse":["Laying out a row of cards, features, or stats in equal columns","A uniform tiled gallery or logo wall","Any place you want N evenly sized cells with a consistent gutter"],"pageTypes":["landing","marketing","about","portfolio","docs","editorial-article"],"howToUse":"Set columns to the number of cells per row and gap for the gutter; optionally set a backgroundColor band. Put repeating sibling items inside — the grid only arranges, it carries no content of its own. For asymmetric or 14-track editorial column widths use `content`; for a deliberately irregular tiled layout use a bento block.","pairsWith":["section","section-header","card","card-grid","content"],"sequence":{"follows":["section-header"]},"avoidWhen":["You need columns of differing widths — use `content` (14-track) instead","You want an intentionally irregular masonry/bento layout — use a bento block"],"register":"structural"}},{"slug":"layoutGrid","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A curated CSS-grid container: choose a starter template (the inserter shows each as a thumbnail), then drop existing blocks into the cells and nudge each child’s column/row span. The default is already a good layout — the system makes a broken one hard to author.","whenToUse":["Composing an arbitrary arrangement of existing blocks (cards beside a tall image, a feature + sidebar, a banner over a trio) without building a bespoke block for it","A two-up card group beside a tall image in a six-column band (the canonical example)","Any multi-cell layout the fixed containers (editorialSpread, stackingWrapper) do not cover"],"pageTypes":["landing","marketing","dossier","about","portfolio"],"howToUse":"Pick a starter template via the variant picker — it pre-sets the column count and per-cell spans. Drop nestable blocks into the cells; adjust a child’s `_colSpan`/`_rowSpan` to retune. Internally-wide blocks (stat strips, card grids) carry a minColSpan floor so they can’t be crammed. The grid owns responsive collapse: each template defines its own mobile reflow (tall images relocate rather than stacking in source order). One level of nesting only — do not place a layoutGrid inside a layoutGrid.","pairsWith":["section","section-header","card","card-grid"],"sequence":{"follows":["section-header"]},"avoidWhen":["You need editorial marginalia (sticky rail, footnotes, running index) — use editorialSpread","You need a scroll-stacked card sequence — use stackingWrapper","A simple equal-column row suffices — the basic `grid` block is lighter"],"register":"structural"}},{"slug":"stacking-wrapper","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A scroll-driven container that pins its child sections and stacks them like overlapping cards as the reader scrolls, with optional parallax, fade, and scale. A high-impact motion device for turning a sequence of sections into a single choreographed scroll moment.","whenToUse":["You want a sequence of full sections to overlap and stack on scroll","A landing or showcase moment that should feel kinetic and premium","Telling a short ordered story across 2-4 stacked panels"],"pageTypes":["landing","marketing","portfolio","about"],"howToUse":"Requires at least 2 child sections (minRows: 2) supplied via config (childBlocks) — typically `section` blocks. Set cardOverlap and cornerRadius for the stacked look, and tune the default animation settings (parallaxIntensity, fade, scale). Enable disableOnMobile for small screens where stacking is heavy. Place once per scroll moment; do not nest stacking wrappers.","pairsWith":["section","section-header","spacer"],"sequence":{"follows":["section-header"]},"avoidWhen":["You only need static bands with no scroll choreography — use plain `section` blocks","Long-form reading content where motion would distract — keep it editorial","A single section — stacking needs at least two children"],"register":"structural"}},{"slug":"content","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"The flexible multi-column rich-text region — an array of columns sized against a 14-track grid, each with its own richText, alignment, and optional link. The general-purpose body block when you need columns of differing widths or an editorial column range with a controlled measure.","whenToUse":["Body copy that needs to sit in a specific editorial column range","A two- or three-column text layout with uneven widths (e.g. 4 + 10)","Rich content where you want to pin the reading measure (55/65/75ch)"],"pageTypes":["editorial-article","landing","docs","about","blog","marketing"],"howToUse":"Add columns and set each column size so a row sums to 14 (e.g. one 4 + one 10). Per column set alignment, headingStyle, richText, and an optional link. Use editorialColumnRange (default 3-11, shifted, or full) to place the block within the page grid and measureConstraint to cap the reading line. For a plain single text region without column math, reach for `text-block`; for premium prose treatments use `content-pro`.","pairsWith":["section","section-header","text-block","pull-quote","code"],"sequence":{"follows":["section-header"]},"avoidWhen":["A single plain rich-text block with links — use `text-block`","A strict left/right two-column text-or-media split — use `content-two-column`","Premium editorial prose (drop cap, end mark, pacing) — use `content-pro`"],"register":"editorial"}},{"slug":"text-block","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"The plain workhorse rich-text block — headings, paragraphs, lists, inline code, and a set of buttoned/inline links, with a controllable reading measure and editorial column range. The simplest way to put a region of formatted prose on a page.","whenToUse":["A straightforward block of body copy, headings, or lists","Intro/outro prose around heavier media or feature blocks","Text plus a couple of CTA links in default/outline/inline styles"],"pageTypes":["editorial-article","landing","docs","about","blog","marketing"],"howToUse":"Write the content (h1-h4, lists, alignment, inline code) and add links in the links array (each with a default/outline/inline appearance). Constrain readability with measureConstraint (55/65/75ch) and place it in the grid with columnRange. Reach for `content` when you need multiple columns of differing widths, or `content-pro` for premium editorial prose treatments.","pairsWith":["section","section-header","content","pull-quote","code"],"sequence":{"follows":["section-header"]},"avoidWhen":["You need multi-column widths or a 14-track layout — use `content`","A strict text/media two-column split — use `content-two-column`","Premium prose with drop cap / end mark / pacing — use `content-pro`"],"register":"editorial"}},{"slug":"code","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A syntax-highlighted code snippet with a language selector, an optional caption (below or in the margin), and a breakout width for technical reading. The block for showing real code in docs, tutorials, and technical articles.","whenToUse":["Showing a code example, config, or command in documentation","A technical article or tutorial that needs highlighted source","Annotating a snippet with a caption explaining what it does"],"pageTypes":["docs","editorial-article","blog","about"],"howToUse":"Set the language (TypeScript, JavaScript, CSS, HTML, JSON, Shell, Python, Markdown) and paste the snippet (required). Add an editorialCaption and choose captionPlacement (below for a standard label, marginalia for a side note). Use breakoutMode: wide for long lines that need margin-to-margin width. Keep snippets focused — long listings hurt reading flow.","pairsWith":["text-block","content","section-header","pull-quote"],"sequence":{"follows":["text-block","content"]},"avoidWhen":["A short identifier or command inline in a sentence — use inline code in `text-block`","Marketing copy where raw code would not land — describe it in prose instead"],"register":"application"}},{"slug":"section-header","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"The standard introduction for a content region — an optional eyebrow badge, a sized/weighted title, a rich-text description, and an optional CTA link, arranged split (title left / desc right) or stacked left/center/right. Drop one at the top of a section to label and frame what follows. Six variants: default (the classic badge/title/description split), statement-hero (oversized serif statement with staggered line-rise entrance, kicker + aside description column), ruled-split (hairline top rule, mono kicker, serif title left / running body right, scroll-reveal, with optional paired rows under the body), transcript-split (copy column with a lede, a copyable command row and a button, beside a sticky plate holding a labeled sample exchange), transcript-stage (the same fields staged as a headline, a large terminal plate that replays turn by turn, a claim panel and the command), and product-split (copy with up to two links and an optional list beside a captioned picture that can bleed to the right edge or sit inset).","whenToUse":["Titling a section so the reader knows what the band is about","An eyebrow + headline + supporting line above a grid or feature row","A region intro that also needs a \"learn more\" / CTA link","Transcript Split: explaining a command or workflow in prose, with the command to copy and a short worked example beside it","Transcript Stage: the same material given a whole band, with the exchange as the main event and a replay button","Product Split: an opening hero or a mid-page band that pairs copy and actions with a real capture of the product"],"pageTypes":["landing","marketing","about","docs","editorial-article","portfolio"],"howToUse":"Set the title (required) plus titleSize/titleWeight; add an optional category eyebrow and a description (with descriptionSize). Choose alignment: split for a magazine-style title/description pair, or start/center/end to stack. Enable the link group for a CTA. Place it as the first block inside a `section`, immediately before the grid/feature/content it introduces. For the Transcript Split variant, also fill the lede, the description (before the command) and descriptionAfter (after it), the command row (code, language, an accessible label), and the transcript rows (you, call, result, agent; call and result render as code). A transcript label is required whenever there are rows: it tags the sample in the plate head and leads the caption, so say plainly that the exchange is a sample. Transcript Stage reads those same fields and adds a claim, a command intro and a replay label; its turns replay once on first scroll into view and stay fully visible with reduced motion or without JavaScript. For Product Split, set the title level to h1 on the one opening hero, add up to two links, an optional list, the picture, and a caption; tick the bleed box to run the picture to the right edge, cropped flush at the bottom of the band, or leave it off for an inset picture with the caption underneath. Ruled Split takes optional rows (a label and a value each) that sit under the description.","pairsWith":["section","grid","content","card-grid","spacer"],"sequence":{"follows":["section"],"precedes":["grid","content","card-grid"]},"avoidWhen":["A page-opening hero is needed — use a hero block, not a section header","You only need invisible vertical space — use `spacer`","Transcript Split: the exchange is a real, current result rather than a labeled sample, or there is no command or exchange to show — use ruled-split","Product Split: there is no picture of the product to show, which leaves one column — use ruled-split"],"register":"structural"}},{"slug":"content-two-column","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A fixed left/right split where each column independently holds either rich text or a media upload (with caption). The classic text-beside-image / image-beside-text band — pair a paragraph with a screenshot, or set both columns to text for a side-by-side comparison.","whenToUse":["A \"text on one side, image on the other\" explanatory band","Two short text blocks read side by side (e.g. before / after)","An image with a supporting caption next to a paragraph"],"pageTypes":["landing","marketing","about","editorial-article","docs"],"howToUse":"For each of columnLeft and columnRight, set contentType to text (then author richText) or media (then upload an image + optional caption). Set the layout width (normal / narrow / fullWidth). To alternate sides down a page, swap which column holds the media. For more than two columns or uneven widths use `content`; for a wall of equal cells use `grid`.","pairsWith":["section","section-header","content","text-block","media-feature"],"sequence":{"follows":["section-header"]},"avoidWhen":["You need three or more columns, or uneven widths — use `content`","A grid of many equal tiles — use `grid`","A single full-width text region — use `text-block`"],"register":"editorial"}},{"slug":"article-hero","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"The header for a written piece — title, byline, breadcrumbs, and read time over a color or image background. One block with a Post variant (blog/news) and a Chapter variant (book/guide section).","whenToUse":["The top of a blog post, news article, or guide chapter","Any page that opens with a titled, attributed piece of writing"],"pageTypes":["blog","editorial-article","docs"],"howToUse":"Pick the variant: Post (byline + date emphasis), Chapter (section/part emphasis, author optional) or Margin (an essay header with serial, kind, dates and an \"In short\" list in the left margin, and an optional sticky running head with reading progress). Fill headline + description; add breadcrumbs for navigation context and an author group for the byline. Use an image background with the gradient overlay for cover-style headers, or a flat color for a quieter editorial feel. Exactly one per document, as the first block.","pairsWith":["post-content","prose-section","related-items","signature"],"sequence":{"precedes":["post-content","prose-section"]},"avoidWhen":["Marketing/landing pages — use the marketing `hero` family instead","Pages without a single authored title (e.g. index/listing pages)"],"register":"editorial"}},{"slug":"bento-section","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A bento-grid showcase band — a large headline, a multi-image gallery arranged in a bento layout, and an optional sidebar pull-quote or callout. Use it to make a high-density visual statement without losing editorial structure.","whenToUse":["A hero-alternative that prioritizes gallery richness over a single hero image","A \"work samples\" or \"proof of concept\" band mid-page that needs headline + visual grid together","A brand moment where multiple images at varying scales communicate variety or depth"],"pageTypes":["portfolio","marketing","landing","about"],"howToUse":"Requires minColSpan 2 — do not drop into a narrow column. Set the headline and populate the gallery items (typically 3-5 images at mixed aspect ratios for authentic bento density). The optional sidebar slot accepts a short quote or stat; if unused the gallery expands to fill. Pair with a `section-header` above for context and a `content` or `card-grid` below for follow-through detail. For a single-image + text pairing, use `content-two-column` instead.","pairsWith":["section-header","card-grid","content-two-column","pull-quote"],"sequence":{"follows":["section-header"],"precedes":["card-grid","content"]},"avoidWhen":["You only have one or two images — use `content-two-column` for a focused media + text pair","The primary goal is a video hero — use `showcase`","The page is narrow-column editorial — bento needs full-width breathing room"],"register":"marketing-landing"}},{"slug":"card-grid","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A responsive grid of cards — each with optional media, heading, body text, and a link — for presenting features, services, team members, or any set of peer items at a glance.","whenToUse":["A feature or benefit grid where each item needs a visual and short description","A services or offerings row with 3-6 items that share the same visual weight","A team grid or partner-logo grid where consistent card treatment matters"],"pageTypes":["landing","marketing","about","portfolio","pricing"],"howToUse":"Requires minColSpan 2. Set the column count to match item density (typically 3 or 4 columns). Each card takes a media item (image or icon), heading, body, and optional link. For a single standalone card outside a grid context use `card`. Introduce the grid with a `section-header` above. For a more editorial, asymmetric layout use `bento-section` instead.","pairsWith":["section-header","card","bento-section","checklist","content"],"sequence":{"follows":["section-header"]},"avoidWhen":["You need only one or two items side by side — use `content-two-column`","Items are highly varied in size or emphasis — use `bento-section` for organic density","The items are feature bullets, not media-forward — use `checklist`"],"register":"marketing-landing"}},{"slug":"card","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A single standalone card — media, heading, body copy, and an optional link — for callouts, feature highlights, or testimonials that need the card treatment outside of a grid container.","whenToUse":["A lone featured item in an otherwise text-heavy section that needs visual lift","A callout inside a rich-text column (e.g. a tip, a case study reference)","A sidebar or aside card where a `card-grid` would be over-engineered"],"pageTypes":["editorial-article","landing","blog","about","docs"],"howToUse":"Set media (image or icon), heading, and body. The link field drives a card-level CTA or makes the whole card clickable depending on the variant. For multiple cards in a uniform grid use `card-grid`. For a pure quote with attribution use `pull-quote`.","pairsWith":["card-grid","content","section-header","pull-quote"],"avoidWhen":["You have 3 or more peer cards — use `card-grid` for consistent spacing and breakpoint behavior","The content is a quotation with attribution — use `pull-quote`"],"register":"marketing-landing"}},{"slug":"changelog","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A structured release-notes feed — dated entries each carrying a version tag, change type badge (added/fixed/changed/removed), and rich-text body — for surfacing product history in a scannable timeline.","whenToUse":["A /changelog or /releases page where entries are authored in the CMS","A product docs page that needs an embedded \"what's new\" section","A dossier or about page where transparency about version history builds trust"],"pageTypes":["docs","dossier","about","blog"],"howToUse":"Each entry requires a date, version string, and at least one change item with a type and description. Entries render newest-first by default; override with the sort field if the collection supplies a different order. Pair with a `section-header` to introduce the log and a `related-items` below if readers should be directed to detailed release posts.","pairsWith":["section-header","related-items","content","text-block"],"sequence":{"follows":["section-header"]},"avoidWhen":["The content is a single announcement — use `content` or `text-block` with a date subheading instead","You need a visual timeline with media or milestones — this block is text-structured data, not a design timeline"],"register":"dossier"}},{"slug":"checklist","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A styled bullet list with configurable check icons and item states (default, checked, crossed) — purpose-built for feature comparisons, benefit lists, and pre-purchase confirmation checklists.","whenToUse":["A \"what's included\" or \"what you get\" list on a pricing or landing page","A feature-comparison column where checked/unchecked states communicate plan differences","A pre-flight or qualification list (e.g. \"this is right for you if…\")"],"pageTypes":["pricing","landing","marketing","about"],"howToUse":"Add items with label text and optionally set each item's state (checked, crossed, neutral) and icon override. Pair with a `section-header` or `content` block above to frame the list. On pricing pages, embed inside a plan card alongside `card-grid`. For narrative prose lists where visual icons would feel heavy, use `text-block` with a bullet richText instead.","pairsWith":["section-header","card-grid","content","text-block"],"avoidWhen":["The list items need multi-line rich-text bodies — use `content` columns instead","You have 3+ feature items each with images — use `card-grid`"],"register":"marketing-landing"}},{"slug":"content-pro","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"The premium body-content block. Pick a variant: Prose (editorial body with measure, pacing roles, optional sidebar, drop cap + end mark), Post (a section title over rich blog content), Marquee (rich content with an optional scrolling-text band), or Bento (content paired with a bento grid of media). For plain unstyled text regions reach for the free `content` / `text-block` primitives instead.","whenToUse":["Long-form editorial article body — Prose variant","Blog/news post body with a section heading — Post variant","A content section that wants kinetic scrolling text — Marquee variant","A content section paired with a grid of media tiles — Bento variant"],"pageTypes":["editorial-article","blog","landing","marketing","about"],"howToUse":"Pick the variant. Prose: set paceRole (lede enables drop cap; conclusion enables an end mark), measure, and column range; switch its inline `variant` to sidebar to add a metadata column. Post: a section title + main content. Marquee: author the content, then enable the marquee and set its text/speed/size + position. Bento: a section title + intro content, then add bento items sized 1x1/2x1/1x2/2x2. For plain text, use the free `content` primitive.","pairsWith":["pull-quote","showcase","media-feature","cta"],"sequence":{"follows":["article-hero","hero-pro"]},"avoidWhen":["A plain unstyled text region — use the free `content` / `text-block` primitives","A page opener — use `hero-pro` or `article-hero`"],"register":"editorial"}},{"slug":"content-with-corner-notch","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A two-column content block that adds a decorative corner-notch cutout to one panel — a structural variant of `content-two-column` for pages where a signature geometric detail distinguishes the brand.","whenToUse":["A brand-moment section where the corner-notch motif is part of the design language","An about or mission band that needs the text + media split but with more visual personality than a plain two-column","A feature highlight where the notch draws the eye to the media panel"],"pageTypes":["marketing","landing","about","portfolio"],"howToUse":"Configure columns as you would `content-two-column` — set left/right content and media — then choose the notch position (top-left, top-right, bottom-left, bottom-right) to align with the site's corner-notch motif. Use sparingly: one or two instances per page to avoid the effect becoming wallpaper. For a plain two-column split without the notch, use `content-two-column`.","pairsWith":["section-header","content-two-column","content","bento-section"],"avoidWhen":["The design system does not use the corner-notch motif — the detail will read as a mistake","You need more than two columns — use `content` with the 14-column grid","The block appears more than twice on a page — overuse dilutes the effect"],"register":"marketing-landing"}},{"slug":"custom-hero","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":null},{"slug":"custom","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"An escape hatch for site-specific blocks not covered by the standard library — a typed container that passes through to a custom renderer registered in the consuming site. Intended for developer use.","whenToUse":["A one-off interactive component (e.g. a configurator, map embed, or live calculator) that only exists in one site","Migrating legacy content into Tome before a proper block spec is written","A developer proof-of-concept that hasn't yet been proposed for the core registry"],"pageTypes":["landing","marketing","docs","portfolio"],"howToUse":"Select the custom type key from the site's registered custom block map — the type selector is populated by the consuming site, not the platform. No platform fields beyond the type selector and a title are standard. Note that custom blocks receive no platform-level responsive or accessibility guarantees; the site's renderer is responsible. When a custom block graduates to a reusable pattern, propose it for a proper `@wabbit/blocks-extras` spec before the next major version.","pairsWith":["section-header","content","section"],"avoidWhen":["A standard block already covers the need — prefer `card-grid`, `showcase`, `content`, or `layout-grid`","You are building a new page type and expect to reuse the component — spec it as a first-class block instead"],"register":"application"}},{"slug":"hero-pro","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"The premium opener for pages that want a distinctive feel — a Typography variant (sized type over a background, editorial register) or an Image variant (one fitted, dominant image). The free `hero` covers standard marketing openers; reach for Hero Pro when you want type or image to BE the hero.","whenToUse":["A type-forward landing page where the words are the visual","An image-dominant masthead (campaign, brand, portfolio cover)"],"pageTypes":["landing","marketing","portfolio","about"],"howToUse":"Pick the variant. Typography: set headline/subheadline sizes and a background (color or image with gradient overlay) — best centered with loose spacing. Image: choose one image and its fit + text theme; keep copy minimal (the image leads). For standard hero needs (eyebrow, reviews, supporting images, CTAs) use the free `hero` instead.","pairsWith":["feature","featureHero","cta","logo-slider"],"sequence":{"precedes":["feature","featureHero"]},"avoidWhen":["Standard marketing openers with eyebrow/reviews/CTAs — use the free `hero`","Article/post headers — use `article-hero`"],"register":"marketing-landing"}},{"slug":"image-marquee","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A continuously scrolling strip of logos or images — client logos, partner marks, press mentions, award badges — for social-proof bands that communicate breadth at a glance. Requires the motion feature flag.","whenToUse":["A \"trusted by\" or \"as seen in\" logo strip below a hero on a landing page","A partner/integration logo row that needs to show many marks without a static grid feeling cramped","A press-mention or award strip where the scroll implies an ongoing, growing list"],"pageTypes":["landing","marketing","about"],"howToUse":"Add image items (logos work best at consistent height, varied widths). Set the mode to \"images\" (default) or \"text\" for text-only scrolling — for text-only, the sibling `marquee` block is purpose-built. Control speed and direction with the speed and reverse fields. Requires `requiresMotion: true` — the consuming page must opt in to motion; on reduced-motion the strip falls back to a static row. For a non-animated logo grid, use `card-grid` with icon-mode cards.","pairsWith":["section-header","card-grid","marquee","content"],"sequence":{"follows":["section-header"]},"avoidWhen":["Text-only scrolling is the goal — use `marquee` which is built for that mode","The logo count is 4 or fewer and motion feels gratuitous — use `card-grid` in a static row","The page must be fully motion-free — this block requires motion to be enabled"],"register":"marketing-landing"}},{"slug":"lexical-banner","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":null},{"slug":"lexical-document-embed","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":null},{"slug":"lexical-entity-reference","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":null},{"slug":"lexical-motion-text","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":null},{"slug":"marquee","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A continuously scrolling text strip — a repeated phrase, a tagline, or a list of keywords — for kinetic brand moments and section dividers that add energy without structural weight. Requires the motion feature flag.","whenToUse":["A divider between sections that communicates brand voice through a looping phrase","A keyword or service list that benefits from motion to imply scale (\"we do X, Y, Z, …\")","An attention-capturing band in a long marketing page that breaks up static content"],"pageTypes":["landing","marketing","about","portfolio"],"howToUse":"Set the text content (one phrase or a pipe-delimited list of items), speed, and direction. Choose a font size and weight appropriate to the band height. Requires `requiresMotion: true` — on reduced-motion the strip is static. For a scrolling logo or image strip use `image-marquee`. Use sparingly — one or two marquees per page; stacking them reads as noise.","pairsWith":["image-marquee","section-header","showcase","bento-section"],"avoidWhen":["The content is images or logos — use `image-marquee`","The band needs to convey structured information — scrolling text is decorative, not readable","The page context is editorial or documentation — motion dividers conflict with reading focus"],"register":"marketing-landing"}},{"slug":"page-hero","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":null},{"slug":"post-notice","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"An inline callout notice for posts, articles and detail pages: a heading and a rich-text body, with an optional important or urgent tone (a mark before the heading and a heavier edge, never color alone), for surfacing guidance without breaking the reading flow. It is static content, not a live alert.","whenToUse":["A deprecation or breaking-change warning inside a docs or changelog article","A \"heads up\" or prerequisite note before a code example","A tip or insight callout that deserves visual separation from the surrounding prose"],"pageTypes":["blog","editorial-article","docs"],"howToUse":"Set the tone (standard, important or urgent) and the heading level that keeps the page outline in order. Write the body as rich text; keep it to 2-3 sentences — notices work as interrupts, not paragraphs. Place inline within a `content` or `content-pro` column, or between body blocks in a post layout. For a more decorative editorial quote, use `pull-quote`.","pairsWith":["content","content-pro","pull-quote","text-block","code"],"sequence":{"follows":["content"]},"avoidWhen":["The content is a quotation with attribution — use `pull-quote`","You need a full-width callout section — use `section-header` or `content` with a background","The notice runs longer than 3-4 sentences — restructure as a `content` block instead"],"register":"editorial"}},{"slug":"project-info","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A case-study metadata panel — client, role, deliverables, dates, and a rich-text project description — for portfolio and dossier pages that need structured project credentials alongside the work.","whenToUse":["The opening panel of a case-study or portfolio project page with structured meta (client, timeline, scope)","A sidebar or above-the-fold credential block on a dossier that anchors the \"who / what / when\"","An agency proposal dossier where project provenance matters to the prospect"],"pageTypes":["portfolio","dossier","about"],"howToUse":"Populate the structured fields (client, role, timeline, deliverables) and write the project description in the richText body. The description should frame the challenge and outcome, not enumerate tasks — keep it to 60-100 words. Pair with a `bento-section` or `showcase` below for visual evidence, and `related-items` at the close to cross-link adjacent case studies.","pairsWith":["bento-section","showcase","related-items","content-two-column","section-header"],"sequence":{"precedes":["bento-section","showcase","content"]},"avoidWhen":["The project is not a completed deliverable — use `content` for open-ended or in-progress work","You just need a description paragraph without metadata fields — use `content` or `text-block`"],"register":"dossier"}},{"slug":"pull-quote","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A typographically prominent quotation — extracted from the article body or supplied as a testimonial — with attribution and an optional portrait. The primary pacing intervention for long-form editorial; places visual counterweight in asymmetric column layouts.","whenToUse":["Breaking up a long editorial article every 4-5 paragraphs to reset reading momentum","Surfacing a key insight or customer voice mid-page on a marketing or about page","Filling the vacated column in an Asymmetric Resumption layout as a counterweight"],"pageTypes":["editorial-article","blog","marketing","about","dossier"],"howToUse":"Set the quote text (40-55ch measure is ideal), attribution name and role, and optionally a portrait image. See the `editorial` field for grid placement rules — body columns by default, wide-breakout for emphasis, marginalia (cols 10-12, reduced scale) for a subtle aside. Do not use pull-quote as a primary testimonial section; for a grid of testimonials use `card-grid`. Pair with `post-notice` for editorial inline elements and `content-pro` for the surrounding prose.","pairsWith":["content-pro","content","post-notice","signature"],"sequence":{"follows":["content","content-pro"]},"avoidWhen":["The quote is a primary testimonial section — use `card-grid` with testimonial cards for multi-quote grids","You need a decorative brand-voice strip — use `marquee` for scrolling text"],"register":"editorial"}},{"slug":"related-items","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A dynamically or manually curated row of links to related content from any collection — posts, projects, products, case studies — for closing a page with forward momentum and reducing dead ends.","whenToUse":["The footer of a blog post or article pointing readers to adjacent reads","The close of a case study cross-linking to similar projects","A docs page routing readers to prerequisite or follow-on topics"],"pageTypes":["editorial-article","blog","portfolio","docs","dossier"],"howToUse":"Set the collection to pull from and the item count (typically 2-3). Items can be auto-resolved (by tag or relationship) or manually curated. The display style (card, list, minimal) should match the page register — card for marketing-flavored pages, list or minimal for editorial. Always place at or near the bottom of the page content, after the main body and before the footer. Pair with a `section-header` if the relation needs labeling (\"Read next\", \"Related projects\").","pairsWith":["section-header","changelog","project-info","signature"],"sequence":{"follows":["content","content-pro","project-info","changelog"]},"avoidWhen":["You want to feature peer items with equal visual weight mid-page — use `card-grid`","The links are navigation anchors, not content recommendations — use inline richText links or a nav block"],"register":"editorial"}},{"slug":"showcase","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A full-width video showcase band — headline, subhead, a background or inline video, and optional overlay controls — for making a product demo or brand film the centrepiece of a section. Requires the motion feature flag.","whenToUse":["A product demo video that is the primary conversion asset on a landing page","A brand-film section on an about or portfolio page where the video speaks for the work","A hero-alternative when the key asset is video rather than a static image"],"pageTypes":["landing","marketing","portfolio","about"],"howToUse":"Set the video source (hosted URL or embed), headline, and optional subhead. Choose background (video behind text) or inline (video below text) mode. Background mode requires sufficient contrast — set an overlay opacity if text legibility is at risk. Requires `requiresMotion: true`; on reduced-motion the video is paused and treated as a poster image. For a still-image feature band use `bento-section`; for a scrolling logo or text strip use `image-marquee` or `marquee`.","pairsWith":["section-header","bento-section","content","marquee"],"sequence":{"follows":["section-header"]},"avoidWhen":["The primary asset is an image, not video — use `bento-section` or `content-two-column`","The page is editorial or documentation — video showcases interrupt reading focus","The video is user-uploaded and unvetted for size — large videos degrade page performance"],"register":"marketing-landing"}},{"slug":"signature","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"An author sign-off block — avatar, name, role, and an optional bio line — for closing editorial articles, long-form posts, and newsletters with a human face attached to the writing.","whenToUse":["The close of a blog post or editorial article to attribute authorship","A byline at the end of a newsletter or announcement that surfaces the sender's identity","A dossier or about-page closer that personalizes an otherwise brand-level document"],"pageTypes":["editorial-article","blog","dossier","about"],"howToUse":"Set the author name (required), role/title, and an avatar image. The optional bio field is one sentence — not a full author page. Place as the final content block before footer-level related content. On pages with multiple authors, repeat one `signature` per author stacked vertically. Pair with `pull-quote` earlier in the article to reinforce the voice before the sign-off, and `related-items` after for forward navigation.","pairsWith":["pull-quote","related-items","content-pro","content"],"sequence":{"follows":["content","content-pro"],"precedes":["related-items"]},"avoidWhen":["The page is a marketing or landing page where author attribution is irrelevant — the sign-off reads as misplaced","You want a full author profile with social links and post history — build a dedicated author page instead"],"register":"editorial"}},{"slug":"skill-showcase","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A portfolio credentials panel — skill bars with percentage or level ratings alongside a profile image and an accent/background image — for personal portfolio and agency about pages that need to communicate capability at a glance.","whenToUse":["A personal portfolio's \"expertise\" section listing skills with visual proficiency indicators","An agency about page with a named team member's capability profile","A dossier opener that establishes credibility before case studies"],"pageTypes":["portfolio","about","dossier"],"howToUse":"Populate the skill items (label + level/percentage) and set a profile image. The accent image is optional and functions as a background or decorative layer behind the profile. Keep the skill count to 5-8 — more than that loses hierarchy. Pair with `project-info` below for the supporting case-study evidence that backs the stated skills, and `section-header` above to introduce the credentials section.","pairsWith":["section-header","project-info","bento-section","content"],"sequence":{"follows":["section-header"],"precedes":["project-info","bento-section"]},"avoidWhen":["The page is a client-facing marketing or landing page where skill bars read as self-promotional — use `card-grid` with capability descriptions instead","The skills being shown are team-wide, not individual — `card-grid` with person cards is a better fit"],"register":"dossier"}},{"slug":"study-hero","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":null},{"slug":"outcome-hero","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A page-opening hero that leads with the outcome: a centered headline, a lede and up to two actions, over a demo card that proves the claim. The card toggles between a before and an after sample (both are visible without script), or plays a captioned video, or shows one image.","whenToUse":["The first screen of a page whose promise is a visible change, such as a rewrite, a redesign or a result","A hero that needs a worked example beside the claim, labeled so it is never mistaken for a real customer","A course or service page that shows the outcome before it explains the method"],"pageTypes":["landing","marketing"],"howToUse":"Set the headline (one h1 per page; choose h2 when the page title sits elsewhere), an optional lede, and a primary and secondary link (custom URLs). Pick the demo type. Toggle needs exactly two panels, original first and rewrite second; each panel has sample lines (role, text, an optional numbered marker, an optional emphasis) and its own numbered callouts. Video needs a file plus a captions file or a transcript link. Image needs alt text. Set the footnote to say plainly that the sample is made up. The fallback image shows when the demo is incomplete. Labels override the default strings.","pairsWith":["section-header","card-grid","testimonial"],"sequence":{"precedes":["section-header","card-grid"]},"avoidWhen":["There is no outcome to show: use `page-hero`","The demo is a real customer result presented as a sample: label it, or use a case study block","A second hero already opens the page: this block carries the h1"],"register":"marketing-landing"}},{"slug":"breadcrumb","package":"@wabbit/tome-blocks-extras","docs":"https://wabbit.com/docs/packages/blocks-extras","usage":{"summary":"A breadcrumb trail: a labeled navigation landmark holding an ordered list of links, the last item naming the page the visitor is on.","whenToUse":["The top of a page that sits two or more levels below the home page","A detail page reached from a list (a record, a product, an article), so the way back up is one tap"],"pageTypes":["editorial-article","docs","portfolio","blog"],"howToUse":"Add the ancestors in order, home first, each with a label and a link, then type the name of the current page. The current page is not a link and is marked as the current page for screen readers. Long labels wrap; the trail never scrolls sideways.","pairsWith":["page-hero","section-header"],"sequence":{"follows":[]},"avoidWhen":["The page is directly under the home page: a trail of one link adds nothing","The site menu already shows where the visitor is"],"register":"structural"}},{"slug":"directoryMap","package":"@wabbit/tome-blocks-directory-pack","docs":"https://wabbit.com/docs/packages/blocks-directory-pack","usage":{"summary":"Renders listing pins on a map, hydrated server-side from @wabbit/tome-directory's findListingsNear. The map provider (MapLibre/Google/Mapbox) is chosen at the layer-config level, not per-block.","whenToUse":["A market landing page or city page that needs a \"browse near you\" map","Pairing with directoryListingGrid for a split list+map browse experience (the compact variant)"],"pageTypes":["landing","marketing"],"howToUse":"Author an optional center override and radius (defaults come from the market), a listing-type filter, and a height. Renders behind the age gate when the tenant policy enables one — the block never fires a map provider script before the gate passes.","pairsWith":["directoryListingGrid","directoryPromotionsRail"],"avoidWhen":["The page has no directory market context — the map has nothing to center on"],"register":"application"}},{"slug":"directoryListingGrid","package":"@wabbit/tome-blocks-directory-pack","docs":"https://wabbit.com/docs/packages/blocks-directory-pack","usage":{"summary":"The primary browse surface for a directory market page — a paginated grid of listings hydrated from @wabbit/tome-directory's findListingsNear, with every sponsored card carrying `sponsoredLabel`.","whenToUse":["A market or category landing page (\"Dispensaries in Kansas City\")","A `/delivery/{market}` or tag-filtered index page"],"pageTypes":["landing","marketing"],"howToUse":"Author a market scope, whether facet filters render, the default sort, and a page size. Slot 1 is reserved for a single Premier listing per market page — the block never lets a second Premier occupy it. Query-driven; facets and sort apply to the market's listings, and Featured-slot scarcity is applied server-side.","pairsWith":["directoryMap","directoryPromotionsRail","directoryClaimCta"],"register":"application"}},{"slug":"directoryListingDetail","package":"@wabbit/tome-blocks-directory-pack","docs":"https://wabbit.com/docs/packages/blocks-directory-pack","usage":{"summary":"Renders one listing's detail page body, hydrated from `resolveListingDetailData` (listing + live owner promotions + approved reviews).","whenToUse":["A listing detail route, e.g. `/trades-shop/[slug]`"],"pageTypes":["landing","marketing"],"howToUse":"Author the listing slug. The `minimal` variant renders the claimed-tier floor (no promotions rail, no gallery) — pick it for listings you know sit at `claimed` tier.","pairsWith":["directoryMap","directoryReviewForm","directoryClaimCta"],"register":"application"}},{"slug":"directoryPromotionsRail","package":"@wabbit/tome-blocks-directory-pack","docs":"https://wabbit.com/docs/packages/blocks-directory-pack","usage":{"summary":"Renders `live` promotions scoped to a market or a single listing, `source: owner` only — paid surfaces never render ingested/scraped promotions.","whenToUse":["A market landing page or listing detail sidebar"],"pageTypes":["landing","marketing"],"register":"application"}},{"slug":"directoryClaimCta","package":"@wabbit/tome-blocks-directory-pack","docs":"https://wabbit.com/docs/packages/blocks-directory-pack","usage":{"summary":"A static claim-listing CTA — always renders the authored copy, links to the claim intake flow.","whenToUse":["On an unclaimed listing's detail page or a market page footer"],"pageTypes":["landing","marketing"],"register":"application"}},{"slug":"directoryReviewForm","package":"@wabbit/tome-blocks-directory-pack","docs":"https://wabbit.com/docs/packages/blocks-directory-pack","usage":{"summary":"Submits a review against a listing via `submitReview`; requires login per tenant policy.","whenToUse":["On a listing detail page"],"pageTypes":["landing"],"register":"application"}},{"slug":"directoryAgeGate","package":"@wabbit/tome-blocks-directory-pack","docs":"https://wabbit.com/docs/packages/blocks-directory-pack","usage":{"summary":"Copy + a three-field (month/day/year, no prefill) DOB form that posts to `POST /api/directory/age-gate/verify` (via a consumer `verifyAction` or a `fetch()` fallback) and sets the resulting cookie; this block never renders as a CSS overlay on already-indexed content.","whenToUse":["The dedicated age-gate resources route a failed gate check redirects to"],"pageTypes":["landing"],"register":"application"}},{"slug":"directoryMegaMenu","package":"@wabbit/tome-blocks-directory-pack","docs":"https://wabbit.com/docs/packages/blocks-directory-pack","usage":{"summary":"A full-width mega-menu panel following the `Navbar7` desktop-dropdown card pattern (image cards get a dark veil, matching `subitem.image` cards in that navbar's built-in dropdown). Feed the same data to `createDirectoryHeaderItems()` to also drive a Navbar1/3/5/6/7 header `items` sub-menu.","whenToUse":["Site header, when the directory has more than one market"],"pageTypes":["landing","marketing"],"register":"structural"}},{"slug":"proposal-cover","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"A proposal's header — eyebrow, title, and a row of label/value meta items, each optionally bound to the live deal ({customer}, {dealNumber}, {total}, {status}).","whenToUse":["As the first block in every proposal layout","Anywhere a client-facing deal page needs an identity header before its body"],"pageTypes":["dossier"],"howToUse":"Author the eyebrow and title (both support {customer}/{date} tokens filled from the render context when one is present). Add meta items as label/value pairs; set each item's bind to pull its value live from the deal instead of the authored text.","pairsWith":["proposal-letter","proposal-stat-strip"],"sequence":{"precedes":["proposal-letter"]},"avoidWhen":["The page is not backed by a @wabbit/tome-deals artifact — the bound meta items have nothing to read"],"register":"dossier"}},{"slug":"proposal-letter","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"The workhorse block for a proposal's prose — most of a proposal is a sequence of these, each an addressable letter section with its own optional rail marker and hung aside.","whenToUse":["For any prose section of a proposal — the opening letter, a scope explanation, a closing thought before the offers","When a section needs a pull quote, supporting image, or short note beside the text rather than inline"],"pageTypes":["dossier"],"howToUse":"Write the body in the proposal Lexical editor. Add a marker (number + label) to give the section a rail identity at lg+; the marker is hidden below 1024, where the section's own heading carries it instead. Add an aside (pull/image/note) and choose its position; toggle hangFromBox when the aside sits beside a hung box (72px clearance) instead of plain text (48px).","pairsWith":["proposal-cover","proposal-chapter","proposal-stat-strip"],"avoidWhen":["The content is a numbered/structured list — prefer proposal-checklist or proposal-asks for those"],"register":"dossier"}},{"slug":"proposal-chapter","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"A phase break in a long proposal — a big outlined numeral plus a short headline that resets the reader's attention before the next part starts.","whenToUse":["Between clearly distinct parts of a proposal (e.g. \"Part one — build first\" / \"Part two — scale\")","Sparingly — a proposal with a chapter before every letter section reads as fragmented, not structured"],"pageTypes":["dossier"],"howToUse":"Set the numeral (e.g. \"1\"), eyebrow, and headline. Add intro rich text only when the phase needs a sentence of framing before its first letter section — most chapters need none.","pairsWith":["proposal-letter"],"sequence":{"precedes":["proposal-letter"]},"avoidWhen":["The proposal is short enough that a single letter sequence reads cleanly without phase breaks"],"register":"dossier"}},{"slug":"proposal-stat-strip","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"A row of 2-4 big authored numbers with captions — the proposal's 'here are the numbers that matter' beat, shown three-up from 768px and stacked below it.","whenToUse":["Right after the cover or an early letter section, to land the proposal's headline numbers before the prose explains them"],"pageTypes":["dossier"],"howToUse":"Add 2-4 stats, each a value (mark part of it as the accent span) and a caption. Add a section header when the strip needs its own label above the figures; without one the figures sit at the top with no gap. Add a note for the source of the figures or a compliance line.","pairsWith":["proposal-cover","proposal-letter"],"avoidWhen":["The numbers are prices tied to the deal total/deposit/balance — use proposal-offers or proposal-monthly, which can bind to the deal"],"register":"dossier"}},{"slug":"proposal-statement","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"The proposal's single loudest claim, set on a colored full-bleed band — a big line with an accent-highlighted phrase, a subline, and a short body paragraph.","whenToUse":["Once per proposal, at the moment the argument needs its most memorable line (e.g. a break-even statement)"],"pageTypes":["dossier"],"howToUse":"Write the big line and mark the phrase to accent. Add a subline and a body paragraph. Choose the band background (default the secondary band); add a marker if the section needs a rail identity at lg+.","pairsWith":["proposal-letter","proposal-chapter"],"avoidWhen":["Used more than once — it loses its weight if every section gets the same treatment"],"register":"dossier"}},{"slug":"proposal-monthly","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"A 2-4 stage path showing how a recurring price steps over time — each stage an amount (authored or bound to the deal's careMonthly figure) with a note, the last stage visually emphasized.","whenToUse":["Whenever a proposal includes a recurring/care-plan cost that changes after an intro period"],"pageTypes":["dossier"],"howToUse":"Write an intro heading and text, then add 2-4 stages: a label, an amount (bind to careMonthly or author it directly), a suffix, and a short note. The final stage is emphasized automatically.","pairsWith":["proposal-offers","proposal-close"],"avoidWhen":["The proposal has a single flat price with no recurring component — use proposal-offers instead"],"register":"dossier"}},{"slug":"proposal-media-spread","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"A framed product/device image beside a short pitch and a CTA — the proposal's \"see it, don't just read about it\" beat.","whenToUse":["When the proposal is selling something visual (an app, a site, a physical product) and a picture does more work than another paragraph"],"pageTypes":["dossier"],"howToUse":"Upload an image and choose its frame (phone, browser, or none). Write an eyebrow, headline, and short text, add a CTA, and an optional fine-print note. The device hangs left of the measure at ≥1024, never past the page gutter.","pairsWith":["proposal-letter","proposal-doors"],"avoidWhen":["There is no meaningful visual to show — an empty or placeholder frame reads worse than no spread at all"],"register":"dossier"}},{"slug":"proposal-doors","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"A small wall of 2-3 option cards, each an image, a kicker, a title, and body copy — for laying two or three paths side by side so the client can compare them at a glance.","whenToUse":["When the proposal genuinely offers alternative directions (not tiers of the same thing — use proposal-offers for pricing tiers)"],"pageTypes":["dossier"],"howToUse":"Add 2-3 cards, each with an image, a short kicker, a title, and a body paragraph. Cards lay out two-up from 768px.","pairsWith":["proposal-letter","proposal-chapter"],"avoidWhen":["The options are priced tiers of the same offer — use proposal-offers instead"],"register":"dossier"}},{"slug":"proposal-checklist","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"A bordered plate of list items — a bold lead-in plus text per item, check- or dash-marked, with an optional eyebrow, trailing note, and a hung aside beside it. The plate hangs by its own padding so its text still aligns to the measure.","whenToUse":["\"What's included\" / \"What's not included\" lists","\"What Part two does\" style scope lists"],"pageTypes":["dossier"],"howToUse":"Set the marker style (check for inclusions, dash for exclusions or a plainer list). Add items, each an optional bold lead-in and body text. Add a trailing note and, when the section needs one, an aside beside the plate — the row keeping the full 72px clearance the mockup calls for.","pairsWith":["proposal-letter","proposal-offers"],"avoidWhen":["The list is numbered steps rather than inclusions — use proposal-asks for a numbered list"],"register":"dossier"}},{"slug":"proposal-offers","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"The proposal's price cards — every price on the page a client can act on. Each card's price can bind to the deal's total/deposit/balance figures (the checkout's numbers), or be authored directly for a card that isn't the live offer.","whenToUse":["The one section of a proposal that states what it costs"],"pageTypes":["dossier"],"howToUse":"Add one or more cards: kicker, title, a price (choose the binding — total/deposit/balance pull the live deal figure; authored is a fixed number), an optional struck-through amount, a note, and terms. Mark one card highlighted. Choose stack (default, hangs like a plate) or side-by-side arrangement. When bound, the deal's figure always wins over any authored amount — admin shows this as 'Bound to the deal — edit the deal total, not this.'","pairsWith":["proposal-checklist","proposal-monthly","proposal-close"],"sequence":{"precedes":["proposal-close"]},"avoidWhen":["The proposal has a recurring/staged price rather than a single offer — pair with or prefer proposal-monthly"],"register":"dossier"}},{"slug":"proposal-plans","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"The proposal's recurring service-level picker. Each plan is a priced column with its own included-items list; the plan this proposal is set to (bound to the deal's care tier, or authored) is highlighted, and the client can change their choice while the proposal is still open (status: sent).","whenToUse":["The proposal has a recurring service-level decision (Essential/Plus/Premier-style tiers) the client picks from or confirms"],"pageTypes":["dossier"],"howToUse":"Add one plan per column (name, price, summary, included items) — the first plan's included list reads \"What's included\"; every later plan defaults to \"Everything in {previous plan}, plus\" unless you author its own label. Choose the selected-plan binding (the deal's live care tier, or an authored key) and, once the proposal is sent, optionally let the client change their pick — the host app reads the checked radio at signing. Turn on the totals strip to show today / at go-live / then monthly under the columns.","pairsWith":["proposal-offers","proposal-monthly","proposal-checklist","proposal-close"],"sequence":{"precedes":["proposal-close"]},"avoidWhen":["The proposal has a single one-time price rather than a recurring service level — prefer proposal-offers"],"register":"dossier"}},{"slug":"proposal-addons","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"Lists the deal's optional add-ons. While the proposal is open (status: sent) each one has a checkbox and the strip underneath recomputes the total, today's payment and the go-live balance as the client ticks; the host signs with the ticked set and prices it on the server. Before sending it shows the defaults, after signing the chosen set.","whenToUse":["The proposal has an optional extra the client can take now or later, priced on top of the main build"],"pageTypes":["dossier"],"howToUse":"Add the extras to the deal itself (key, label, price, selected by default) — the block only renders them, so the checkout always charges what the client saw. Bind the main build's offer card or cover figure to Base price so it keeps its own price once an extra is added; Deal total then includes whatever the client ticked.","pairsWith":["proposal-offers","proposal-plans","proposal-close"],"sequence":{"precedes":["proposal-close"]},"avoidWhen":["The extra is a recurring service level — prefer proposal-plans","The deal offers no add-ons — the block renders nothing"],"register":"dossier"}},{"slug":"proposal-asks","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"\"What I need from you\" — a numbered list of concrete asks (access, assets, decisions, approvals) so the client knows exactly what unblocks the work.","whenToUse":["Near the end of a proposal, right before the offers or the close, to make the next steps concrete"],"pageTypes":["dossier"],"howToUse":"Add items, each a bold lead-in and body text; choose one or two columns. Items number themselves with leading zeros.","pairsWith":["proposal-offers","proposal-close"],"sequence":{"precedes":["proposal-close"]},"avoidWhen":["The list is inclusions/exclusions rather than actions the client must take — use proposal-checklist instead"],"register":"dossier"}},{"slug":"proposal-close","package":"@wabbit/tome-blocks-proposal-pack","docs":"https://wabbit.com/docs/packages/blocks-proposal-pack","usage":{"summary":"The last block in a proposal — a closing paragraph, a signature, and (via the host's render context) the accept/sign action panel.","whenToUse":["As the final block in every proposal layout"],"pageTypes":["dossier"],"howToUse":"Write the closing rich text and set the signature's name, title, and style. Set action placement to 'after' to render the portal's action panel here (only appears when the host passes a live renderAction in context); 'none' renders no action slot at all.","pairsWith":["proposal-offers","proposal-asks"],"avoidWhen":[],"register":"dossier"}},{"slug":"local-price-list","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"A local business's menu or price list. One data shape (sections of items, prices in minor units) renders as a photo card grid, a printed ledger or a short home-page teaser.","whenToUse":["A restaurant, cafe or bakery menu where each item has its own photograph (card-grid)","A drinks list, salon or trades price list sold by the line rather than by sight (ledger)","A home-page preview of a few items that links to the full menu (teaser)","A class business that sells a free trial and then a term: two or three fee cards of one height, the term fee with a classes-a-week picker (term-fee)","A venue or studio that sells bundles for a group (a party, a class, a corporate booking): cards with the headcount, the price of each extra, the length, the deposit and what is included, and the small add-ons beside them (package)"],"pageTypes":["landing","pricing","marketing"],"howToUse":"Add sections (title, optional tagline and note), then items with a stable key, name, description, photo and one or more prices in minor units (1700 = 17.00). Name one item in featuredLead.itemKey to open the card grid with it, and mark at most one item as the breaker. Ordering renders an add action only when ordering.enabled is on AND a checkoutUrl is set; mount the pack's ordering island on the page to make it work. With ordering off, askLabel turns each card's action into a control that opens its details. For term-fee, put the cards in one section as items: mark the recommended one emphasis primary, give each an optional kicker, what it includes and excludes, and an action; give the term fee one price per classes-a-week choice (label \"1\", \"2\", \"3\", with a per line such as \"for the term · 14 weeks · $17 a class\") and name the picker in pickerLabel. For package, give each item a price (variants[0]), then optionally a headcount, the price of each extra, a length, a deposit (none or an amount, with a refund note) and an inclusions list; mark the recommended one emphasis primary and give it an action link, which may carry a planner preset such as ?type=party&pkg=Name#planner. Add-ons are items that set only a name, a line and a price.","avoidWhen":["Selling products with cart and payment (use the catalog blocks; the ordering flag only hands off to an external URL)","A text-only list of 40+ items in one column (a two-column printed variant is not built yet)"],"register":"marketing-landing"}},{"slug":"local-live-status","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"A live open-now status computed from the business hours in its own timezone (split shifts, windows past midnight, holidays and special hours, a named secondary schedule such as a kitchen or a service desk), worded as a bold lead and a detail, with call, directions and one state action.","whenToUse":["A sticky bar above the header on a local-business site (mount it in the chrome announcement slot)","A status line under a hero or beside a contact block, so visitors see whether you are open before they call or travel"],"pageTypes":["landing","marketing","about"],"howToUse":"Enter the timezone and weekly hours (one row per window; two rows on one day for a split shift; a close earlier than the open runs past midnight), any dated holidays or special hours with a label, and optionally a named schedule whose closing time the open detail names (\"kitchen closes at 10\"). Set an action for open, closed and closed-today (an action of kind Directions hides the separate Directions link). `bar` is the band (one row from 640px, a 124px block with three equal buttons on phones); `line` sits inline on the page. `timeStyle: compact` drops AM/PM (\"2:30\", \"midnight\").","pairsWith":["local-logistics","local-price-list"],"avoidWhen":["The hours are not kept current: a wrong \"Open now\" costs more than no status","The business has no fixed opening hours (appointments only)"],"register":"structural"}},{"slug":"local-logistics","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"Everything a visitor needs to arrive: where you are, how to get directions or call, when you are open (today marked, holidays shown), and practical notes for getting there.","whenToUse":["The closing band of a local-business home page (\"Find us\")","A contact or visit page for a shop, studio, clinic or venue with fixed opening hours","A \"plan your visit\" band of equal cards (address, parking, hours and a required form such as a waiver) for a venue that people visit for a session (cards)"],"pageTypes":["landing","marketing","about"],"howToUse":"Enter the address lines and locality (and coordinates for a precise directions pin), the phone number, the timezone and weekly hours (two rows on one day for a split shift; a close earlier than the open runs past midnight), any dated holidays or special hours, an optional note, and up to a few visit-note groups (a title and short items). `hoursDisplay` shows the week (identical consecutive days grouped), today only, or a compact week without closed days. For a map, upload an image and keep the illustrative-map label. Untick a part under Show to hide it; hiding the address keeps the locality and drops the directions link.","pairsWith":["local-live-status","local-price-list","contact"],"avoidWhen":["The business has no public address and no opening hours (a service-area business): use a contact block instead"],"register":"marketing-landing"}},{"slug":"local-class-schedule","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"The timetable for a business that runs classes: when each class meets, who it is for, whether there is room, and a one-tap way to enroll or add it to a calendar.","whenToUse":["The classes or programs page of a gym, dance studio, martial arts school, swim school, music school, preschool or camp","A home page band that answers \"is there a class for my child, and when?\"","A \"what is on today\" board for a venue that runs timed sessions all day (the board variant): each row with its time, price and whether it is on now, still to come or finished"],"pageTypes":["landing","marketing"],"howToUse":"Add one row per class: name, optional level, an age range, the days it meets (a class on two days is one row), start and end as HH:mm, and optionally a teacher and room. Set the timezone (blank uses the business profile's) so today, the calendar files and expiry are right. Give a default enroll link, or one per class; {class}, {day} and {start} in a link fill in from the row. To show room, set a status (spots left, waitlist open or full) and the date and time it stops being true: an expired status shows nothing. Add the term dates and any breaks; the profile's closed dates are added as breaks unless you turn that off. Untick a part under Show to hide it. The board variant lists only today's sessions: set the timezone, enter each session's price, and optionally a clock line, a footnote with a link and the chip wording under Copy; it shows nothing on a day with no sessions.","pairsWith":["local-logistics","local-live-status","contact"],"avoidWhen":["The business sells one-off appointments rather than recurring classes: use a booking or contact block","Capacity must come from a live booking system: this block shows a hand-entered value with an expiry"],"register":"marketing-landing"}},{"slug":"local-class-finder","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"The first screen for a business that runs classes by age and level: the visitor answers two quick questions and is shown the one class to start in, when it runs this week and whether there is room.","whenToUse":["The home page hero of a gym, dance studio, swim school, martial arts school, music school, preschool or camp","A program page hero for one level (variant level), with the class and age preselected on a trial form"],"pageTypes":["landing","marketing"],"howToUse":"Point the block at the shared timetable (Source: the shared timetable) or fill the age bands, levels and classes inline. Add the experience options, then one rule per (age band, experience) that names the level to start in; the first matching rule wins, and an experience of \"any\" matches every answer. Set the defaults, which is the answer shown before anyone taps (and with script off). Give the trial button a link pattern such as /trial?class={class}&age={age}. The live line shows the business profile's expiring availability message; the spots line comes from the class rows' spots, which carry an expiry. Add a photo with a label such as \"Illustrative photo\" if it is stock.","pairsWith":["local-class-schedule","local-live-status","local-logistics"],"avoidWhen":["The business sells one-off appointments rather than recurring classes by age and level","A visitor needs more than two questions to be placed: use a contact or booking form"],"register":"marketing-landing"}},{"slug":"local-class-pathway","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"Answers \"where does my child start, and where do they go next?\" for a business that runs classes by age and level: each level in plain words, with its times and a stripe that shows how far up the ladder it sits.","whenToUse":["The pathway band of a gym, dance, swim, martial arts or music school home page (variant bands)","A band for one age group with a trial action on each level, such as the youngest children (variant cards)","The end of a program page, to show where this level leads (variant ladder)"],"pageTypes":["landing","marketing"],"howToUse":"Point the block at the shared timetable (Source: the shared timetable) or fill the age bands, levels and classes inline. Give each level its \"Who it's for\" and \"Moves up when\" lines: they are what the cards show. For bands, optionally name the starting band. For cards, list the level names in the order you want and add up to two photos and the action. For the ladder, name the current level; the next level on its track becomes the one teaser card, and a level at the top of its track shows none.","pairsWith":["local-class-finder","local-class-schedule","local-credentials"],"avoidWhen":["The business has one class and no levels to explain","The levels need more than a few sentences each: link to a program page instead"],"register":"marketing-landing"}},{"slug":"local-credentials","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"The proof that sits near the ask: your licenses, checks, memberships and ratios, stated plainly with a way to verify each one. Nothing is shown past its expiry date, and a placeholder is always labeled.","whenToUse":["A band under the hero listing the three or four things a parent or client checks first (variant strip)","A trust section for a childcare, coaching, trades, clinic or care business with ratios, policies and credentials to verify (variant panel)"],"pageTypes":["landing","marketing","about"],"howToUse":"Keep Data on the business profile and add your credentials there (Site, Business profile, Credentials): a license, an insurance policy, a first-aid certificate, each with an issuer, an expiry date and a verify link. Expired rows drop out on their own. For the strip, write each line and, where the line rests on a credential, pick its kind: the line then shows only while an unexpired credential of that kind exists. Tick Sample on a placeholder and the block says so. For the panel, add the ratios, up to two policy lists and the date the policy was last reviewed. Set Data to the fields below to show credentials that belong to a second venue or a fixed example.","pairsWith":["local-logistics","team-roster","faq","local-class-finder"],"avoidWhen":["You have nothing you can stand behind yet: leave the band out rather than show invented credentials without a Sample label"],"register":"marketing-landing"}},{"slug":"local-facilities","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"Where everything is: every place at the venue as a row with its key plate, its hours or open state and what to know, next to a drawn plan with the same plates. The list is the plan’s text alternative, so it works without script and for a screen reader.","whenToUse":["A park, sports complex, campus, market hall or venue with several places a visitor has to find (variant plan)","The same places without a plan image yet (variant list)","An event or booking page that shows where one place is (variant locator)"],"pageTypes":["landing","marketing","about"],"howToUse":"Add one row per place with a name and a short key (field-1, lot-a); the key is what events and links refer to, so never rename it once used. Upload the site plan and place each marker by its x and y as a percent of the image. Put open hours in the business profile as named schedules (gates, fieldhouse) and give each row its schedule key. Use a status with an expiry for a temporary closure. Other blocks link to a place with #plan-<key> or #facility-<key>.","pairsWith":["local-logistics","local-live-status","event-list"],"avoidWhen":["You need a pannable map or driving routes; a plan image is not a map."],"register":"marketing-landing"}},{"slug":"local-locations","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"Find-a-place for a business with more than one address: every location with whether it is open right now, how to get there and how to book. A site with one location uses the same block and it shows that one place.","whenToUse":["A \"Find an office\" or \"Our locations\" section for a group practice, a clinic, a studio or a trade with several sites","A visit page for a business that is growing from one address to several, without changing the page later"],"pageTypes":["landing","marketing","about"],"howToUse":"Turn on locations in the local layer, add each place under Site, Locations (name, address, timezone, hours, phone, an optional book link), and keep Data on the locations. Each place is open or closed by its own clock, so a list across two time zones is right in both. A place that hides its address shows its town only, with no directions link and no map pin. Choose a live map if the site is set up for one: it loads only after the visitor presses Show map, and the directions links stand in until then. Set Data to the fields below to list places that are not in the collection.","pairsWith":["local-live-status","local-logistics","local-credentials","faq"],"avoidWhen":["The business has a single address and nothing more to say about it: local-logistics is the lighter find-us band"],"register":"marketing-landing"}},{"slug":"local-desk-strip","package":"@wabbit/tome-blocks-local-pack","docs":"https://wabbit.com/docs/packages/blocks-local-pack","usage":{"summary":"The line a visitor reads before anything else on a multi-location site: which offices are open, one number to call, one way to book.","whenToUse":["Under the hero of a group practice, clinic or multi-site service business (\"Open now: Millbrook until 5:30 PM, Cedar Flats until 7 PM\")","A band above the footer that gives the desk number and the book action next to the offices"],"pageTypes":["landing","marketing","about"],"howToUse":"Keep Data on the site’s locations (Site, Locations). The desk number is the business profile’s phone, unless you type one here; the book action is the primary location’s, unless you set one here. Each office reads open or closed by its own clock and always says so in words. Set Data to the fields below for a fixed example.","pairsWith":["local-locations","local-live-status","local-credentials"],"avoidWhen":["The site has one address: local-live-status is the single-line version"],"register":"marketing-landing"}},{"slug":"work-index","package":"@wabbit/tome-blocks-portfolio-pack","docs":"https://wabbit.com/docs/packages/blocks-portfolio-pack","usage":{"summary":"The shop window and the filing cabinet of a practice that makes things project by project: one flagged project as the hero, and every project listed under its permanent job number. Everything it prints comes from the project record, so nothing is typed twice.","whenToUse":["The top of a home page for a practice that leads with one project (layout feature)","A home page slice of the latest projects, or a full Work page with filters (layout index)","Two or three projects shown first, as large plates with their facts (layout selected)","The foot of a case study: one next project and the way back to the index (layout next)"],"pageTypes":["landing","marketing","portfolio"],"howToUse":"Keep Data on Projects and add your projects in Work. Flag one as Featured and the hero follows it; leave Project empty to use the featured one. For the index, set a limit for a home slice and leave it empty on the Work page. Filters hide until the site has enough projects (8 by default) and the whole block hides under 3, so a young portfolio never shows an empty shell. Numbers are printed as stored: a gap means a project was archived, not renumbered. Turn on Thumbnails for the work column and Quiet the featured project to mark it \"Featured above\". Filtering happens in place and the URL keeps the state, so a filtered Work page can be shared; the Plates or Ledger view a visitor picks is remembered. For Selected work, pick up to three projects or leave it empty for the newest three that are not featured; Step makes the first plate bleed large and the second sit inset. Next project needs the route to say which project the page is showing.","pairsWith":["project-hero","plate-sequence","title-block","service-rows","testimonial"],"sequence":{"precedes":["title-block","service-rows"]},"avoidWhen":["You have fewer than three finished projects to show: use a gallery or a single case study until the index has something to file"],"register":"marketing-landing"}},{"slug":"title-block","package":"@wabbit/tome-blocks-portfolio-pack","docs":"https://wabbit.com/docs/packages/blocks-portfolio-pack","usage":{"summary":"The facts of a practice or a project set as a line of ruled cells. Four layouts share one markup: facts, brief and credits read the project record, practice reads the whole portfolio.","whenToUse":["The credits band at the foot of a case study (layout credits)","A statement band on a home page, with facts that stay true because they are computed (layout practice)","The facts or the brief of a project anywhere on its own page (layouts facts and brief)"],"pageTypes":["landing","marketing","portfolio"],"howToUse":"On a project document leave Project empty and the block reads that project. On any other page choose the project. For the practice layout write the statement and the paragraph; the facts compute from the Work collection and hide when the records cannot support them (no completed project, no place). Labels come from the portfolio settings, so the words stay in one place.","pairsWith":["work-index","project-hero","plate-sequence","service-rows"],"avoidWhen":["The site has no Work collection and no facts to state: use plain text instead of typing cells by hand"],"register":"marketing-landing"}},{"slug":"service-rows","package":"@wabbit/tome-blocks-portfolio-pack","docs":"https://wabbit.com/docs/packages/blocks-portfolio-pack","usage":{"summary":"The services of a practice that is known by its work: each numbered row names the service, says it in a sentence and points at one project that shows it.","whenToUse":["The \"What we do\" band of a home page, under the statement","A services overview where each service already has a finished project to point at"],"pageTypes":["landing","marketing","portfolio"],"howToUse":"Add a row per service (up to eight) and choose its representative project from the Work collection. A row with no project has no project line, and a project that is archived or unpublished drops its line, never the row. A site without the Work collection can type the line in Representative project (typed).","pairsWith":["title-block","work-index","plate-sequence"],"sequence":{"follows":["title-block"]},"avoidWhen":["There are no finished projects yet: a list of services alone is better as plain headings"],"register":"marketing-landing"}},{"slug":"project-hero","package":"@wabbit/tome-blocks-portfolio-pack","docs":"https://wabbit.com/docs/packages/blocks-portfolio-pack","usage":{"summary":"Opens a project page. The lead image runs edge to edge with nothing laid over it, and the title, summary and facts sit on the ground below, so the work is never covered by type.","whenToUse":["The first block of a project (case study) page, on the project document itself or with a project chosen","Anywhere a single project needs its lead image, title and facts together"],"pageTypes":["portfolio"],"howToUse":"Put the block first in the project's layout and leave Project empty: it reads the project it sits on. Choose a project to show another one. The lead image, its crop for phones, the credit, the title, summary, nine facts and description all come from the project record. Turn the breadcrumb, plate line, facts or description off if the page does not want them.","pairsWith":["plate-sequence","title-block","work-index","testimonial"],"sequence":{"precedes":["plate-sequence","title-block"]},"avoidWhen":["The page is not about one project in the Work collection: use a regular hero"],"register":"marketing-landing"}},{"slug":"plate-sequence","package":"@wabbit/tome-blocks-portfolio-pack","docs":"https://wabbit.com/docs/packages/blocks-portfolio-pack","usage":{"summary":"Tells a project in plates. Every image is numbered across the whole project (\"Plate 04, 05 of 14\"), captions follow their plate and pin beside it on wide screens, and a drawing shows as a line drawing you can open at full size.","whenToUse":["The body of a project page: one block for the finished work, one for work in progress, one for drawings","Any chapter that is a run of numbered images with short captions"],"pageTypes":["portfolio"],"howToUse":"Choose the chapter (Mode) and leave Project empty to read the project the page sits on. The block shows only the passages and plates of that mode from the project's story, so nothing is typed twice. Numbers run across the whole story, so \"Plate 06 of 14\" means the same in every chapter. Drawings sit on the surface color and never mix with photographs. On a phone each drawing gets an \"Open the drawing\" button that opens it at full size, pannable.","pairsWith":["project-hero","title-block","testimonial"],"sequence":{"follows":["project-hero"]},"avoidWhen":["You need a free-form image gallery with no numbering or captions: use a gallery block"],"register":"marketing-landing"}},{"slug":"practice-desk-strip","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"Every office, whether it is open right now, the main number and a book action, in one line under a hero.","whenToUse":["Directly under the hero of a home page","Above an offices list, as the short version of it"],"pageTypes":["landing","marketing","about"],"howToUse":"Leave Data on the site's locations and the strip reads every published office. The number is the one typed here, else the business profile's, else the primary office's; the book action is the one typed here, else the primary office's. An office without hours shows no status, because nothing true can be said about it.","pairsWith":["practice-topic-picker","practice-offices"],"sequence":{"precedes":["practice-topic-picker"]},"avoidWhen":["The site has one office and no phone: a plain button is enough"],"register":"marketing-landing"}},{"slug":"practice-topic-picker","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"Asks what brings a visitor in and answers with the group's topics and the person they would likely see. The tabs are radio inputs, so it works with JavaScript off and by keyboard.","whenToUse":["A home page that sends visitors to the page for what they came for","A services overview grouped by need"],"pageTypes":["landing","marketing","about"],"howToUse":"Leave Data on Groups and the block reads every group that has a published topic. Each group shows its descriptor under the tab, its topics as rows and one lead person (the group's chosen lead, else the first person on its topics). A group with no topic is not offered, a lead with no status shows none, and no lead hides the person slot. Up to eight groups.","pairsWith":["practice-offering-list","practice-people-list","practice-desk-strip"],"sequence":{"follows":["practice-desk-strip"],"precedes":["practice-offering-list"]},"avoidWhen":["There is only one group: a plain list of topics is clearer"],"register":"marketing-landing"}},{"slug":"practice-offering-list","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"What is offered, who offers it and what it costs, from the offering records, so nothing is typed twice.","whenToUse":["A home page band of the kinds of work","A price list","The offerings a person or a topic leads to"],"pageTypes":["landing","marketing","pricing"],"howToUse":"Choose a layout. doors: large cards with a photo, the summary and who offers it. rows: title, duration and price on one line. detail: one card per offering with a price row and a link. Source picks all offerings, one group, one person's, one topic's, or the current record's. An offering without a price shows none and the row closes up.","pairsWith":["practice-topic-picker","practice-people-list","practice-steps"],"sequence":{"follows":["practice-topic-picker"],"precedes":["practice-steps"]},"avoidWhen":["No offering has been entered: the block renders nothing, so leave it off"],"register":"marketing-landing"}},{"slug":"practice-steps","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"What happens, start to finish, the first time someone comes in, with the time each step takes and who they meet.","whenToUse":["A home page band between the offerings and the people","A new-visitor page"],"pageTypes":["landing","marketing","about"],"howToUse":"Add three to five steps, each with a title, a sentence, a time and who is there. Add a photo and a bring list for the pair under the steps; leave either empty and the other takes the full width. Figures typed here are examples: tick Sample figures to label them.","pairsWith":["practice-offering-list","practice-people-list"],"sequence":{"follows":["practice-offering-list"],"precedes":["practice-people-list"]},"avoidWhen":["There is no real process to describe"],"register":"marketing-landing"}},{"slug":"practice-people-list","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"Who works here, what they do, which offices they are at, the languages they speak and whether they are taking new clients, from the people records.","whenToUse":["A home page row of the people","The people who answer a topic or offer a service","Everyone at one office"],"pageTypes":["landing","marketing","about"],"howToUse":"Choose a layout (row, cards or compact) and a source: everyone, one offering's, one topic's, one office's or the current record's. Status, languages and the book action each have a switch. A person with no status shows none; one who is not accepting shows the note in place of a book action.","pairsWith":["practice-topic-picker","practice-offices","practice-offering-list"],"sequence":{"follows":["practice-steps"]},"avoidWhen":["A single person is the page: use practice-record-header"],"register":"marketing-landing"}},{"slug":"practice-offices","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"Every office, whether it is open now, how to get there and who is seen there.","whenToUse":["A find-us band on a home page","The offices where one person sees people, on their page"],"pageTypes":["landing","marketing","about"],"howToUse":"Leave Data on All offices, or choose one person's (or the current person's) offices. Seen here lists the people at each office, with the days when the record has them. A hidden address shows the town only, with no directions link and no pin. Map: live needs the live map wired once (see the local pack's live-map entry); until then the directions links stand alone.","pairsWith":["practice-desk-strip","practice-people-list"],"sequence":{"follows":["practice-people-list"]},"avoidWhen":["The site has no locations: the block renders nothing"],"register":"marketing-landing"}},{"slug":"practice-guide-list","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"The newest guides, each with who reviewed it and when, from the topic records.","whenToUse":["A home page band of three guides","The guides in one group"],"pageTypes":["landing","marketing","blog"],"howToUse":"Source recent shows the most recently reviewed topics; group shows one group's. The footer's wording and the aging interval come from the practice settings.","pairsWith":["practice-reviewed-line","practice-topic-picker"],"sequence":{"precedes":["practice-offices"]},"avoidWhen":["No topic has a body worth reading"],"register":"marketing-landing"}},{"slug":"practice-record-header","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"The first thing on a person's page or a topic's page, built from the record so nothing is typed twice.","whenToUse":["The top of a person page","The top of a topic page"],"pageTypes":["about","marketing"],"howToUse":"Place it first in the record's layout and it reads that record. person: portrait, name with honorific and post-nominals, role line, summary, language tags, status, Book and Call, and an At a glance panel. topic: the title, the summary and Book with the person who leads it. A person who is closed shows the status and the call action only.","pairsWith":["practice-path","practice-credentials","practice-book"],"sequence":{"precedes":["practice-path"]},"avoidWhen":["The page is not the page for a record"],"register":"marketing-landing"}},{"slug":"practice-path","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"The short answer to what is wrong, what kind of help, and who does it, as one connected line.","whenToUse":["Under the header of a topic page"],"pageTypes":["about","marketing"],"howToUse":"Place it in a topic's layout. The offering is the topic's first, and the person is that offering's first person, otherwise the topic's first direct person. Reorder the records to change the path.","pairsWith":["practice-record-header","practice-people-list"],"sequence":{"follows":["practice-record-header"]},"avoidWhen":["The page is not a topic"],"register":"marketing-landing"}},{"slug":"practice-reviewed-line","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"A review stamp that tells the truth about its own age.","whenToUse":["Beside the body of a topic page","Under a guide card"],"pageTypes":["about","marketing","blog"],"howToUse":"Place it in a topic's layout. The review interval is set once in the practice settings; leave it empty and no line ever ages. A page with no review shows nothing.","pairsWith":["practice-record-header","practice-guide-list"],"sequence":{"follows":["practice-record-header"]},"avoidWhen":["The page has no reviewer"],"register":"marketing-landing"}},{"slug":"practice-credentials","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"The credentials a person holds and where a visitor can check each one.","whenToUse":["A person page, under the header"],"pageTypes":["about","marketing"],"howToUse":"Place it in a person's layout. A number is printed only when the credential row ticks Show the number. The verification link and its label come from the record.","pairsWith":["practice-record-header","practice-related"],"sequence":{"follows":["practice-record-header"]},"avoidWhen":["The person has no credentials entered"],"register":"marketing-landing"}},{"slug":"practice-related","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"Chips linking to the records connected to this one.","whenToUse":["People are seen for: on a person page","Other people on a topic page"],"pageTypes":["about","marketing"],"howToUse":"Choose what the chips list: topics, offerings or people. With no related record the block renders nothing, heading included.","pairsWith":["practice-record-header","practice-credentials"],"sequence":{"follows":["practice-credentials"]},"avoidWhen":["The page is not the page for a record"],"register":"marketing-landing"}},{"slug":"practice-book","package":"@wabbit/tome-blocks-practice-pack","docs":"https://wabbit.com/docs/packages/blocks-practice-pack","usage":{"summary":"Book or call, as equal choices, with the urgent line always in view.","whenToUse":["The end of a person page","The end of a topic page"],"pageTypes":["about","marketing","landing"],"howToUse":"Place it last in the record's layout. On a topic page it books with the person who leads the topic. The emergency line is typed here and always printed; leave it empty only if the site shows it elsewhere. Neither tile is hidden when the other is missing: a tile without a destination is left out and the other stands alone.","pairsWith":["practice-record-header","practice-offices"],"sequence":{"follows":["practice-offices"]},"avoidWhen":["The page is not a person or a topic"],"register":"marketing-landing"}},{"slug":"storefront-cart-trigger","package":"@wabbit/tome-blocks-storefront-pack","docs":"https://wabbit.com/docs/packages/blocks-storefront-pack","usage":{"summary":"The bag button for a shop header: a word (\"Bag\") and the number of items in the bag, which rolls like an odometer when it changes and shows its end value at once for visitors who prefer reduced motion. Pressing it opens the bag drawer. It reads the shared cart store, so it needs the storefront cart provider above it and a bag drawer block on the page; without the provider it shows a quiet static label, or a plain link if you give it a destination.","whenToUse":["The right side of a shop header, beside the navigation","Anywhere a visitor should see how many pieces are in their bag and open it"],"pageTypes":["marketing","landing"],"howToUse":"Set the label (default \"Bag\"). Optionally set a link: it is where the button goes if JavaScript is off or the cart provider is missing, and a click opens the drawer instead. Place it once per page; a site header usually gets it through the chrome cart slot, which renders the same button.","pairsWith":["storefront-cart-drawer","product-grid","product-card"],"avoidWhen":["The site does not sell physical goods through the storefront layer"],"register":"structural"}},{"slug":"storefront-cart-drawer","package":"@wabbit/tome-blocks-storefront-pack","docs":"https://wabbit.com/docs/packages/blocks-storefront-pack","usage":{"summary":"The bag, in a drawer that opens from the right over the page. It lists every line with its picture, name, option, quantity stepper, Remove and price; shows how far the bag is from free shipping, with a bar that grows from the last value the visitor saw; offers a pair of pieces that go with it; and ends with the shipping country, the subtotal, the store's tax note and one Checkout button. Every price comes from the server, which prices the bag again at checkout. An empty bag shows a message and a way back to the shop. It is a real modal dialog: the page behind it is inert, Escape closes it and focus returns to the button that opened it. Needs the storefront cart provider above it.","whenToUse":["Once on every page of a shop, so the bag button and Add to bag controls have a bag to open","In the shop layout the site wraps around every storefront page"],"pageTypes":["marketing","landing"],"howToUse":"Place it once per page; it renders nothing until the bag is opened. Write the empty bag's title, line and link (what the visitor should do next), choose how many \"goes with\" pieces to offer (0 turns it off), and set the checkout address. The tax note, the \"after the order\" line and the list of countries the store ships to come from the store settings when the site wires the server hydration; the fields here are the fallback.","pairsWith":["storefront-cart-trigger","product-grid","product-card"],"avoidWhen":["The site does not sell physical goods through the storefront layer"],"register":"structural"}},{"slug":"storefront-buy-box","package":"@wabbit/tome-blocks-storefront-pack","docs":"https://wabbit.com/docs/packages/blocks-storefront-pack","usage":{"summary":"The box a visitor buys from. It shows the kicker, the name, a line about the maker, the price (with a compare-at price and an edition tag when you set them), one choice group per axis (glaze swatches, size pills), a quantity stepper and the Add to bag button with the price inside it; changing a choice rolls the price in the button. Choices that cannot be bought with the others as chosen are struck through and announced as unavailable. Under it, one availability line: the edition, how many are left when stock is low, and the dispatch cutoff (\"Order by 2pm CT to ship today\", else \"Ships Tuesday\") when the store has a cutoff and a zone. On a phone, a bar with the name, choice and an Add button appears once the main button has scrolled out of view, and stays out of the way until then. The server prices the bag; this block never sends an amount. Needs the storefront cart provider above it. Sold-out pieces show a disabled \"Sold out\" button.","whenToUse":["The product page, beside the gallery","A home band that sells one featured piece in place (the `featured` variant)"],"pageTypes":["marketing","landing"],"howToUse":"Set the product (its catalog slug), the name and a line about the maker. Write the price label as the shop shows it (\"$38.00\"). For a piece with choices, add an axis for each (a short key, a label, its options; give an option a color for a swatch) and then one variant row per buyable combination with its SKU and price label. For a piece without choices, set the SKU. The stock line, the dispatch cutoff, the assurance row and the shipping fold fill in from the store settings when the site wires the server hydration. Use `featured` on a home band with an opener, a plate and margin notes.","pairsWith":["storefront-cart-drawer","storefront-cart-trigger","storefront-store-facts","product-gallery"],"avoidWhen":["The site does not sell physical goods through the storefront layer"],"register":"structural"}},{"slug":"storefront-store-facts","package":"@wabbit/tome-blocks-storefront-pack","docs":"https://wabbit.com/docs/packages/blocks-storefront-pack","usage":{"summary":"Prints what the store has told the settings: free shipping over a threshold (before discounts), the returns window, any extra labeled facts such as \"Made by\", and the \"After the order\" steps. Five layouts: a strip of facts under a hero; a compact assurance row; a proof panel (a titled list, with the tax note) for the lookup and sign-in pages; the four-step sequence with icons (packed, shipped, arrives, care card) where one step can be marked current on the confirmation page; and the whole sequence as one line. When the site wires the store facts, the words come from the settings and cannot disagree with the bag, the product page or checkout; the rows you write here are the fallback. Nothing renders when there is nothing to say.","whenToUse":["Under a hero, to put the shipping and returns promise where visitors look first","The \"After the order\" band on a home or product page, and on the order confirmation with the current step marked","Beside the order lookup form, as the proof panel"],"pageTypes":["marketing","landing"],"howToUse":"Pick a layout. For the steps layout, set a kicker and heading for the opener; for the confirmation page set the current step (1 is the first). The facts and steps come from the store settings when the site wires the server hydration; the rows below are the fallback for a preview or a site that has not wired it.","pairsWith":["storefront-buy-box","storefront-cart-drawer","high-impact-hero"],"avoidWhen":["The site does not sell physical goods through the storefront layer"],"register":"structural"}},{"slug":"storefront-checkout-step","package":"@wabbit/tome-blocks-storefront-pack","docs":"https://wabbit.com/docs/packages/blocks-storefront-pack","usage":{"summary":"The page between the bag and the payment page. It lists every line of the bag with its picture, option, quantity and price, then the subtotal, the shipping for the chosen country and the store's tax note. Beside it, a guest gives the email for the receipt (a signed-in member sees no email field), picks the country to ship to, and presses one button that opens the secure payment page. Every price comes from the server, which prices the bag again when the button is pressed; the page never sends an amount. If the server cannot take the order it says why in plain words next to the button, and a sold-out piece keeps the bag intact. An empty bag shows a message and a way back to the shop. Needs the storefront cart provider above it.","whenToUse":["The checkout page of a shop that sells physical goods through the storefront layer","As the only block on a single-task checkout page, with the bag drawer's Checkout button pointing at it"],"pageTypes":["marketing","landing"],"howToUse":"Place it alone on the checkout page. Set the heading and the Continue label, optionally a line about what the next page is and a Sign in link for guests, and write the empty bag (what to do next). The tax note, the list of countries the store ships to and the default country come from the store settings when the site wires the server hydration; the fields here are the fallback. A demo or test-mode shop fills the demo banner so buyers know nothing ships.","pairsWith":["storefront-cart-drawer","storefront-store-facts"],"avoidWhen":["The site does not sell physical goods through the storefront layer","Selling a single course or download, which has its own one-item checkout"],"register":"structural"}},{"slug":"storefront-order-confirmation","package":"@wabbit/tome-blocks-storefront-pack","docs":"https://wabbit.com/docs/packages/blocks-storefront-pack","usage":{"summary":"The page a buyer reaches after the payment page, and the page a signed order link opens. It finds the order from the address of the page, shows \"Confirming your payment\" while the payment settles and checks again every three seconds for up to a minute, then turns into the confirmed order: the order number, each line, the totals, the receipt address with the middle hidden, the city and country it ships to, and the store's \"After the order\" steps with the first one marked. If the payment takes longer than a minute it says so calmly and points at the order lookup, because the confirmation email arrives anyway. It only reads: it never marks an order paid. A polite announcement tells screen-reader users when the state changes. Every figure comes from the server.","whenToUse":["The page the payment provider returns to after a successful payment","The page a signed order link in the confirmation or lookup email opens"],"pageTypes":["marketing","landing"],"howToUse":"Place it alone on the page the payment provider returns to (the site passes the session in the address) and on the page the signed order links open. Write the headings and lines for the waiting and the paid states; both have sensible defaults. The \"After the order\" steps come from the store settings when the site wires the server hydration; the steps here are the fallback. Point the lookup link at the order lookup page.","pairsWith":["storefront-order-lookup","storefront-store-facts"],"avoidWhen":["The site does not sell physical goods through the storefront layer"],"register":"structural"}},{"slug":"storefront-order-lookup","package":"@wabbit/tome-blocks-storefront-pack","docs":"https://wabbit.com/docs/packages/blocks-storefront-pack","usage":{"summary":"A single-task page for a buyer who has lost their order link: one email field and one button. Pressing it always leads to the same \"Check your email\" message, whether or not the address has orders, so the page can never be used to find out who shops here; the store emails signed links to the address itself when there are paid orders from the last year. A hidden trap field catches bots, and the store limits how often an address or a visitor can ask, again with the same answer. Nothing about an order is ever shown on this page. It needs no cart provider.","whenToUse":["The \"Find your order\" page a confirmation email, a receipt or the order confirmation links to","A guest-friendly alternative to signing in, beside the sign-in page"],"pageTypes":["marketing","landing"],"howToUse":"Place it alone on the lookup page, with the store facts block beside it if you like. Write the heading and the line under it, and optionally a Back to the shop link and a Sign in link for people with an account. The check-your-email message after sending comes from the server and is the same for every address.","pairsWith":["storefront-order-confirmation","storefront-store-facts"],"avoidWhen":["The site does not sell physical goods through the storefront layer"],"register":"structural"}},{"slug":"storefront-restock-alert","package":"@wabbit/tome-blocks-storefront-pack","docs":"https://wabbit.com/docs/packages/blocks-storefront-pack","usage":{"summary":"The \"tell me when it is back\" form for a sold-out piece: a short heading, one sentence that says exactly what the visitor is agreeing to, one email field and one button. Pressing it always leads to the same \"Noted\" message, whether or not the address is already waiting, so the form can never be used to find out who has asked. A hidden trap field catches bots, and the store limits how often an address or a visitor can ask. When the store turns on double opt-in, the message says to check the inbox and the alert only counts once the link in that email is clicked. The email that finally goes out is one message about one piece, with an unsubscribe link, and never adds the address to a list. It needs no cart provider. On a product page the buy box and the catalog tile already show this same form inline once the pack's Add to bag control is registered; use the block to place it on its own.","whenToUse":["A product page or landing section for a piece that is sold out and may be made again","Beside a sold-out edition when the next one has no date yet"],"pageTypes":["marketing","landing"],"howToUse":"Name the product by its catalog slug (and the variant SKU when only one size or color is sold out). Optionally write the heading and the one-sentence promise; the promise is saved with each request as what the person agreed to, so say only what the store will do. The thank-you line after sending comes from the server and is the same for every address.","pairsWith":["storefront-buy-box","storefront-store-facts"],"avoidWhen":["The piece is in stock","The site does not sell physical goods through the storefront layer"],"register":"structural"}},{"slug":"signal-accordion","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A Signal accordion — a stack of expandable panels, each with a title, optional mono eyebrow Label, and rich-text body. Single-expand (opening one closes the last), Stacked (all panels independent), or FAQ presentation.","whenToUse":["A FAQ section where questions expand to reveal answers","Collapsing long supplementary or technical detail so the page scans short","Grouping several optional reading paths the reader opens on demand"],"pageTypes":["dossier","docs","faq","editorial-article"],"howToUse":"Pick the Single Expand variant for one-open-at-a-time panels, or keep Default and set designVersion (SINGLE / STACKED / FAQ); set an accentColor matching the Signal section. Add at least one item; each item needs a title and takes an optional Label eyebrow plus rich-text content. Use SINGLE when only one panel should be open at a time; STACKED when readers may open several. For step-by-step mission objectives use `signal-objective-list`, and for switching between parallel content panels use `signal-tabbed-content`.","pairsWith":["signal-tabbed-content","signal-note","signal-data-table"],"avoidWhen":["Showing parallel views the reader switches between, not stacks — use `signal-tabbed-content`","A short list of objectives with status — use `signal-objective-list`","Hiding a single spoiler or redacted passage — use `signal-spoiler` or `signal-redacted`"],"register":"dossier"}},{"slug":"signal-ambient-audio","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"An ambient-audio indicator — a small animated diegetic cue (bridge comms chatter, engine hum, alert klaxon) with a mono Label. Pure atmosphere: it sets the soundscape of a scene without playing actual audio.","whenToUse":["Establishing the ambient soundscape of a log entry or scene (comms / engine / alert)","Marking a tense moment in a dossier narrative with an alert-state cue","Adding diegetic flavor beneath a log header or transcript"],"pageTypes":["dossier","editorial-article","blog"],"howToUse":"Set designVersion (COMMS / ENGINE / ALERT), write a short uppercase Label (e.g. \"BRIDGE COMMS CHATTER\"), and pick an accentColor — ALERT typically pairs with red, ENGINE with amber, COMMS with cyan or blue. This is decorative atmosphere only; for an actual intercepted message use `signal-comm-intercept`, and for a status notice use `signal-system-alert`.","pairsWith":["signal-log-header","signal-comm-intercept","signal-sensor-readout"],"avoidWhen":["You need to render an actual message or transmission body — use `signal-comm-intercept` or `signal-comms`","Communicating a real status / warning to the reader — use `signal-system-alert`"],"register":"dossier"}},{"slug":"signal-banner","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A full-width Signal status banner. Pick a variant: the classification variants (Declassified, Restricted, Secret) render a classification strip; the alert variants (Hull Breach, Quantum, Comms, All Clear) render an animated ship-system alert. Author the banner text and an accent color.","whenToUse":["Marking a document or section with a classification level — Restricted / Secret / Declassified","Raising an in-fiction ship/system alert above content — Hull Breach / Quantum / Comms / All Clear"],"pageTypes":["dossier","landing","marketing","about"],"howToUse":"Pick the variant for the status you want, write the banner text (e.g. \"RESTRICTED // EXPEDITION COMMAND // EYES ONLY\" or \"HULL BREACH DETECTED — SECTION 4-ALPHA\"), and set the accent color to match the surrounding Signal section.","pairsWith":["signal-log-header","signal-personnel-card","signal-threat-panel"],"avoidWhen":["Body copy or a styled note — use `signal-note`","A standing alert that needs dismissal/interaction — this is a static immersive banner"],"register":"marketing-landing"}},{"slug":"signal-comms","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A Signal comms block. Pick a variant: Comm Intercept (an intercepted-signal readout with frequency / signal-strength header and clean / degraded / encrypted styling), or Comms Transcript (a multi-speaker transcript with per-callsign colors, optional redaction, and standard / intercepted / literary styling).","whenToUse":["Showing an intercepted radio/comm exchange with a frequency header — Comm Intercept variants","A multi-speaker transcript log with callsign colors and redaction — Comms Transcript variants"],"pageTypes":["editorial-article","dossier","blog","about"],"howToUse":"Pick the variant. Comm Intercept authors a Messages array (callsign / content / timestamp) plus an optional frequency and signal-strength header. Comms Transcript authors a Lines array (callsign / callsign color / message / timestamp / redacted flag) plus an optional header label. Both take a base accent color.","pairsWith":["signal-log-header","signal-redacted","signal-personnel-card"],"avoidWhen":["A plain styled note or aside — use `signal-note`","A tabular data readout — use `signal-data-table`"],"register":"editorial"}},{"slug":"signal-data-table","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A Signal-styled tabular dataset — defined Headers plus an array of Rows of cells (any cell can be highlighted bold/bright), with an optional caption. Standard for inline tables, Breakout to widen, or Comparison for side-by-side columns.","whenToUse":["Presenting rows-and-columns data: specs, manifests, comparison matrices","A reference table that needs an optional caption and per-cell emphasis","A side-by-side comparison of two or more options (Comparison variant)"],"pageTypes":["dossier","docs","about"],"howToUse":"Set designVersion (STANDARD / BREAKOUT / COMPARISON) and an accentColor. Define Headers first, then Rows whose cell count matches the headers; toggle highlight on any cell to bold/brighten it. Use the breakout width field to widen beyond the article column. For label-value summary panels (not a true grid) use `signal-stats`; for sensor contact tables use `signal-sensor-readout`.","pairsWith":["signal-stats","signal-progress-bar","signal-sensor-readout"],"avoidWhen":["A handful of label-value facts rather than a row/column grid — use `signal-stats`","Live sensor contacts with IFF/range/bearing — use `signal-sensor-readout`","Single-value progress meters — use `signal-progress-bar`"],"register":"dossier"}},{"slug":"signal-divider","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A Signal structural divider. Pick a variant: Phase Marker (a numbered badge + title — Standard / Colored / Compact), Chapter Divider (a decorative break — Ornamental / Numbered / Symbol), or Anchor Section (a named header that emits an in-page anchor `id` — Standard / Colored / Compact).","whenToUse":["Marking a numbered phase or stage in body copy — Phase Marker variants","A decorative break between chapters or major sections — Chapter Divider variants","A section header that doubles as an in-page anchor target — Anchor Section variants"],"pageTypes":["editorial-article","blog","dossier","about"],"howToUse":"Pick the variant. Phase / Chapter (numbered) author a Number + Title; Chapter (ornamental / symbol) need no fields. Anchor variants author an Anchor ID (used for in-page linking) + Title, with an optional Subtitle. All variants take an accent color. Title/Subtitle are hidden in the Compact phase/anchor variants.","pairsWith":["signal-note","signal-key-facts","signal-objective-list"],"avoidWhen":["A full-width status banner — use `signal-banner`","A clickable link card or series nav — use `signal-nav`"],"register":"editorial"}},{"slug":"signal-drop-cap","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":null},{"slug":"signal-footnotes","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A numbered footnotes / references apparatus — an array of notes (number + text, with an optional category). Standard renders one flat numbered list; Categorized groups notes under headings like \"Sources\" or \"Technical\".","whenToUse":["Closing an article or dossier section with numbered citations or references","Collecting source notes, technical caveats, and lore asides in one block","Grouping references by type — Sources vs. Technical vs. Lore (Categorized)"],"pageTypes":["editorial-article","dossier","docs","blog"],"howToUse":"Set designVersion (STANDARD or CATEGORIZED). Add each note with its reference number and text; in CATEGORIZED also set the category so notes cluster under that heading. Numbers are authored, not auto-generated, so they must match the markers in your body copy. Place it near the end of the reading flow — it terminates a section rather than opening one. For inline source asides mid-copy use a `signal-note` callout instead.","pairsWith":["signal-note","signal-cross-link","signal-series-nav"],"sequence":{"follows":["signal-note"]},"avoidWhen":["A single inline source aside within body copy — use `signal-note`","Navigation between related entries — use `signal-cross-link` or `signal-series-nav`"],"register":"editorial"}},{"slug":"signal-image-grid","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A multi-image gallery — at least two uploaded images, each with optional caption and alt text, laid out as a 2-column, 3-column, asymmetric, or masonry grid with an optional group caption.","whenToUse":["Showing a set of related visuals together — reference shots, environment plates, a photo array","A gallery where mixed aspect ratios read best as masonry or an asymmetric grid","Grouping captioned images under one shared group caption"],"pageTypes":["dossier","portfolio","editorial-article","blog"],"howToUse":"Set designVersion (TWO_COL / THREE_COL / ASYMMETRIC / MASONRY) and a breakout width to widen the gallery beyond the article column. Add two or more images; per image set an optional caption and altText (altText falls back to the media alt field). MASONRY suits mixed aspect ratios; THREE_COL suits uniform thumbnails. For a single full-bleed figure use a standard image block instead.","pairsWith":["signal-ship-card","signal-personnel-card","signal-note"],"avoidWhen":["A single hero or figure image — use a standalone image block","A spec card built around one ship render — use `signal-ship-card`"],"register":"dossier"}},{"slug":"signal-log-header","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A diegetic log-entry header — a masthead of metadata (log ID, date, location, ship, author) that frames a passage as an in-world log. Ship, Personal, or Mission framing.","whenToUse":["Opening an in-world log entry, captain’s log, or after-action report","Stamping a narrative passage with date / ship / signatory metadata","Establishing diegetic context above body copy in a dossier"],"pageTypes":["dossier","editorial-article","blog"],"howToUse":"Set designVersion (SHIP / PERSONAL / MISSION) and an accentColor. Fill the metadata you have — logId, date, location, ship, author; empty fields are omitted, so partial headers are fine. Place it at the top of the log passage as a masthead. Follow with body copy and optionally `signal-ambient-audio` for soundscape. For a mid-document divider between log entries use `signal-divider`.","pairsWith":["signal-ambient-audio","signal-objective-list","signal-divider"],"sequence":{"precedes":["signal-objective-list"]},"avoidWhen":["A standard editorial article headline — use a normal heading","A section break between entries rather than a header — use `signal-divider`"],"register":"dossier"}},{"slug":"signal-map-legend","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A key/legend — an optional title plus an array of entries, each a colored symbol and label. Horizontal renders an inline key strip; Sidebar stacks the entries in a column beside a map or diagram.","whenToUse":["Explaining the colored symbols on an adjacent map, chart, or tactical diagram","A standalone color/symbol key for an image or figure","A sidebar key beside an asymmetric image grid or diagram (Sidebar variant)"],"pageTypes":["dossier","docs","about"],"howToUse":"Set designVersion (HORIZONTAL or SIDEBAR) and add entries; each entry needs a label and a color, with an optional symbol character (e.g. \"◆\", \"●\"). Use SIDEBAR next to a map or `signal-image-grid` figure, HORIZONTAL as a caption-style strip beneath one. It only renders the key — supply the map/figure separately. For a tabular dataset use `signal-data-table`.","pairsWith":["signal-image-grid","signal-sensor-readout","signal-data-table"],"avoidWhen":["Rows-and-columns data rather than a symbol key — use `signal-data-table`","Listing sensor contacts with IFF/range — use `signal-sensor-readout`"],"register":"dossier"}},{"slug":"signal-nav","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A Signal navigation card. Pick a variant: Cross-Link (a single link card to another system — Standard, or Enhanced with a strip of stat metrics) or Series Nav (a navigator across the parts of a multi-part series — Top Banner / Bottom Card / Sidebar).","whenToUse":["Linking to a related operation, intel, codex, or external destination — Cross-Link variants","Navigating between the parts of a multi-part series — Series Nav variants"],"pageTypes":["editorial-article","blog","dossier","landing"],"howToUse":"Pick the variant. Cross-Link authors a Title, optional Description, a URL, a link Type (badge color), and — in Enhanced — a strip of metric label/value pairs. Series Nav authors a Title plus a list of Parts (each a title + URL, with one marked as the current article). All variants take an accent color.","pairsWith":["signal-divider","signal-key-facts","signal-stat-strip"],"avoidWhen":["A styled editorial aside — use `signal-note`","A full-width status banner — use `signal-banner`"],"register":"marketing-landing"}},{"slug":"signal-note","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A styled Signal editorial note. Pick a variant: Callout (tactical / info / lore / log boxes with an optional label), Aside (supplementary content floating into the right/left margin or inline), Author’s Note (an indented or margin-overlay editor note), or Epigraph (a centered / accent-border / verse literary quote with attribution).","whenToUse":["Calling out a tactical, informational, lore, or log note in body copy — Callout variants","A margin or inline aside of supplementary content — Aside variants","An author / editor note alongside the article — Author’s Note variants","A literary epigraph or pull-quote with attribution — Epigraph variants"],"pageTypes":["editorial-article","blog","dossier","about"],"howToUse":"Pick the variant. Callout / Aside / Author’s Note author rich-text Content + an optional Label (Callout and Author’s Note also take an accent color). Epigraph authors plain Text plus optional Attribution + Source and an accent color. Asides do not use an accent color.","pairsWith":["signal-drop-cap","signal-footnotes","signal-epigraph"],"avoidWhen":["A full-width status banner — use `signal-banner`","Primary body copy — use a content block; Signal Note is a styled aside to it"],"register":"editorial"}},{"slug":"signal-objective-list","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A mission-objectives checklist — an optional title plus objectives, each carrying a status (complete / failed / in-progress / pending) and an optional sub-note. Standard lists them flat; Phased groups objectives under phase headings.","whenToUse":["Tracking mission or quest objectives with per-item status","A staged plan whose steps group into phases (Phased variant)","Showing what was achieved vs. failed in an after-action report"],"pageTypes":["dossier","docs","about"],"howToUse":"Set designVersion (STANDARD or PHASED), an optional title (e.g. \"MISSION OBJECTIVES\"), and an accentColor. Add each objective with its text and a status; add an optional note for detail. In PHASED set the phase label on each objective to cluster them under headings. Sits naturally below a `signal-log-header`. For expandable Q&A use `signal-accordion`; for percentage meters use `signal-progress-bar`.","pairsWith":["signal-log-header","signal-progress-bar","signal-threat-panel"],"sequence":{"follows":["signal-log-header"]},"avoidWhen":["Percentage / completion meters rather than a status checklist — use `signal-progress-bar`","Expandable question-and-answer panels — use `signal-accordion`"],"register":"dossier"}},{"slug":"signal-personnel-card","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A personnel roster — up to twelve people, each with name, optional callsign, role, avatar, and a status badge (active / deployed / standby / inactive). Inline renders compact rows; Grid renders a card grid.","whenToUse":["Introducing a crew, team, or cast of characters with roles and status","A dramatis-personae or roster panel in a dossier","Showing who is active / deployed / standby on a mission"],"pageTypes":["dossier","about","portfolio"],"howToUse":"Set designVersion (INLINE or GRID) and an accentColor. Add up to twelve people; each needs a name and may add callsign, role, an avatar upload, and a status. Use GRID for a visual card wall with avatars, INLINE for a denser list. For a single ship rather than a person use `signal-ship-card`; for a captioned image array use `signal-image-grid`.","pairsWith":["signal-ship-card","signal-log-header","signal-image-grid"],"avoidWhen":["Profiling a vessel rather than a person — use `signal-ship-card`","A generic captioned image gallery — use `signal-image-grid`"],"register":"dossier"}},{"slug":"signal-progress-bar","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"One or more 0–100 progress meters — each bar a label, a value, and a per-bar color. Single for one meter, Stacked for several labeled bars, or Segmented for a notched gauge.","whenToUse":["Showing completion, capacity, or charge as a percentage meter","Comparing several proportional values as stacked labeled bars","A status gauge — hull integrity, fuel, mission completion"],"pageTypes":["dossier","docs","about"],"howToUse":"Set designVersion (SINGLE / STACKED / SEGMENTED) and an accentColor. Add up to eight bars; each needs a label and a value 0–100, plus a per-bar color (cyan / green / amber / red / ghost) to encode state. Use SINGLE for one headline meter, STACKED to compare several. For label-value figures without a bar use `signal-stats`; for status-tracked checklist items use `signal-objective-list`.","pairsWith":["signal-stats","signal-sensor-readout","signal-objective-list"],"avoidWhen":["Plain numeric facts without a proportional meter — use `signal-stats`","A rows/columns dataset — use `signal-data-table`","Status checklist items rather than percentages — use `signal-objective-list`"],"register":"dossier"}},{"slug":"signal-redacted","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":null},{"slug":"signal-sensor-readout","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A tactical sensor display — a titled list of contacts, each with a designation, type, IFF status (friendly / hostile / unknown), range, and bearing. Contacts mode for a target list; System mode for a systems readout.","whenToUse":["A tactical \"what’s on sensors\" panel in a combat or patrol scene","Listing detected contacts with IFF, range, and bearing","A systems-status readout framed as instrument output (System variant)"],"pageTypes":["dossier","editorial-article"],"howToUse":"Set designVersion (CONTACTS or SYSTEM), a title (e.g. \"SENSOR CONTACTS — SECTOR 7G\"), and an accentColor. Add each contact with a designation; type, IFF, range, and bearing are optional but make the readout convincing. IFF drives the contact’s color coding. For a threat-level assessment of the situation use `signal-threat-panel`; for a generic data grid use `signal-data-table`.","pairsWith":["signal-threat-panel","signal-map-legend","signal-data-table"],"avoidWhen":["An overall threat assessment rather than a contact list — use `signal-threat-panel`","A generic rows/columns table — use `signal-data-table`"],"register":"dossier"}},{"slug":"signal-ship-card","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A ship spec card — name, class, manufacturer, an image, and a list of spec label/value pairs. Horizontal or Vertical layout, or Comparison to render a second ship side-by-side.","whenToUse":["Profiling a single vessel with its key specifications","A side-by-side comparison of two ships (Comparison variant)","A spec sheet for any cataloged craft or vehicle in a dossier"],"pageTypes":["dossier","portfolio","about"],"howToUse":"Set designVersion (HORIZONTAL / VERTICAL / COMPARISON) and an accentColor. Fill shipName (required) plus class, manufacturer, an image upload, and up to eight spec label/value rows. Choosing COMPARISON reveals the second-ship group for a side-by-side. For people rather than vessels use `signal-personnel-card`; for a generic spec table use `signal-data-table`.","pairsWith":["signal-personnel-card","signal-data-table","signal-image-grid"],"avoidWhen":["Profiling crew or characters — use `signal-personnel-card`","A long flat spec table without the card framing — use `signal-data-table`"],"register":"dossier"}},{"slug":"signal-spoiler","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":null},{"slug":"signal-stats","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A Signal stats panel. Pick a variant: Key Facts (a sidebar / strip / compact panel of label-value pairs with status indicators), Metric Grid (a 4 / 3 / 2-column grid of metrics with per-metric accent colors, sublabels, and deltas), or Stat Strip (a horizontal standard / breakout / compact strip of stats with deltas and per-stat colors).","whenToUse":["A summary panel of key facts beside an article — Key Facts variants","A grid of headline metrics with change indicators — Metric Grid variants","A compact horizontal band of stats — Stat Strip variants"],"pageTypes":["dossier","landing","marketing","about"],"howToUse":"Pick the variant. Key Facts authors an optional Title plus a Facts array (label / value / status). Metric Grid authors a Metrics array (label / value / sublabel / delta / per-metric accent) and a breakout width. Stat Strip authors a Stats array (label / value / delta / per-stat color) and a breakout width. All variants take a base accent color.","pairsWith":["signal-data-table","signal-progress-bar","signal-sensor-readout"],"avoidWhen":["A tabular dataset with rows/columns — use `signal-data-table`","A single progress meter — use `signal-progress-bar`"],"register":"marketing-landing"}},{"slug":"signal-tabbed-content","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A tabbed panel — a tab bar plus one rich-text content pane per tab, switching the visible pane on click. Underline or Pill tab styling.","whenToUse":["Presenting parallel views of the same subject the reader switches between (Overview / Specs / Lore)","Saving vertical space by collapsing several content sections behind tabs","Organizing alternate readings where only one is shown at a time"],"pageTypes":["dossier","docs","about","faq"],"howToUse":"Set designVersion (UNDERLINE or PILL) and an accentColor. Add a tab per view; each tab has a short label and a rich-text content body. Keep labels terse so the bar reads cleanly. Use this when views are mutually exclusive; if readers may want several open at once use `signal-accordion` instead. For a top-of-document jump nav use `signal-cross-link`.","pairsWith":["signal-accordion","signal-note","signal-data-table"],"avoidWhen":["Readers may want multiple panels open at once — use `signal-accordion`","A short, always-visible aside — use `signal-note`"],"register":"dossier"}},{"slug":"signal-threat-panel","package":"@wabbit/tome-blocks-signal-theme","docs":"https://wabbit.com/docs/packages/blocks-signal-theme","usage":{"summary":"A threat-assessment panel — a required threat level (critical / elevated / advisory), a title, optional rich-text details, and up to six status indicators (active / monitoring / resolved). Full or Compact presentation.","whenToUse":["Flagging a tactical threat assessment with a graded level","A situation report whose severity drives prominent color coding","Tracking the state of several threat indicators in one panel"],"pageTypes":["dossier","editorial-article"],"howToUse":"Set designVersion (FULL or COMPACT) and an accentColor. The threatLevel (CRITICAL / ELEVATED / ADVISORY) and a title are required; threatLevel drives the panel’s alarm styling. Add rich-text details and up to six indicators, each with a label and a status. Pairs with `signal-sensor-readout` to show the contacts behind the assessment. For a general status notice rather than a graded threat use `signal-system-alert`.","pairsWith":["signal-sensor-readout","signal-objective-list","signal-system-alert"],"avoidWhen":["A general status / notice without a graded threat level — use `signal-system-alert`","A list of detected contacts — use `signal-sensor-readout`"],"register":"dossier"}}],"byPageType":{"landing":["about","ambient-band","banner","bento-section","blog","campaign-case","campaign-close","campaign-count","campaign-hero","campaign-terms","campaign-tiers","card","card-grid","case-file-grid","case-file-row","category-strip","chaptered-walkthrough","checklist","cinema-feature","compare-ledger","compareColumns","comparison-table","contact","content","content-pro","content-two-column","content-with-corner-notch","cost-ledger","course-card","course-index","cta","custom","dated-ledger","directoryAgeGate","directoryClaimCta","directoryListingDetail","directoryListingGrid","directoryMap","directoryMegaMenu","directoryPromotionsRail","directoryReviewForm","enrollment-cta","event-list","evidence-plate","evidence-sheet","exhibit","exhibit-artifact","faq","feature","feature-hero","featured-product","fit-list","fit-prose","form","fullBleedInterstitial","gallery","give-form","grants-ledger","grid","hero-pro","high-impact-hero","image-marquee","instructor-card","inventory-badge","layer-stack","layoutGrid","ledger","lesson-list","local-class-finder","local-class-pathway","local-class-schedule","local-credentials","local-desk-strip","local-facilities","local-live-status","local-locations","local-logistics","local-price-list","logo-slider","marquee","media","media-panel","membership-card","metric-strip","outcome-hero","practice-book","practice-desk-strip","practice-guide-list","practice-offering-list","practice-offices","practice-people-list","practice-steps","practice-topic-picker","price-table","pricing-plans","product-card","product-gallery","product-grid","progress-bar","proof-ledger","proof-plates","pull-interlude","receipts-trio","record-roster","scene-caption","scene-plate","scrub-story","section","section-header","service-rows","shift-rows","showcase","signal-banner","signal-nav","signal-stats","skill-path-rows","slat-deck","spacer","spec-plate","spec-sheet","split-panel","stacking-wrapper","stat","stat-bar","statement-band","stop-viewer","storefront-buy-box","storefront-cart-drawer","storefront-cart-trigger","storefront-checkout-step","storefront-order-confirmation","storefront-order-lookup","storefront-restock-alert","storefront-store-facts","switch-tally","team-roster","term-ledger","term-rows","terminal-steps","testimonial","testimonial-rail","text-block","text-reveal","title-block","video-spread","video-wall","work-index","zone-directory"],"about":["about","ambient-band","annotated-page","bento-section","blog","campaign-banner","card","card-grid","case-file-grid","case-file-row","category-strip","changelog","chaptered-walkthrough","checklist","cinema-feature","code","compareColumns","contact","content","content-pro","content-two-column","content-with-corner-notch","course-card","cta","dated-ledger","division-card","document-link","enrollment-cta","event-calendar","event-list","event-list-item","evidence-plate","evidence-sheet","exhibit-artifact","feature","feature-hero","featured-product","fit-prose","form","fullBleedInterstitial","gallery","grid","hero-pro","high-impact-hero","image-marquee","info-panel","instructor-card","inventory-badge","lab-notes","layer-stack","layoutGrid","ledger","lesson-list","local-credentials","local-desk-strip","local-facilities","local-live-status","local-locations","local-logistics","logo-slider","marquee","media","media-panel","member-card","member-grid","message-panel","metric-strip","org-chart","phase-ledger","practice-book","practice-credentials","practice-desk-strip","practice-modes","practice-offices","practice-path","practice-people-list","practice-record-header","practice-related","practice-reviewed-line","practice-steps","practice-topic-picker","product-card","product-grid","progress-bar","project-info","proof-ledger","pull-interlude","pull-quote","quiz-summary","receipts-trio","record-roster","scene-caption","scene-plate","scrub-story","section","section-header","shift-rows","showcase","signal-banner","signal-comms","signal-data-table","signal-divider","signal-map-legend","signal-note","signal-objective-list","signal-personnel-card","signal-progress-bar","signal-ship-card","signal-stats","signal-tabbed-content","signature","skill-showcase","slat-deck","spacer","spec-plate","spec-sheet","split-panel","stacking-wrapper","stat","stat-bar","statement-band","status-board","stop-viewer","team-roster","term-rows","terminal-steps","testimonial","testimonial-rail","text-block","text-reveal","timeline","trigger-tile","video-spread","wall-rows","zone-directory"],"marketing":["about","ambient-band","banner","bento-section","blog","campaign-case","campaign-close","campaign-count","campaign-hero","campaign-terms","campaign-tiers","card-grid","case-file-grid","case-file-row","category-strip","chaptered-walkthrough","checklist","cinema-feature","compare-ledger","compareColumns","comparison-table","contact","content","content-pro","content-two-column","content-with-corner-notch","cost-ledger","course-card","course-index","cta","custom","dated-ledger","directoryClaimCta","directoryListingDetail","directoryListingGrid","directoryMap","directoryMegaMenu","directoryPromotionsRail","enrollment-cta","evidence-plate","evidence-sheet","exhibit","faq","feature","feature-hero","featured-product","fit-list","fit-prose","form","fullBleedInterstitial","gallery","give-form","grants-ledger","grid","hero-pro","high-impact-hero","image-marquee","instructor-card","inventory-badge","layer-stack","layoutGrid","ledger","lesson-list","local-class-finder","local-class-pathway","local-class-schedule","local-credentials","local-desk-strip","local-facilities","local-live-status","local-locations","local-logistics","local-price-list","logo-slider","marquee","media","media-panel","membership-card","metric-strip","outcome-hero","practice-book","practice-credentials","practice-desk-strip","practice-guide-list","practice-offering-list","practice-offices","practice-path","practice-people-list","practice-record-header","practice-related","practice-reviewed-line","practice-steps","practice-topic-picker","price-table","pricing-plans","product-card","product-gallery","product-grid","proof-ledger","proof-plates","pull-interlude","pull-quote","receipts-trio","record-roster","scene-caption","scene-plate","scrub-story","section","section-header","service-rows","shift-rows","showcase","signal-banner","signal-stats","skill-path-rows","slat-deck","spacer","spec-plate","spec-sheet","stacking-wrapper","stat","stat-bar","statement-band","status-board","stop-viewer","storefront-buy-box","storefront-cart-drawer","storefront-cart-trigger","storefront-checkout-step","storefront-order-confirmation","storefront-order-lookup","storefront-restock-alert","storefront-store-facts","switch-tally","team-roster","term-ledger","term-rows","terminal-steps","testimonial","testimonial-rail","text-block","text-reveal","timeline","title-block","video-spread","video-wall","work-index","zone-directory"],"editorial-article":["annotated-page","archive","article-hero","banner","breadcrumb","card","case-file-row","code","compareColumns","content","content-pro","content-two-column","editorial-bridge","editorial-colophon","editorial-figure","editorial-footnotes","editorial-opener","editorial-sidenote","editorialSpread","evidence-plate","fullBleedInterstitial","gallery","grid","info-panel","lab-notes","media","media-panel","message-panel","metric-strip","phase-ledger","post-notice","practice-modes","pull-interlude","pull-quote","related-items","related-posts","scene-caption","scene-plate","section","section-header","signal-accordion","signal-ambient-audio","signal-comms","signal-divider","signal-footnotes","signal-image-grid","signal-log-header","signal-nav","signal-note","signal-sensor-readout","signal-threat-panel","signature","spacer","split-panel","status-board","testimonial","text-block","text-reveal","timeline","trigger-tile","wall-rows"],"blog":["archive","article-hero","banner","blog","breadcrumb","card","changelog","code","content","content-pro","editorial-bridge","editorial-colophon","editorial-figure","editorial-footnotes","editorial-opener","editorial-sidenote","event-list-item","media","post-notice","practice-guide-list","practice-reviewed-line","pull-quote","related-items","related-posts","section","signal-ambient-audio","signal-comms","signal-divider","signal-footnotes","signal-image-grid","signal-log-header","signal-nav","signal-note","signature","spacer","text-block","trigger-tile"],"docs":["annotated-page","archive","article-hero","banner","breadcrumb","card","changelog","chaptered-walkthrough","code","comparison-table","content","content-two-column","course-card","course-index","custom","division-card","document-link","editorial-bridge","editorial-colophon","editorial-figure","editorial-footnotes","editorial-opener","editorial-sidenote","editorialSpread","event-calendar","event-list-item","faq","grid","info-panel","instructor-card","lab-notes","layer-stack","lesson-list","message-panel","org-chart","phase-ledger","post-notice","practice-modes","progress-bar","quiz-summary","related-items","related-posts","section","section-header","signal-accordion","signal-data-table","signal-footnotes","signal-map-legend","signal-objective-list","signal-progress-bar","signal-tabbed-content","skill-path-rows","spacer","term-ledger","term-rows","terminal-steps","text-block","trigger-tile","wall-rows"],"portfolio":["archive","bento-section","breadcrumb","campaign-banner","card-grid","case-file-grid","cinema-feature","content-with-corner-notch","custom","dated-ledger","exhibit","feature","gallery","grid","hero-pro","info-panel","layoutGrid","logo-slider","marquee","media","media-panel","member-card","member-grid","plate-sequence","project-hero","project-info","related-items","scrub-story","section","section-header","service-rows","showcase","signal-image-grid","signal-personnel-card","signal-ship-card","skill-showcase","spacer","split-panel","stacking-wrapper","stat-bar","status-board","timeline","title-block","video-wall","work-index"],"dossier":["about","annotated-page","campaign-banner","changelog","compare-ledger","compareColumns","cost-ledger","dated-ledger","division-card","document-link","editorial-figure","editorialSpread","event-calendar","event-list","evidence-sheet","exhibit-artifact","info-panel","layoutGrid","ledger","member-card","member-grid","message-panel","metric-strip","org-chart","project-info","proposal-addons","proposal-asks","proposal-chapter","proposal-checklist","proposal-close","proposal-cover","proposal-doors","proposal-letter","proposal-media-spread","proposal-monthly","proposal-offers","proposal-plans","proposal-stat-strip","proposal-statement","pull-quote","related-items","signal-accordion","signal-ambient-audio","signal-banner","signal-comms","signal-data-table","signal-divider","signal-footnotes","signal-image-grid","signal-log-header","signal-map-legend","signal-nav","signal-note","signal-objective-list","signal-personnel-card","signal-progress-bar","signal-sensor-readout","signal-ship-card","signal-stats","signal-tabbed-content","signal-threat-panel","signature","skill-showcase","split-panel","status-board","team-roster","text-reveal","timeline"],"pricing":["campaign-tiers","card-grid","checklist","comparison-table","cta","faq","fit-list","grants-ledger","local-price-list","practice-offering-list","price-table","pricing-plans","proof-plates","statement-band","switch-tally"],"faq":["faq","form","signal-accordion","signal-tabbed-content"]},"unauthored":["custom-hero","data-hero","editorialSection","lexical-banner","lexical-document-embed","lexical-entity-reference","lexical-motion-text","page-hero","post-hero","signal-drop-cap","signal-redacted","signal-spoiler","split-view","study-hero"]}