Documentation menu
Documentation / Blocks & themes / blocks-marketing-starter
Blocks Marketing Starter
npm install @wabbit/tome-blocks-marketing-starterFirst install from our registry?
Get a free registry token from your credentials page. Every install from our registry needs one, free packages included.
Add the registry and your token to the
.npmrcat the root of your project, with your token in place ofYOUR_TOKEN:@wabbit:registry=https://npm.wabbit.com/ //npm.wabbit.com/:_authToken=YOUR_TOKEN
Free-tier landing-page and marketing blocks: high-impact hero, feature hero, CTA, logo slider, pricing, banner, FAQ, testimonial, exhibit, and the stop viewer, switch tally, proof ledger, terminal steps, layer stack, term rows and slat deck bands.
Overview
Tier: Free — included in every Tome site by default.
Essential blocks for landing pages and marketing sites.
Peer dependencies
Tome site (via meta-package — recommended)
If your site uses @wabbit/tome-blocks, you already have this bundle. No additional install needed. The meta-package's registerAll() call includes marketing-starter.
Stock Payload site — add to an existing blocks field
@wabbit/tome-blocks-core and @wabbit/tome-blocks-extras are required peers and install automatically (npm 7+/pnpm). Add the blocks you want alongside your existing ones and render them — full canonical walkthrough (including the two colliding slugs below) lives in @wabbit/tome-blocks-core's "Add Tome blocks to an existing Payload project":
// payload.config.ts
import { ctaBlock, faqBlock } from '@wabbit/tome-blocks-marketing-starter'
// blocks: [...existingBlocks, ctaBlock.block(), faqBlock.block()]// blockComponents.ts
import { renderers as marketingRenderers } from '@wabbit/tome-blocks-marketing-starter/render/register'
import { adaptRenderersForPayload } from '@wabbit/tome-blocks-core/render'
// blockComponents: { ...adaptRenderersForPayload(marketingRenderers) }@import '@wabbit/tome-blocks-core/styles.css';Render through this package's RenderBlocks with the grid class — skip the grid and blocks render flush to the viewport edge with no error:
// RenderBlocks.tsx
import { blockComponents } from './blockComponents'
import { RenderBlocks as TomeRenderBlocks } from '@wabbit/tome-blocks-core/render'
import gridStyles from '@wabbit/tome-ui/grid'
export function RenderBlocks({ blocks }: { blocks: LayoutBlock[] }) {
return <TomeRenderBlocks blocks={blocks} components={blockComponents} gridClassName={gridStyles.grid} />
}cta and banner collide with the Payload website/ecommerce templates' own block slugs of the same name — see @wabbit/tome-blocks-core's "Coming from the Payload website template" section for the slug-override fix.
Registering everything from scratch instead, wire the register() call into your Payload config:
// payload.config.ts
import { BlockRegistry, BundleRegistry } from '@wabbit/tome-blocks-core/registry'
import { register } from '@wabbit/tome-blocks-marketing-starter'
const blockRegistry = new BlockRegistry()
const bundleRegistry = new BundleRegistry()
register(blockRegistry, bundleRegistry)
export default buildConfig({
collections: [
{
slug: 'pages',
fields: [
{
name: 'layout',
type: 'blocks',
blocks: blockRegistry.resolveAll(),
},
],
},
],
})Collections the blocks relate to. Upload fields point at media (pass mediaCollection to change it) and links at pages, the collections Payload's website template already has. Pricing cards and testimonials are entered on the block by default, so the pack needs no collection of its own; to keep them in a collection instead, pass its slug (productCardsCollection for pricing, testimonialsCollection for testimonial), e.g. blockRegistry.resolveAll({ testimonialsCollection: 'testimonials' }). Payload refuses to start if a relationship points at a collection your config doesn't have.
Using BlockPicker (optional)
If you want the visual block picker UI, also install @wabbit/tome-blocks-core and wire in the BlockPicker admin component. See @wabbit/tome-blocks-core README for full BlockPicker setup.
Block List
| Slug | Name | Variants |
|---|---|---|
high-impact-hero | High Impact Hero | default, centered, dark, split, illustrationHero, quick-ask, venue |
feature-hero | Feature Hero | default, minimal, dark, playful |
cta | Call to Action | default, minimal, with-form, footer, door-strip, doors, command-close |
logo-slider | Logo Slider | default, dark, static-grid, marquee-editorial |
pricing-plans (Payload slug pricingPlans; config subpath @wabbit/tome-blocks-marketing-starter/blocks/pricing) | Pricing | default, compact, dark, editorial |
testimonial | Testimonial | default, editorial, dark, carousel |
faq | FAQ | default, minimal, two-column, dark |
banner | Banner | default, editorial, dark, sticky |
exhibit | Exhibit Wall | gallery-wall |
stop-viewer (Payload slug stopViewer) | Stop Viewer | stage |
switch-tally (Payload slug switchTally) | Switch Tally | accent-band |
proof-ledger (Payload slug proofLedger) | Proof Ledger | window |
terminal-steps (Payload slug terminalSteps) | Terminal Steps | ink-band |
layer-stack (Payload slug layerStack) | Layer Stack | stack |
term-rows (Payload slug termRows) | Term Rows | big-terms |
slat-deck (Payload slug slatDeck) | Slat Deck | default |
High Impact Hero `quick-ask`. Text left, media right. Three optional groups, shown only for this variant: quickAsk (a visible label, options[], a button label, an action URL or #anchor, and a paramName, default need) renders a plain GET form with a real <select>, so it works without JavaScript: an action of #contact submits to ?need=<value>#contact. callAction (label, phone, showOnDesktop) renders a tel: link that leads the actions on phones; from 768px it is hidden unless showOnDesktop is ticked (default off), in which case it follows the quick ask. proofLine (an optional bold proofLead such as "Next opening:", text, optional status dot) sits under the actions; the dot and its first phrase (the lead, or the first word of the text) never wrap apart. The job caption is supportingImages[].caption. Theme hooks: data-block-variant="quick-ask", data-hero-actions, data-hero-call (with data-hero-call-desktop="true|false"), data-hero-quick-ask, data-hero-proof (with data-hero-proof-start on the no-wrap dot group and data-hero-proof-lead on the lead), data-status-dot, data-hero-media, data-hero-caption.
High Impact Hero `venue`. The opener for a place people visit: a short meta line (eyebrow), the venue's name set very large (headline), one line (subheadline) and its action (links), with the photo from backgroundOptions.backgroundImage (Background Type: Image). One optional group, shown only for this variant and with no default value: venue.mediaPlacement, behind (empty reads as behind) or above. Behind, the photo fills the hero and the copy sits at its foot over a scrim layer, on a fixed dark plate with light ink; the scrim is the theme token --tome-hero-scrim (default a bottom-up dark gradient, at least 62% under the copy). Above, the photo runs full width on top and the copy is set beneath it on the page; from 1024px the name takes the wide left column and the line and action sit to its right. --tome-hero-scrim defaults to none there. The venue does not render description, reviews, supporting images, the marquee, orientation or the size selects. The venue photo is the page's largest paint, so it is asked for with priority and fetchPriority="high" (eager, high fetch priority); the other variants are unchanged. The photo wrapper ([data-hero-media]) states inline-size: 100% in the pack's own stylesheet, so it fills the hero in every engine and theme (WebKit, and every engine at 1024px, otherwise worked its width out from the row height); where the width already resolved to 100% nothing changes, and the markup is the same. Theme hooks: data-block-variant="venue", data-hero-media-placement="behind|above", data-hero-media, data-hero-scrim, data-hero-meta, data-hero-name, data-hero-line, data-hero-actions.
High Impact Hero `split` call, image label and caption line. callAction (label, phone) is also shown for split, where it renders as an inline tel: link after the buttons, e.g. "or call (555) 010-2030", at every width (showOnDesktop applies to quick-ask only). An empty label reads "or call" after buttons and "Call" when there are none; a phone with fewer than three digits renders nothing. In every variant that shows supporting images, supportingImages[].label sets a short tag over the image (e.g. "Illustrative photo") and supportingImages[].captionMeta adds a smaller second caption line. Each renders only when set, so existing images keep their markup. Theme hooks: data-hero-call, data-compliance-label, data-caption-meta.
High Impact Hero `split` eyebrow lead and caption name. eyebrowLead (optional text, split only) renders a bold lead before the eyebrow, "Batch 14 · out of the kiln": <b data-hero-eyebrow-lead> then · and the eyebrow text (the lead alone when the eyebrow is empty). Empty or absent leaves the eyebrow as before. In the shop caption chip the caption name is wrapped in <strong data-hero-caption-name> so a theme can set the name apart from the second line (data-caption-meta); a plain caption keeps its markup.
High Impact Hero `split` media side, proof line and motif. mediaSide (start | end; empty reads as end, the existing layout) puts the supporting images before or after the copy from 768px; below that the stack stays in reading order. proofLine (proofLead, text, showDot) is now also shown for split, as one line under the buttons. motif (image, alt) is an optional small plate beside the proof line; it renders only when both the image and its alt text are set, and the admin field requires the alt text once an image is chosen. All three are optional with no default, so stored documents keep their layout. Split now writes neutral theme hooks: data-hero-media-side on the root, data-hero-copy, data-hero-subheadline, data-hero-media, and, when the proof line or motif is set, data-hero-foot holding data-hero-proof (with data-hero-proof-lead) and data-hero-motif. The block ships neutral default styling only; a theme styles the hooks.
High Impact Hero `split` choice group. choice (optional, split only, no default) is a question and two to six choices: legend (the question, read aloud as the group's name), options[] of label (required), answer (one sentence) and action (label, href, newTab; it shows with both a label and a link, and a javascript:, data: or vbscript: link is ignored), and defaultOption (the choice open on load, counting from 0; empty opens the first). It renders as a real <fieldset> with a <legend>, a radio and a label per choice, and the checked choice's answer and link beneath; switching is CSS only (the checked radio selects its panel with :has), so it needs no script, and the arrow keys and Tab work as on any radio group, with a visible focus ring on the label. With no choices, or fewer than two with a label, nothing renders and the hero is exactly as before. From 768px the choice sits under the copy and the photo spans both rows (mediaSide still decides the side); on phones the order is the copy, the media, then the choice. Theme hooks: data-hero-choice on the fieldset, data-choice-legend, data-choice-set (the inputs, labels and answer panels; the panels follow every input and label), data-choice-option on each label and data-choice-input on each radio (both with data-choice-key, the choice's index), data-choice-answer on each panel (with data-choice-key) and data-choice-action on its link. A theme styles these and never sets display on a panel, so the no-script switch keeps working.
Testimonial `quotes-grid` layout and compliance labels. The layout select adds quotes-grid: every testimonial (the related list, else the single relation, else every entry, whatever the mode) becomes a short quote in a grid, one column on phones, two from 640px, three from 1024px. The optional stat group (value, text, label, position) adds one figure tile; position is its 1-based cell among the quotes, default 2, and past the end it goes last. The tile shows when a value or a text is set. Each testimonial's optional complianceLabel (the same field name a testimonials collection can use) renders with its quote in every layout. Theme hooks: data-testimonial-layout="quotes-grid" on the root, data-testimonial-cell on every cell (each quote's <figure> and the tile), data-testimonial-lead on the first quote's <figure> (never the tile; quotes-grid only, so a theme can set a lead quote), data-testimonial-stat on the tile, data-compliance-label on each label. The grid's column count is --tome-testimonial-grid-cols (it sets every width when a theme sets it; scope it in a media query to vary it). An optional eyebrow (quotes-grid only) renders a small section label above the section title, <p data-block-eyebrow>. Star a run of the stat value to set it smaller: "9 in 10" renders "in" as <em data-testimonial-stat-unit> (upright, --tome-testimonial-stat-unit-size, default 0.5em); a value with no stars renders as before. In the carousel, each dot keeps its drawn size and has a 44px-tall hit area as wide as the dot plus the gap, so neighboring areas tile without overlapping. The gap is --tome-testimonial-dot-gap (default var(--tome-space-xs), the existing look); a theme can widen it to calc(44px - var(--tome-space-2)) for full 44×44 targets. Part hooks, all layouts: data-testimonial-quote, -cite, -name, -role, -media, and in the carousel -dots on the nav with -dot on each button. The custom section title renders as an h3; the optional titleLevel (h2 or h3, default h3) emits an h2 for a block that opens its section with no heading above it.
FAQ `openFirst` and part hooks. A checkbox (default off) that renders the first <details> open; the root then carries data-faq-open-first. Every FAQ carries part hooks: data-faq-item on each <details>, data-faq-question on its <summary>, and data-faq-answer on a plain, unstyled <div> around the answer. The answer's own element is rendered by your rich-text adapter, which accepts only a class name, so the hook sits on the wrapper; the wrapper renders only when there is an answer. The header group carries data-block-header and the badge data-block-eyebrow. The closing callout carries data-faq-callout and its link data-faq-callout-link; calloutStyle (box by default, or line) sets it either as the centered panel with a filled button or as a plain start-aligned line with a text link (data-faq-callout-style="line"). An optional calloutAfter text renders after the link as <span data-faq-callout-after> (for example "I read every one."); empty renders nothing.
FAQ groups, side card and hours-aware callout. Three optional additions, none with a default value, so existing questions render the same markup. faqs[].group files a question under a heading: questions sharing a label are gathered under one <h3 data-faq-group-title> inside a data-faq-group wrapper (groups in order of first appearance, unlabelled questions in a group of their own, data-faq-grouped on the list); with no group set the list stays flat. calloutPlacement: 'aside' turns the closing callout into an <aside> card (data-faq-callout-placement="aside") that sits beside the questions as a sticky card from 1024px and under them on phones; unset or after keeps it under the questions. calloutTextOpen and calloutTextClosed (rich text) swap the callout copy by the site's hours: the callout renders calloutText as the neutral copy (data-when-neutral) plus an open copy (data-when-open) and a closed copy (data-when-closed), and the block's stylesheet shows the one that matches <html data-tome-open="true|false">, which chrome writes from the site's hours. With the attribute absent the neutral copy shows, so a site without hours never reads "closed"; a side left empty falls back to calloutText. The callout link and the line after it are not swapped.
FAQ second callout link. calloutSecondLink { label, url } (optional, no default) adds a quieter text link after the callout link, marked data-faq-callout-second, for a second destination such as "All parent questions". It shows only with both a label and a link (a javascript:, data: or vbscript: link is ignored); unset, the callout renders exactly as before. The label is localized.
Stop Viewer. A band with a rail of stops beside one framed picture, for walking a reader through the parts of a product. Fields: heading (*emphasis* sets a run in italic) and lede; stops[] (1-8) of name (required), priceLabel (a short line under the name in the rail), routeLabel (shown in the bar and on the open button, for example /products), link (a link group; the picture and the open button go there), siteImage and adminImage (uploads), description, detail (one line: a command or a note) and detailKind (note, the default, or command, set in the mono face); and a Labels group (railLabel, siteLabel, adminLabel, adminRoute default /admin, openLabel default Open). Picking a stop in the rail shows its route, picture, description and detail; the site/admin toggle swaps the picture and is hidden while the selected stop has no adminImage; the chosen mode holds across stops where there is an admin picture. The rail and the toggle are plain buttons with aria-pressed. Every stop is rendered on the server and the unselected ones are hidden, so the first stop is in the HTML without JavaScript and a hidden picture does not load until its stop is picked (the first stop's picture is asked for early). The feet are stacked in one grid cell and the picture keeps one aspect ratio, so nothing jumps. A picture without alt text takes name, site label as its alt. Client code: StopViewer.client, the island that holds the selected stop and the mode; the logic is in blocks/stop-viewer/state.ts. Theme hooks: data-variant="stage", data-stop-viewer.
Switch Tally. Switches for optional add-ons with a running total and the exact install line. Fields: heading, lede; currency (default $), period (default a year) and commandPrefix (default npm install); rows[] of name, description, price (a plain number) and packages (names separated by spaces, commas or new lines); closingNote; links[] (up to 3, each a link group with a label and an appearance of default or outline); and a Labels group (totalLabel default Total, zeroTotalText, commandLabel, zeroCommandText, switchLabel default Add). Nothing is priced in code: each amount prints as the currency, the number and the period. Turning a row on adds its price to the total and its packages to the install line, each package once, in row order; a zero total prints zeroTotalText when set, and an empty command prints zeroCommandText. Each row is one button with role="switch" and aria-checked that fills the whole row (a 44px target); the total sits in a polite live region, and below 1024px a pinned mini total stays above the switches. Client code: SwitchTally.client; the logic is in blocks/switch-tally/tally.ts. Without JavaScript the rows render off and the panel shows its zero state. Theme hooks: data-variant="accent-band", data-switch-tally.
Proof Ledger. A reassurance band. Fields: heading; promises[] (up to 4, title and body); ledgerHeading (a large heading over the figure); figure and figureCaption; a Window group (windowTitle, windowLabel at the right of the title bar, names one check per line, footer); and figures[] (up to 4, value and label). The figure and its caption share one column that is centered against the height of the window. Every number is stored content: the block counts nothing, so generate the figure and the check names from the source of truth. Server component. Theme hooks: data-variant="window".
Terminal Steps. Numbered steps beside a terminal pane. Fields: heading, sub (plain text; a blank line starts a new paragraph); steps[] of title, body (rich text) and bodyText (plain text, used when the rich body is empty); and a Terminal group (title and lines[] of kind, command or output, and text). A command line is shown with a prompt drawn in CSS, so the prompt is neither copied nor read aloud. The pane is a keyboard-focusable region so a long line can be scrolled. Server component. Theme hooks: data-variant="ink-band".
Layer Stack. A stack of toned rows from the top of a system to its base. Fields: heading, sub; layers[] of label (mono), body (rich text, which allows a link), bodyText (plain text fallback) and tone (neutral, accent, optional with a dashed outline, base inverted; anything else reads as neutral). The first row is drawn at the top. Server component. Theme hooks: data-variant="stack", data-layer-tone on each row.
Term Rows. Hairline-ruled rows with a large term at the left and its reason at the right (5/7), as a definition list. Fields: heading; rows[] of term and reason. Server component. Theme hooks: data-variant="big-terms".
Slat Deck. Full-height photo slats in a row, for two to seven items that each deserve a picture, a name, a line and one link. Fields: heading, intro (both optional) and groupLabel (names the group for screen readers when there is no heading; default Highlights); items[] (2-7) of name (required), shortName, image (required upload), alt, body (one or two sentences), note (the chip line) and action (label, href, newTab); and defaultOpen (the slat open on load, counting from 0; empty opens the first). One slat is open and shows its name, sentences, chip and link; the others narrow to vertical names on a dark scrim. Hover (where the device hovers), focus or a tap opens a slat, and its link is the next tab stop; below 768px the slats stack and open vertically. A collapsed name is set sideways on one line, so it must fit: a name over 24 characters needs a shortName of 24 or fewer, and the admin enforces it. Reduced motion removes the transitions and the fade and hides nothing. Without JavaScript the default slat is open and every collapsed name still reads. An item with no name or no picture is skipped, and fewer than two usable items render nothing. Alt text falls back to the media's own, then to empty. Client code: SlatDeck.client, the island that holds which slat is open; the logic is in blocks/slat-deck/state.ts. Theme hooks: data-slat-deck with role="group" on the root, data-slat on each item (data-slat-active="true" on the open one), data-slat-media, data-slat-body (the text container), data-slat-name (the heading around the toggle button) with data-slat-name-short and data-slat-name-long, data-slat-more (the panel), data-slat-text (the sentences), data-slat-meta (the chip line) and data-slat-action.
CTA `command-close`. An inverted closing band: the title at the left and, at the right, a lead, an optional command with a Copy button, a reassurance line, the link buttons and a quieter line for a second audience. Fields, shown only for this variant: closeTitle (*emphasis* sets a run in italic), closeLead, closeCommand, closeReassurance, closeDoor (rich text, links allowed), copyLabel and copiedLabel (blank read Copy and Copied); the buttons are the existing links (an appearance of outline draws the ghost button). With closeCommand empty, the command area and the Copy button do not render, so a product whose install path is not public yet shows none. The Copy button is a real button beside the scrolling command, never inside it, with a polite live region. Client code: CopyCommand.client. Theme hooks: data-variant="command-close".
Spine blocks: colors and motion. The six blocks above and command-close paint from the page's tokens only: dark bands swap --tome-color-foreground and --tome-color-background (as the editorial ledger does), the Switch Tally band uses --tome-color-primary and --tome-color-on-primary, and the tinted bands mix the page ink into the page background, so each follows the host's palette. They span the whole grid row with their content between content-start and content-end. They reveal on scroll through the shared Reveal; with reduced motion, or with scripting off, they show at once.
Note on "Footer CTA": The spec references "Footer CTA" as an owned block. This is the footer variant of the cta block (slug: 'cta', variant slug 'footer'), not a separate block slug. The cta block is included here with all seven variants.
Peer dependencies
Generated from package.json#peerDependencies (the README gate fails if this table and the manifest disagree).
| Peer | Range | Required |
|---|---|---|
@payloadcms/richtext-lexical | >=3.67.0 | yes |
payload | >=3.67.0 | yes |
react | >=19.0.0 | yes |
react-dom | >=19.0.0 | yes |
@wabbit/tome-blocks-core | >=0.45.0 <1.0.0 | yes |
@wabbit/tome-blocks-extras | >=0.28.0 <1.0.0 | yes |
@wabbit/tome-core | >=1.22.0 <2.0.0 | yes |
Public API
| Export | Subpath | Description |
|---|---|---|
Block descriptors (highImpactHeroBlock, featureHeroBlock, ctaBlock, logoSliderBlock, pricingBlock, testimonialBlock, faqBlock, bannerBlock, exhibitBlock, stopViewerBlock, switchTallyBlock, proofLedgerBlock, terminalStepsBlock, layerStackBlock, termRowsBlock, slatDeckBlock) + register(blockRegistry, bundleRegistry) | . | Payload block config descriptors and bundle registration |
HighImpactHero, FeatureHero, Cta, LogoSlider, PricingPlans, Testimonial, Faq, Banner, Exhibit, StopViewer, SwitchTally, ProofLedger, TerminalSteps, LayerStack, TermRows, SlatDeck | @wabbit/tome-blocks-marketing-starter/render | Legacy self-registering render barrel |
renderers map + registerRenderers() | @wabbit/tome-blocks-marketing-starter/render/register | Explicit registration (server-safe adapter contract) — no side effects on import |
getDemoProps(blockSlug, variant, ctx?) (plus tree-shakeable per-block demo functions) | @wabbit/tome-blocks-marketing-starter/demo | Pack-level demo-props dispatcher feeding the auto-gallery route; returns null for unknown slugs |
| Bundle/block metadata (slugs + variants) | @wabbit/tome-blocks-marketing-starter/meta | Payload-free surface for the gallery storefront |
bannerBlock, ctaBlock, exhibitBlock, faqBlock, featureHeroBlock, highImpactHeroBlock, layerStackBlock, logoSliderBlock, pricingBlock, proofLedgerBlock, slatDeckBlock, stopViewerBlock, switchTallyBlock, termRowsBlock, terminalStepsBlock, testimonialBlock | @wabbit/tome-blocks-marketing-starter/blocks/* | Per-block config subpath (one per block slug) |
Server / client posture
8 of this pack's 16 renderers are plain static components — Banner, Cta, Faq, Exhibit, ProofLedger, TerminalSteps, LayerStack, TermRows. Three more, StopViewer, SwitchTally and SlatDeck, are server wrappers around one small client island each (StopViewer.client, SwitchTally.client, SlatDeck.client), and the cta command-close variant's Copy button is the client file CopyCommand.client. The other 5 (Testimonial, HighImpactHero, FeatureHero, PricingPlans, LogoSlider) carry a 'use client' directive (scripts/assert-rsc-boundaries.mjs MANIFEST: blocks-marketing-starter: 11 — the files are those 5 renderers, PricingPlanCard, an internal sub-component already living inside the client PricingPlans boundary, BannerDismiss.client, SlatDeck.client and the three new islands) — each needs interactivity (carousel/slider motion, animated counters, plan-toggle state) that a Server Component can't provide. This is the highest client-ratio pack in the family; treat it as the reference example that "marketing-tier ≠ automatically static." Both render subpaths (@wabbit/tome-blocks-marketing-starter/render/register and the legacy @wabbit/tome-blocks-marketing-starter/render barrel) load under plain Node — each renderer's per-block stylesheet ships precompiled as a JS module — so seed scripts and tests can import them. Keep payload.config.ts on the root entry point (block descriptors + register(), no React): that keeps React out of your config. Between the two render subpaths, prefer @wabbit/tome-blocks-marketing-starter/render/register: it has no import-time side effects.
Compatibility
Required peers:
| payload | react | react-dom | @payloadcms/richtext-lexical |
|---|---|---|---|
| >=3.67.0 | >=19.0.0 | >=19.0.0 | >=3.67.0 |
Block reference
high-impact-hero
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).
- When to use
- 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
- Page types
- landing
- marketing
- about
- How to use
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.
- Pairs with
- feature
- featureHero
- logo-slider
- testimonial
- pricing-plans
- cta
- faq
- Precedes
- feature
- featureHero
- logo-slider
- Avoid when
- Article/post headers — use `article-hero`
- Type-forward or image-dominant premium openers — use `hero-pro`
- Register in
marketing-landing
feature-hero
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.
- When to use
- 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
- Page types
- landing
- marketing
- about
- How to use
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.
- Pairs with
- hero
- logo-slider
- testimonial
- pricing-plans
- cta
- faq
- Follows
- hero
- Precedes
- testimonial
- pricing-plans
- cta
- Avoid when
- A single image-led statement (use `hero` / `hero-pro`)
- Long-form editorial prose (use the editorial blocks)
- Register in
marketing-landing
cta
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.
- When to use
- 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)
- Page types
- landing
- marketing
- pricing
- about
- How to use
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.
- Pairs with
- hero
- featureHero
- pricing-plans
- testimonial
- faq
- logo-slider
- Follows
- featureHero
- pricing-plans
- testimonial
- faq
- Avoid when
- 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 in
marketing-landing
logo-slider
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.
- When to use
- 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
- Page types
- landing
- marketing
- about
- portfolio
- How to use
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.
- Pairs with
- hero
- featureHero
- testimonial
- cta
- pricing-plans
- Follows
- hero
- Precedes
- featureHero
- testimonial
- Avoid when
- 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 in
marketing-landing
pricing-plans
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.
- When to use
- 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
- Page types
- pricing
- landing
- marketing
- How to use
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.
- Pairs with
- hero
- featureHero
- faq
- cta
- testimonial
- logo-slider
- Follows
- featureHero
- testimonial
- Precedes
- faq
- cta
- Avoid when
- 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 in
marketing-landing
testimonial
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.
- When to use
- 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)
- Page types
- landing
- marketing
- about
- editorial-article
- How to use
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.
- Pairs with
- hero
- featureHero
- logo-slider
- pricing-plans
- cta
- faq
- Follows
- featureHero
- logo-slider
- pricing-plans
- Precedes
- cta
- Avoid when
- 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 in
marketing-landing
faq
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.
- When to use
- 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
- Page types
- faq
- landing
- pricing
- marketing
- docs
- How to use
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.
- Pairs with
- pricing-plans
- featureHero
- cta
- hero
- testimonial
- Follows
- pricing-plans
- featureHero
- Precedes
- cta
- Avoid when
- 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 in
marketing-landing
banner
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.
- When to use
- 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)
- Page types
- landing
- marketing
- editorial-article
- blog
- docs
- How to use
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.
- Pairs with
- hero
- cta
- pricing-plans
- faq
- Precedes
- hero
- Avoid when
- 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 in
marketing-landing
exhibit
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.
- When to use
- 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
- Page types
- landing
- marketing
- portfolio
- How to use
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.
- Pairs with
- feature-hero
- testimonial
- cta
- pricing-plans
- Follows
- feature-hero
- pricing-plans
- Precedes
- cta
- Avoid when
- 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 in
marketing-landing
stop-viewer
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.
- When to use
- 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
- Page types
- landing
- marketing
- about
- How to use
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.
- Pairs with
- section-header
- switch-tally
- proof-ledger
- cta
- Follows
- section-header
- Precedes
- switch-tally
- cta
- Avoid when
- 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 in
marketing-landing
switch-tally
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.
- When to use
- 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
- Page types
- landing
- marketing
- pricing
- How to use
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.
- Pairs with
- stop-viewer
- pricing-plans
- cta
- faq
- Follows
- stop-viewer
- pricing-plans
- Precedes
- faq
- cta
- Avoid when
- 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 in
marketing-landing
proof-ledger
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.
- When to use
- 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
- Page types
- landing
- marketing
- about
- How to use
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.
- Pairs with
- stop-viewer
- switch-tally
- cta
- Follows
- switch-tally
- stop-viewer
- Precedes
- cta
- Avoid when
- 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 in
marketing-landing
terminal-steps
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.
- When to use
- 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
- Page types
- landing
- marketing
- about
- docs
- How to use
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.
- Pairs with
- section-header
- layer-stack
- term-rows
- cta
- Follows
- section-header
- Precedes
- layer-stack
- cta
- Avoid when
- 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 in
marketing-landing
layer-stack
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.
- When to use
- 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
- Page types
- about
- docs
- marketing
- landing
- How to use
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.
- Pairs with
- terminal-steps
- term-rows
- section-header
- Follows
- terminal-steps
- Precedes
- term-rows
- Avoid when
- 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 in
marketing-landing
term-rows
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.
- When to use
- 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
- Page types
- about
- landing
- marketing
- docs
- How to use
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.
- Pairs with
- layer-stack
- terminal-steps
- cta
- Follows
- layer-stack
- Precedes
- cta
- Avoid when
- 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 in
marketing-landing
slat-deck
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.
- When to use
- 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
- Page types
- landing
- marketing
- about
- How to use
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.
- Pairs with
- high-impact-hero
- faq
- cta
- Follows
- high-impact-hero
- Precedes
- faq
- cta
- Avoid when
- 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 in
marketing-landing
Exports
| Import path |
|---|
@wabbit/tome-blocks-marketing-starter |
@wabbit/tome-blocks-marketing-starter/render |
@wabbit/tome-blocks-marketing-starter/render/register |
@wabbit/tome-blocks-marketing-starter/demo |
@wabbit/tome-blocks-marketing-starter/meta |
@wabbit/tome-blocks-marketing-starter/blocks/banner |
@wabbit/tome-blocks-marketing-starter/blocks/cta |
@wabbit/tome-blocks-marketing-starter/blocks/exhibit |
@wabbit/tome-blocks-marketing-starter/blocks/faq |
@wabbit/tome-blocks-marketing-starter/blocks/feature-hero |
@wabbit/tome-blocks-marketing-starter/blocks/high-impact-hero |
@wabbit/tome-blocks-marketing-starter/blocks/layer-stack |
@wabbit/tome-blocks-marketing-starter/blocks/logo-slider |
@wabbit/tome-blocks-marketing-starter/blocks/pricing |
@wabbit/tome-blocks-marketing-starter/blocks/proof-ledger |
@wabbit/tome-blocks-marketing-starter/blocks/slat-deck |
@wabbit/tome-blocks-marketing-starter/blocks/stop-viewer |
@wabbit/tome-blocks-marketing-starter/blocks/switch-tally |
@wabbit/tome-blocks-marketing-starter/blocks/term-rows |
@wabbit/tome-blocks-marketing-starter/blocks/terminal-steps |
@wabbit/tome-blocks-marketing-starter/blocks/testimonial |
Changelog
0.50.xMinor
The
splithero takes an optional choice group, and a newslat-deckblock shows two to seven photo slats that widen on hover, focus or tap.The hero's
choicegroup is a question and two to six choices, each with a label, one answering sentence and one action link. It renders as afieldsetof radios and switches with CSS only, so it needs no script; a hero with no choices renders as before.The
slat-deckblock (Payload slugslatDeck, config subpath./blocks/slat-deck) opens one slat at a time, stacks below 768px and removes its transitions under reduced motion. A name over 24 characters needs a short name so a collapsed slat never clips it.Both ship neutral
data-*theme hooks, listed in the package README.
1 fix (0.50.1)
- 0.50.1
Hero copy stays light over a background image in dark themes, and CTA headings, FAQ answers and hero/CTA buttons now size and measure correctly.
- High Impact Hero: with a background image, the text, plate and scrim use the theme-fixed dark pair instead of flipping with the theme;
--hi-bg-behindand--tome-hero-scrimstill override. - Demo props now pass the block's own schema (
backgroundTypeiscolororimage; background colors are real CSS values). - CTA: a heading in the rich text renders at heading size.
- FAQ: answers are capped at a 65ch reading measure.
- Hero and CTA link buttons meet a 44px tap target.
- Terminal Steps and Proof Ledger headings use
--tome-type-size-hero(and the ledger's second heading--tome-text-h2), so a band heading never outgrows the hero heading.
- High Impact Hero: with a background image, the text, plate and scrim use the theme-fixed dark pair instead of flipping with the theme;
0.49.xMinor
Six new free blocks for a product home page and an about page (stop viewer, switch tally, proof ledger, terminal steps, layer stack, term rows) and a Command Close variant of the call to action.
Additive: stored documents and the existing blocks and variants render the same markup. Each new block ships a demo and a gallery entry, and none needs a paid pack.
stop-viewer: a rail of stops beside one framed picture, with a site/admin toggle (hidden for a stop with no admin picture), a route bar, a description, a command or a note, and an open button. The picture links to the stop's page. Every stop is in the server HTML and the first is selected, so it reads and indexes without JavaScript; the rail and toggle are plain buttons witharia-pressed.switch-tally: switches for add-ons with a running total and the exact install line, each package printed once. The currency, the period, the command prefix, every price and every label are fields; nothing is priced in code. The whole switch row is one 44px button withrole="switch", and on narrow screens the total stays pinned above the switches.proof-ledger: a heading, promises, a large figure with its caption held together and centered against a window that names each check, and a row of small figures. Every number is stored content.terminal-steps: numbered steps beside a terminal pane whose lines are commands or output. Step bodies take rich text or plain text.layer-stack: rows from the top of a system to its base, each with a label, a body and a tone (accent, neutral, optional with a dashed outline, base inverted).term-rows: rows of a large term beside its reason, as a definition list.ctacommand-close: an inverted closing band with the title at the left and, at the right, a lead, an optional command with a Copy button, a reassurance line, link buttons and a quieter line for a second audience. With no command set, the command area and the Copy button do not render. The new fields (closeTitle,closeLead,closeCommand,closeReassurance,closeDoor,copyLabel,copiedLabel) show only for this variant.
All of it is painted from the page colors (the foreground and background swapped for dark bands, the primary color for the accent band), so it follows the site's palette. Motion respects reduced motion, and the bands show in full when scripting is off.
The package now has three small client modules (
StopViewer.client,SwitchTally.client,CopyCommand.client); the other new renderers are server components.
5 fixes (0.49.2 – 0.49.7)
- 0.49.7
Layer Stack, Term Rows and Proof Ledger take their ground from the theme's muted surface.
They mixed the page ink into the page background, which turned a warm palette gray. They now read
--tome-color-surface-mutedand keep the mix as the fallback for a theme that doesn't set it. - 0.49.6
Code in Terminal Steps, Layer Stack, Switch Tally, Proof Ledger and Command Close stays readable on sites that fill
preandcode.These blocks set a text color but no background, so a host's fill could leave the text unreadable. They now clear it.
- 0.49.4
Admin labels, field descriptions, demo content and messages now use American spellings.
- 0.49.3
Terminal Steps and Proof Ledger now land on the right gallery shelves.
Terminal Steps carried a
codetag that put it among the primitives, beside Spacer and Text Block, and it now sits with content. Proof Ledger matched no shelf and fell into a category of its own, and it now sits with data.Nothing changes on a page: tags only affect how a gallery groups the blocks.
- 0.49.2
Full-width bands on a site with a default column span, and two details the Starter's home page needed.
Stop Viewer, Switch Tally, Proof Ledger, Terminal Steps, Layer Stack and Term Rows gain the optional
columnSpanfield. These blocks are full-width bands, but on a site with a default span such as2 / -2they stopped at the content lines and their text sat against the band's edge, because the field that moves the block's wrapper did not exist.Set
columnSpanto1 / -1. A stored block with no span renders the same markup.The Command Close underlines the links in its door line, which a site link reset could strip.
Proof Ledger sets a run wrapped in backticks in the mono face, in a promise's body and the figure caption, where the backticks used to print.
The section header gains an optional
backgroundColor, whichRenderBlockspaints on the block's wrapper.accent-tintneeds a mapping in the site's block backgrounds.On a painted band the Ruled Split drops its top rule.
0.47.xMinor
testimonial: consent-aware hiding, and an opt-in disclaimer line.A row from a testimonials collection (
tome-local'slocal-testimonials, or any collection with aconsentgroup) whoseconsent.givenisfalseis no longer shown, in single, carousel and quotes-grid; the carousel's dots count only the rows that show, and a block with nothing left to show renders nothing. A row with no consent record, or one with nogivenyet, renders exactly as before, and so do inline entries (the existing golden holds the default markup byte for byte).The stored shape is unchanged.
testimonialBlock.block({ disclaimerLine: true })adds a localizeddisclaimertext field, printed once under the quotes asdata-testimonial-disclaimer. Off (the default), the block's fields are identical; turning it on adds one column, so SQL sites need a migration at that point.
0.45.x
1 fix (0.45.0)
- 0.45.0
BlockStylestakesdedupe={false}so every instance emits its sheet, for a block rendered ahead and chosen on the client.Banner uses it: a layout that renders one alert per tenant and lets the header show the current one no longer gets an unstyled alert when another tenant's alert rendered first. marketing-starter now needs blocks-core 0.45.0 or later.
0.44.xMinor
The banner can now be dismissed by the visitor, and the venue hero takes up to four actions and a photo credit.
Everything is opt-in: a banner or hero you already have renders exactly as before.
- Dismissible banner. Turn on "Visitors can dismiss it" and give the message a short key (for example
closure-2026-11-02). A close button appears, and the visitor's choice is remembered in their own browser only, either for the visit, for 24 hours, or until you change the key. Nothing is sent to a server and no cookie is set. If the browser blocks storage the banner simply shows every time. Change the key and everyone sees the new message. New fields on the banner:dismissible,dismissKey,dismissMemory,dismissLabelandshowUntil(after that time the banner no longer renders, even without the dismiss option). A dismissed banner is hidden before first paint by one small inline script; if your site sets a strict content-security policy, allow that script by hash or nonce (the script is a fixed string exported asBANNER_GUARD_SCRIPTfrom the banner'sdismissmodule), otherwise the banner hides a moment after load instead. With the option off there is no button, no script and no client code in the markup. - Venue hero: up to four actions. The
venuevariant ofhigh-impact-heronow accepts four links instead of two. Every other variant stays at two, enforced on save; stored documents and their admin screens are unchanged. - Venue hero: photo credit. A new optional
venue.mediaCredittext prints a credit on the photo asfigcaption[data-hero-credit], after the image. It needs a photo, and only thevenuevariant shows it. When it is set, the photo wrapper is afigureinstead of adiv; without a credit the markup is unchanged. Themes can restyle the chip with--tome-hero-credit-inkand--tome-hero-credit-bg.
New fields are nullable columns: on a SQL database, regenerate your migration. The banner now ships one small client file (
BannerDismiss.client.tsx), loaded only when the banner is dismissible.- Dismissible banner. Turn on "Visitors can dismiss it" and give the message a short key (for example
The testimonial
quotes-gridlayout marks its first quote for themes.The first quote's
<figure data-testimonial-cell>carriesdata-testimonial-lead, so a theme can set a lead quote. The stat tile never takes it, whatever its position.Other layouts and the other quotes render as before.
The
venuehero photo is the page's LCP image, so it now loads first.The
venuevariant's background photo is asked for withpriorityandfetchPriority="high"(eager, high fetch priority). It wasloading="lazy"with no priority.A media adapter that renders
next/imagemust forwardfetchPriorityitself (next/image 16 does not infer it frompriority). Onlyvenuechanges; the other variants render as before, and the venue golden is unchanged because its stand-in adapter ignores the hint.The
venuephoto wrapper no longer depends on the engine to find its width.[data-hero-media]on thevenuevariant has a stretched height and an image with its own ratio, so WebKit (and every engine at 1024px) could work its width out from the row height and leave the photo narrow. The pack's stylesheet now statesinline-size: 100%on the wrapper, so every theme gets a full-width photo without patching it.CSS only: where the width already resolved to 100% the layout is unchanged, and the markup (the venue golden) is identical.
0.43.x
3 fixes (0.43.1 – 0.43.3)
- 0.43.3
The
pricing-plansdemo cards that linked to/contactnow use the caller'splaceholderHrefor#, like the other cards. - 0.43.2
Gallery and preview demo props no longer invent site paths.
A demo link is now the caller's
placeholderHrefor#, so rendered demos stop emitting real<a href>s to pages that exist on no site. README: subpath and file mentions are written package-qualified (for example@wabbit/tome-x/render) or as code text, so crawlers no longer resolve them as site URLs. - 0.43.1
cta/doors: the closing links ("Talk to us about your platform", "Browse the block library" in the starter) now have a 44px-plus tap target.The underlined link is about 29px tall; a transparent hit area, centered on it and at least 48px tall, extends it without moving the underline or the layout.
0.42.x
1 fix (0.42.1)
- 0.42.1
testimonialnow exposes public part hooks and gives its carousel dots a 44px hit area.New attributes, in every layout:
data-testimonial-quote(the blockquote),-cite(the attribution wrapper),-name,-role,-media(the avatar or portrait wrapper) and, in the carousel,-dotson the pagination nav with-doton each dot button. The attributes are additive and the block's stored-render snapshots were updated for them; removing them gives the previous markup exactly.The dots keep their drawn size and spacing and gain an
::afterhit area, 44px tall and as wide as the dot plus the gap, so neighboring areas tile without overlapping; the gap is exposed as--tome-testimonial-dot-gap(default unchanged), which a theme can widen for full 44×44 targets.
0.39.xMinor
faqcan group its questions, set its closing callout beside them, and change the callout by the hour.Three optional fields, none with a default:
faqs[].group: files a question under a heading. Questions sharing a label are gathered under one<h3 data-faq-group-title>in adata-faq-groupwrapper, in the order the labels first appear; questions with no label form a group of their own. With no group set the list stays flat.calloutPlacement: 'aside': the callout becomes an<aside>card (data-faq-callout-placement="aside") beside the questions as a sticky card from 1024px, and stays under them on phones.calloutTextOpenandcalloutTextClosed: rich-text copies of the callout, markeddata-when-openanddata-when-closedbeside a neutraldata-when-neutralcopy fromcalloutText. The block's stylesheet chooses by<html data-tome-open="true|false">, the attribute chrome writes from the site's hours; with it absent the neutral copy shows, so a site without hours never reads "closed". A side left empty falls back tocalloutText.
Stored documents that set none of the new fields render byte-identical markup (pinned by a golden test).
Purely additive: no peer is added or tightened, no field has a default, and nothing changes for a site that sets none of them.
faqcan show a second link after its callout link.calloutSecondLink { label, url }(optional, no default) renders a quieter text link after the callout link, markeddata-faq-callout-second, for a second destination such as "All parent questions". It shows only with both a label and a link, and ajavascript:,data:orvbscript:link is ignored.The label is localized.
A block that does not set it renders exactly the markup it did before. Purely additive: no peer is added or tightened.
0.38.xMinor
The split
high-impact-herocan turn a supporting image's caption into a chip with an add-to-bag button, and show its proof line as separate facts.BREAKING: the
@wabbit/tome-blocks-corepeer range is now>=0.38.0 <1.0.0, because the chip renders through the newAddToBagadapter. Migration: upgrade@wabbit/tome-blocks-coreto 0.38.0 or later.The new fields add database columns: run your Payload migration and regenerate types.
New optional fields, shown for the split variant only and empty by default, so stored heroes render unchanged:
supportingImages[].shopAction(productslug,href,variantSku,label) andproofLine.segments[]. With ashopActionthe caption becomesfigcaption[data-hero-caption-chip]holding the caption and aspan[data-hero-caption-action]that wraps theAddToBagcontrol (a plain link tohrefuntil a commerce layer registers the real one; the wrapper is empty when there is nothing to link to).Segments render as
span[data-hero-proof-segment]in place of the proof line's text. The chip wraps the caption name instrong[data-hero-caption-name].A new optional split-only
eyebrowLeadtext rendersb[data-hero-eyebrow-lead]before the eyebrow ("Batch 14 · out of the kiln"); empty renders the eyebrow unchanged.The
testimonialblock'squotes-gridlayout gains an opt-in portrait.The new checkbox
showPortraits(shown forquotes-gridonly, off by default) renders a quote's image as a round portrait,div[data-testimonial-portrait], at the start of its attribution, with the name and role beside it; a quote with an image and no name still gets a caption. The portrait is sized by--tome-testimonial-portrait-size.The images were already stored (
entries[].image) but the grid never showed them, so with the option off, unset or false the grid, and every other layout, render exactly as before.
0.37.xMinor
high-impact-herosplitgains a media side, a proof line, a motif plate and theme hooks.mediaSide(start|end, empty reads asend) moves the supporting images before or after the copy. TheproofLinegroup, which onlyquick-askshowed, is now also shown onsplit, as one line under the buttons.An optional
motif(image,alt; alt text required when an image is set) renders as a small plate beside the proof line.splitalso writes neutral hooks for themes:data-hero-media-side,data-hero-copy,data-hero-subheadline,data-hero-media,data-hero-foot,data-hero-proof,data-hero-proof-leadanddata-hero-motif.Every new field is optional with no default; the other variants render byte-identically, and a
splitblock differs from before only by the added data attributes.testimonialgains an optionaltitleLevel(h2|h3, used with the custom section title) andfaqan optionalcalloutAftertext.- `testimonial` `titleLevel`: the custom section title renders as an
h3today. A block that opens its section with no heading above it can settitleLeveltoh2to emit anh2instead. Empty,h3and any other value render theh3the block always rendered, byte for byte. - `faq` `calloutAfter`: a short line (for example "I read every one.") rendered after the callout link as
<span data-faq-callout-after>, inside the callout. Empty or blank renders nothing and the markup is unchanged. - Payload migration: both are new optional fields (a select and a localized text), so Postgres sites that register these blocks should run
payload migrate:createandpayload migrateafter upgrading.
- `testimonial` `titleLevel`: the custom section title renders as an
2 fixes (0.37.1)
- 0.37.1
Block descriptions read as plain descriptions of what each block shows, not developer notes.
53 block and variant descriptions carried package names, "Fully static — no peer required",
data-variant, slots and hydration details. These are what a visitor reads in a block catalog, so each now says in plain words what the block shows and when to use it.The developer facts aren't lost: each one moves into the block's
usage.howToUse(or, where a block has none, a code comment above its description), and the 20 thathowToUsealready covered are simply dropped from the description. CTA'swith-formvariant no longer claims to render lead-capture fields: it says it leaves room for a form the site supplies, which is what it does. - 0.37.1
Feature Hero shows icons instead of their names, and four blocks stay inside a phone-width window.
- Feature Hero: a feature's
iconis a lucide name ("shield-check") or an emoji, but the renderer printed the name as text in the card. It now uses extras' sharedresolveLucideIcon(./render/shared, which extras has exported since 0.28.0), the same resolver extras and catalog-pack blocks use. An unknown name shows no icon, and emoji stay text. The extras map gainsshield-checkandworkflow. - Feature Hero grids: the authored two- and three-column feature grids kept their columns on a phone and ran 380px past the window. Tracks are now
minmax(0, 1fr), and the grids stack below 640px. In a card with its image beside the text, the text drops below the image when it would get less than 10rem, instead of breaking words mid-way or pushing the card wider. - Status Board: the same fix to its card grid. It was 24px past its box at 375px and now stacks below 640px.
- Editorial Colophon: its
3 / 11placement counts the page grid's 16 desktop tracks, so below 1024px it overran into the right gutter. It sits on the content lines there and keeps its desktop placement. - FAQ: Full Width is padded by the page gutter, like Feature Hero's and CTA's Full Width.
- Feature Hero: a feature's
0.36.x
2 fixes (0.36.0 – 0.36.3)
- 0.36.3
Eighteen block layouts no longer run their text to the window edge: content sits on the page grid's content lines.
These blocks placed their content at
1 / -1, which only matched the content column when the host wrapped blocks at2 / -2. On a host that leavesdefaultColumnSpanunset, the text sat at the window edge.Full-bleed bands stay full-bleed, and their content now sits on
content-start / content-end. Affected: editorial-pack's feature walk-strip, message-panel, split-panel (its band now wraps an inner.splitInner) and status-board; extras' bento-section, card-grid, content-pro bento, skill-showcase and section-header statement-hero and ruled-split; marketing-starter's banner with no grid placement, cta door-strip, exhibit gallery-wall, and the Full Width layout of feature-hero and cta.In signal-theme, signal-note's aside-left, aside-right and author-overlay sit on the marginalia tracks at 80rem and wider on the page grid; aside-left used to be pulled past the left window edge.
- 0.36.0
Phone links in the contact, high-impact-hero and local-logistics code now use the shared core
tel:helper, so a site can qualify national numbers to E.164.The exported
toTelHrefhelpers (andresolveContactValueLink,resolveInlineCall) accept an optional{ defaultCallingCode }. The high-impact-hero readsdefaultCallingCodefrom the render context passed toRenderBlocks({ context }); without it, hrefs stay digits-only as before.Requires
@wabbit/tome-core1.22.0 or later as a peer.
0.35.xMinor
BREAKING: these packs now need
@wabbit/tome-blocks-core0.35.0 or later, because they read the wrapper's newdata-block-placementinstead of its inline style text.Migration: upgrade
@wabbit/tome-blocks-coreto 0.35.0 or later alongside these packs. A site that renders its own block wrapper (withdata-tome-block-wrapper) on a span other than1 / -1should adddata-block-placement={blockPlacementFor(span)}to it; a wrapper without the attribute is read as full width.@wabbit/tome-blocks-local-pack: in Safari, the price list's teaser list and the logistics block's content touched the viewport edges once the page had scrolled. Their side padding depended on matching the wrapper'sstyletext, which WebKit rewrites asgrid-column-start/grid-column-endlonghands as soon as the scroll reveal writes to it. The padding rule now readsdata-block-placement. Chromium and Firefox render as before.@wabbit/tome-blocks-house:LaneGriddecides whether to subgrid its block wrapper (full row, content column, or its own tracks for any other span) fromdata-block-placement, so the decision no longer changes in Safari after the scroll reveal runs.@wabbit/tome-blocks-marketing-starter:exhibit's nested block wrappers carrydata-block-placement, matchingRenderBlocks.
0.34.xMinor
testimonial
quotes-gridand faq gain the options a theme needs.- testimonial `quotes-grid`: new optional
eyebrow, a small section label above the section title (<p data-block-eyebrow>); the block had no label field, so a "Client voice" label had nowhere to go. The grid's column count is the token--tome-testimonial-grid-cols(defaults unchanged: 1, 2 from 640px, 3 from 1024px). The stat value supports the*asterisk*accent convention: "9 _in_ 10" renders "in" as<em data-testimonial-stat-unit>, upright and smaller (--tome-testimonial-stat-unit-size, default0.5em). A value with no stars renders as before. - faq: new
calloutStyle(boxby default, orline).linesets the closing "still have a question?" bridge as a plain start-aligned line with a text link and marks itdata-faq-callout-style="line". The bridge and its link carrydata-faq-calloutanddata-faq-callout-link, and the header group and badge carrydata-block-headeranddata-block-eyebrow, so a theme can restyle the badge chip.
- testimonial `quotes-grid`: new optional
Narrow-screen rules that never fired now fire.
These blocks wrote their phone layout as an unnamed
@containerquery, but nothing around them declares a size container (not tome-ui, the blocks core or the starter), so the rules never matched: thehigh-impact-herosplitand default layouts never stacked on phones. Declaring the container on the block root would not work either, because size containment turns asubgridroot into a plain grid and drops the page-grid lines its children sit on.The rules are viewport queries now, at the same breakpoints; the blocks are full-bleed, so the viewport is their width.
@wabbit/tome-blocks-marketing-starter:high-impact-hero(two columns stack to one, large headline sizes step down, at 768px and below).@wabbit/tome-blocks-extras:BlogHero,ChapterHero,CustomHero,ImageHero,LowImpactHero,MediumImpactHero,PageHero,StudyHero,TypographyHero(768px) andSectionHeader(640px).@wabbit/tome-blocks-content-writer:PostHero(768px).@wabbit/tome-blocks-agency-essentials:SplitViewstacks at 768px.
Above those widths nothing changes.
1 fix (0.34.1)
- 0.34.1
Wide layouts start at 768px again, and the FAQ and the team-roster
peoplevariant keep their inner lines on the page grid.- 768px is the wide layout. The narrow-screen viewport queries added in the previous release were inclusive (
max-width: 768px), so at exactly 768px these blocks stacked although the platform's other queries and the designs start the wide layout there. They now end just below the breakpoint (max-width: 767.98px; 639.98px forSectionHeader):high-impact-hero(marketing-starter);BlogHero,ChapterHero,CustomHero,ImageHero,LowImpactHero,MediumImpactHero,PageHero,StudyHero,TypographyHeroandSectionHeader(extras);PostHero(content-writer);SplitView(agency-essentials). Each pack's test fails a converted query that includes its breakpoint. - Subgrid column gaps. The
faqroot and the team-rosterpeoplesection are subgrids of the page grid, but each also set a column gap (the FAQ through itsgapshorthand, the people section through the shared rostergap). The page grid has no column gap, so every line inside them moved by half the gap: a theme's FAQ list onreading-startstarted 9px inside the reading column, and the people header and grid 9px inside the content lane. Both now set a row gap only (column-gap: normal, the parent's gap on a subgrid).
- 768px is the wide layout. The narrow-screen viewport queries added in the previous release were inclusive (
0.33.xMinor
New
venuevariant forhigh-impact-heroand newreservevariant forcontact, for places people visit.- `high-impact-hero` `venue`: the venue name set very large, with a meta line, one line and one action. The background photo sits either behind the copy, over a theme-set scrim (
--tome-hero-scrim), or full width above it. It is chosen by the new optionalvenue.mediaPlacementfield (behind, the default when empty, orabove). Hooks:data-hero-media-placement,data-hero-scrim,data-hero-meta,data-hero-nameanddata-hero-line, plus the existingdata-hero-mediaanddata-hero-actions. - `contact` `reserve`: a dark booking band that links out to the venue's booking provider. It has a GET form for party, date and time (labels
partyLabel,dateLabelandtimeLabel, default "Party", "Date" and "Time"), built from an editor-writtenreserve.urlTemplatewith{party},{date}and{time}tokens, and works without JavaScript when each token is a whole query value. Under the form come labeled sample-time chips (sampleSlots[]andsampleSlotsLabel, never live availability), then an "Or:" row (lead-inaltLabel, default "Or:") with atel:call action andaltActions[](link,call, ororder, which opens the ordering drawer). Every label is optional and localized; empty, it renders the English default. With no provider set, the form hides and the band leads with its actions; contact rows render as a facts row.eyebrowandcallActionare now also shown forreserve. - New subpath `@wabbit/tome-blocks-agency-essentials/reserve`: the band's pure URL helpers, plus
enhanceReserveBands(), an optional, framework-free client enhancement. It fills today's date, keeps the chips in step with the form, and fills templates the GET form cannot carry whole. The renderer stays a server component.
All new fields are optional, variant-gated and have no default value, so existing content renders byte-identical.
- `high-impact-hero` `venue`: the venue name set very large, with a meta line, one line and one action. The background photo sits either behind the copy, over a theme-set scrim (
0.32.xMinor
New optional fields and theme hooks: an inline call link on the split hero, image labels, a quotes-grid testimonial layout, an open-first FAQ, and a stat-strip note.
marketing-starter, `high-impact-hero`: the
splitvariant now showscallAction(label,phone) and renders it as an inlinetel:link after the buttons, for example "or call (555) 010-2030" (data-hero-call). An empty label reads "or call" after buttons and "Call" without them.In every variant that shows supporting images,
supportingImages[]gainslabel, a short tag set over the image such as "Illustrative photo" (data-compliance-label), andcaptionMeta, a smaller second caption line (data-caption-meta). Every variant that renders actions marks its action rowdata-hero-actions(quick-ask already did): the row holding the buttons and the inline call onsplit, otherwise the button row itself.The attribute is the only markup change.
marketing-starter, `testimonial`: each entry gains an optional
complianceLabel, shown with its quote in every layout (data-compliance-label). Thelayoutselect addsquotes-grid: every testimonial becomes a short quote in a responsive grid, with an optionalstattile (value,text,label,position) placed at its 1-based cell among the quotes, default 2.Hooks:
data-testimonial-layout="quotes-grid",data-testimonial-cellon every cell,data-testimonial-staton the tile,data-testimonial-stat-valueon its value.marketing-starter, `faq`: an
openFirstcheckbox (default off) renders the first question open and marks the root withdata-faq-open-first. Every FAQ now carries part hooks:data-faq-itemon each<details>,data-faq-questionon its<summary>, anddata-faq-answeron a new plain<div>around each answer (the answer's own element comes from your rich-text adapter, which accepts only a class name).proposal-pack, `proposal-stat-strip`: an optional
noterenders a source or compliance line under the figures (data-stat-note), with the same tokens as the stats. When the section header does not show, the root now carriesdata-stat-strip-headless; nothing renders in the header's place, so no gap is left above the figures.Every new field is optional, and the rendered markup is unchanged while they are empty; the additions to existing output are the FAQ part-hook attributes, the unstyled answer wrapper, the
data-hero-actionsattribute on hero action rows, and thedata-stat-strip-headlessattribute on stat strips that already had no header. The new fields add columns, so run your Payload migration and regenerate types.extras: the shared
HeroLinkListaccepts an optionalcontainerData(extradata-*attributes for its row element). Omitted, the row renders exactly as before.
0.31.xMinor
Groundwork v1.1 block fields for the quick-ask hero and the estimate contact band.
`high-impact-hero` `quick-ask`:
proofLinegains an optionalproofLeadtext field, rendered as a<strong data-hero-proof-lead>before the proof text (for example "Next opening:"). Fixed: at phone widths the status dot could wrap onto its own line away from its text.The proof line is now inline flow, and the dot shares a no-wrap run (
data-hero-proof-start) with its first phrase: the lead, or the first word of the text. The rest of the line wraps normally.With no lead and no dot, the markup is unchanged.
`contact` `estimate`: two optional text fields.
eyebrowis a small meta-voice kicker above the heading (data-contact-eyebrow).formNoteis a short meta line beside the form card heading (data-contact-form-note). When it is set, the heading and note share a wrapping head row (data-contact-card-head).When both fields are empty, the output is unchanged.
Payload-free
./metaentries now match what each pack registers, and@wabbit/tome-dispatch,@wabbit/tome-longformand@wabbit/tome-readoutadd a./demoentry../demo(dispatch, longform, readout): the root barrel's demo props (getDemoProps, the per-block getters,DemoContext) on their own subpath, with no Payload import, so a client bundle such as a block gallery can use them without pulling in the block configs. Additive; the root barrel still exports them.These packages ship raw Payload
Blockconfigs rather thandefineBlockdescriptors, so they have no./metaentry../meta(extras, signal-theme): newextrasDeprecatedBlockMetaandsignalThemeDeprecatedBlockMetalists describe the 16 deprecated blocks each pack still registers for stored content but no longer offers.extrasBlockMetaandsignalThemeBlockMetaare unchanged: they still list only the offered blocks.The deprecated signal-theme blocks' metadata moved from inline
defineBlockarguments into payload-free<block>.meta.tsfiles; the registered descriptors are unchanged../meta(extras, marketing-starter): six motion blocks (image-marquee,marquee,showcase,logo-slider,pricing-plans,testimonial) now declarerequiredCapabilities: ['motion']in their metadata.defineBlockalready added it at registration, so the registered descriptors are unchanged, but the./metaentries lacked it and a gallery reading them could not tell these blocks need a motion provider.
0.30.xMinor
BREAKING: the
high-impact-heroquick-askcall action now shows on phones only, unless the newcallAction.showOnDesktopcheckbox is ticked.Migration: to keep the call action on screens 768px and wider, tick Show on desktop on the hero's Call Action (or set
callAction.showOnDesktop: true). Phones are unchanged: the call still leads the actions there.The call link carries
data-hero-call-desktop="true|false"so a theme can tell the two apart.
0.29.xMinor
High Impact Hero gains a
quick-askvariant: text left, media right, with a one-question form, a tap-to-call action and a proof line.Additive: the three new groups are optional, carry no defaults and appear in the admin only when
quick-askis selected, so existing heroes render as before. Adding the fields to a Payload config adds their columns, so run your usual migration.- `quickAsk` (
label,options[]oflabel+value,submitLabel,action,paramName). Renders a plain GET form with a visible label and a real<select>, so it works without JavaScript. The selected value is sent as?<paramName>=<value>(defaultneed) to the action, a URL or#anchor(default#contact); params already in the action are kept as hidden inputs. - `callAction` (
label,phone). Atel:link. It is the first action on phones (below 768px) and follows the form on wider screens. - `proofLine` (
text,showDot). One short line under the actions, with an optional status dot. - The job caption reuses
supportingImages[].caption. - Theme hooks:
data-block-variant="quick-ask",data-hero-actions,data-hero-call,data-hero-quick-ask,data-hero-proof,data-status-dot,data-hero-media,data-hero-caption. Every hero variant root now also carriesdata-block-variant.
- `quickAsk` (
0.28.x
3 fixes (0.28.0 – 0.28.5)
- 0.28.5
Published packages now contain compiled JavaScript and type declarations under a one-line license banner, and no longer include source maps.
What you install: one compiled
.js(ESM) and.cjs(CommonJS) file per source module, its.d.ts/.d.ctsdeclarations, and the stylesheets, fonts and other assets a package already shipped. Every JavaScript module opens with a comment naming the package and its license:/*! @wabbit/<package> — © Wabbit, LLC. Wabbit Tome Commercial License (see LICENSE.md). Not for redistribution. */.The
.mapfiles and thesourceMappingURLcomments that pointed at them are gone, which roughly halves the size of each tarball.Debugging: the code is still unbundled and unminified, one readable file per module, so a stack trace points at real code with real names. Line numbers in a stack trace are one higher than before, because of the banner line.
A
'use client'directive stays the first statement of its module (the banner is a comment above it), so React Server Component boundaries are unchanged.No API change, no runtime behavior change, and nothing to do on upgrade.
In
@wabbit/tome-blocks-gallery, the source snapshotsextractGallerySourcewrites from an installed pack leave out the license banner line, so a component or config snapshot starts at the code and a paid block's preview shows its first 15 lines of real code. - 0.28.0
The marketing starter's preview data now uses invented brand and client names throughout.
Hero, pricing, logo and testimonial previews swap two brand names for fictional ones. Block fields and variants are unchanged.
- 0.28.0
The logo slider and the high-impact hero's marquee strip can now be paused by hover, keyboard focus, touch tap and a pause button that appears on keyboard focus.
On the logo slider, hovering or focusing a logo link or tapping the band pauses the scroll, and the pause button comes before the logo links in tab order. On the hero, the marquee strip gets the same pause button and pause behavior.
Under
prefers-reduced-motion: reduceneither moves. Needs@wabbit/tome-blocks-extraswith theMotionPauseControlexport.
0.27.xMinor
The pricing and testimonial blocks work without collections of their own: by default their cards and testimonials are entered on the block.
Pricing. The block used to relate to a
product-cardscollection, which a site that only installed this pack doesn't have, so Payload refused to start once the block was registered. With noproductCardsCollectionoption, the block now has two card lists (subscriptionCards,projectCards) with the fields the cards render: title, description, tier, badge, price, frequency, a custom-quote switch, features, and button text and link.Passing
productCardsCollectionkeeps the relationship fields (selectedSubscriptionCards,selectedProjectCards) exactly as before. The renderer reads either.Testimonial. The block used to relate to a
testimonialscollection, with the same startup failure on a site without one. With notestimonialsCollectionoption it now has anentrieslist (quote, name, role, company, image, date): single mode shows the first, carousel shows them all.Passing
testimonialsCollectionkeeps thetestimonial/testimonialsrelationships exactly as before.BREAKING: a site that used either block with its old default must now pass the collection to keep its schema and stored data:
productCardsCollection: 'product-cards'for pricing,testimonialsCollection: 'testimonials'for testimonial.The pack works on a stock Next.js site: its per-block stylesheets now ship precompiled, so the site needs no next.config plugin.
Each renderer's
.tome-cssstylesheet is compiled when the pack is built, into a JS module next to it (<Name>.tome-css.js/.cjs), and the renderers import that. A site no longer has to wrap next.config withwithTomeBlockStylesto use the pack, and./renderand./render/registernow load under plain Node, so seed scripts, tests and the Payload CLI can import them.Each block's CSS is still inlined only on pages that render the block. A site that already uses
withTomeBlockStylesneeds no change.Scoped class names change once, because they are now keyed on the package rather than on where it is installed. The raw
.tome-cssfiles stay in the package as readable source.
0.24.xMinor
Breaking: block stylesheets are now per-block (`.tome-css`). Each block's CSS ships only on pages that render it, instead of in every page's CSS bundle.
The 10 stylesheets moved from
X.module.csstoX.tome-css, and each renderer renders<BlockStyles sheet={styles} />from@wabbit/tome-blocks-core/block-styles.Required in the consuming site: wrap next.config with
withTomeBlockStyles(@wabbit/tome-blocks-core/next, blocks-core 0.22.0 or later); without it the.tome-cssimports fail to build. See the blocks-core README, "Per-block stylesheets".- The
@wabbit/tome-blocks-corepeer range is now>=0.22.0 <1.0.0. - FeatureHero, HighImpactHero, LogoSlider, PricingPlans and Testimonial (client components) are now server-safe wrappers (
X.tsx) aroundX.client.tsx; PricingPlanCard imports PricingPlans' stylesheet for class names. Exported names and props are unchanged. - Block CSS now loads after all bundled CSS. A site-level rule that overrode one of this pack's classes at equal specificity, and won only by loading later, no longer wins.
- The
0.20.x
1 fix (0.20.1)
- 0.20.1
Fixes a badge/eyebrow overlap on narrow cards and two layout/contrast issues in the marketing-starter CTA and exhibit blocks.
@wabbit/tome-blocks-catalog-pack: thefeatured-productblock's badge no longer overlaps the eyebrow text on narrow cards — below roughly 30rem of available width it drops out of its absolute-positioned corner and flows in-line above the eyebrow as a chip instead.@wabbit/tome-blocks-marketing-starter: thectablock'sdoorsvariant fixes a low-contrast underline on its "toolkit"-voice link, which was drawing its border from a surface-tint accent color instead of the paired text-safe accent token. Theexhibitblock'sgallery-wallvariant increases the vertical gap between its staggered plates at desktop widths so they no longer visually touch, and now centers the third plate on the grid when a wall has exactly three exhibits instead of leaving it flush left.
0.18.x
6 fixes (0.18.0 – 0.18.3)
- 0.18.3
CSS files are now copied to
dist/by a post-build script instead of a tsuponSuccesshook; no behavior change, and the publisheddist/is identical. - 0.18.3
The pricing block's catalog slug is now
pricing-plans, so gallery and inserter URLs keyed onpricingchange topricing-plans.The render registry turns kebab slugs into camelCase, so
pricing-plansnow resolves to the Payload blockpricingPlanswithout an alias. Stored content is untouched:blockTypestayspricingPlans, and the./blocks/pricingsubpath export keeps its name.getDemoPropsanswers bothpricing-plansandpricing. Update any hard-coded/blocks/.../pricinglinks, and everypairsWith/sequencereference inside the pack now namespricing-plans. - 0.18.3
logo-slider's Static Grid variant now renders a still, wrapping grid of logos, and Marquee Editorial now scrolls slower, wider and muted.Before, both variants rendered the default marquee and only set
data-variant. Static Grid mounts no marquee.Logo Size keeps its marquee heights, Logo Spacing becomes the gap, and a logo with a URL is a real link. Marquee Editorial runs at half the Scroll Speed with 1.5× the Logo Spacing, at 60% opacity.
Documents already on these variants change appearance to match their labels. That is a fix, and no consumer action is needed, so this is a patch.
The
cta,faq,high-impact-hero,exhibitandlogo-sliderdescriptions now say which variants aredata-varianthooks for site or theme CSS, matchingbannerandfeature-hero. - 0.18.1
Internal refactor: collection slugs are now typed through one package-internal helper instead of inline casts scattered across the source.
No API or behavior change.
- 0.18.1
bannerandfeature-herodescriptions now say what their variants actually do.The variants set
data-variantfor site or theme CSS; the inlinestyle/variantselects still pick the alert color and layout, and stay because stored documents carry them. - 0.18.0
register()is now built with blocks-core'screatePackRegistrar.Behavior and signature are unchanged. The
@wabbit/tome-blocks-corepeer floor goes up to>=0.18.0because that is the first version exporting the helper.
0.17.xMinor
Tome block packs now install into an existing Payload project the way the README says: one
npm install, one CSS import, no undocumented steps.Proven by the new fresh-install smoke test (
scripts/blocks-fresh-install-smoke.mjs) against a brand-newcreate-payload-appwebsite-template site.Consumers: list `@wabbit/tome-blocks-core` and `@wabbit/tome-ui` in your own `package.json` if you import from them (npm 7+ and pnpm install required peers automatically, so a fresh
npm installof a pack already brings them in).- One shared `blocks-core` per site. Every pack,
blocks-houseandblocks-extrasnow declare@wabbit/tome-blocks-core(and, where used,-house/-extras) as a required peer with an explicit range instead of a regular dependency, so a site gets exactly one hoisted copy and one adapter registry. - No more ERESOLVE in plain Payload sites.
blocks-coreno longer declares@wabbit/tome-coreor@wabbit/tome-catalog(their optional peer graph pulledbetter-auth→@sveltejs/kit→vite@8against a site'svite@7). Theblock-bundleproduct type still auto-registers when both are installed; new structural typesBlockBundleProductTypeDeps,BlockBundleProductTypeRegistryLike,RegisterProductTypeHooksLike. - Tokens in one line:
@import '@wabbit/tome-blocks-core/styles.css';(new export; imports@wabbit/tome-ui/tokens).@wabbit/tome-uiis now a required peer ofblocks-core. - Rich text and images render with no adapter setup. Built-in defaults render Lexical through
@payloadcms/richtext-lexical/reactand resolve populated Payload uploads; an unpopulated upload id warns once in every environment (previously content vanished silently in production). Registered adapters still win. - Payload's spread-props convention: new
adaptRenderersForPayload(renderers)/adaptRendererForPayload(Component)wrap any pack'srenderersmap for a site that renders<Block {...block} />. - Slug collisions with Payload's templates (
cta,banner,archive,content,code): newapplyBlockSlugOverrides(blocks, overrides)andremapRendererSlugs(renderers, overrides)(@wabbit/tome-blocks-core/slugOverrides). Defaults are unchanged; no stored data migrates. - `blocks-house` owns
gsapandhls.jsas dependencies (previously optional peers that still broke the build when missing), and registers GSAP'sScrollTriggeritself before first use. - Full-bleed bands actually span the grid. Eight
pinnedBandblocks (cinema-pack AmbientBand, MediaPanel, PullInterlude, SceneCaption, ScenePlate, ScrubStory, StatementBand; blocks-house FullBleedInterstitial) now declaregrid-column: 1 / -1at their root as the contract requires. Visible change: inside a tome-ui.grid, these render edge to edge where they were previously squeezed to content width. - `@wabbit/tome-ui`:
.griddeclaresreading-start/reading-endbelow 768px (aliased to the content column), so blocks placed on the reading column no longer collapse to a sliver on phones. - Every pack README gains an "Install into an existing Payload project" section and a peer table that matches
package.json;blocks-core's README carries the full walkthrough.
- One shared `blocks-core` per site. Every pack,
0.16.xMinor
Raise the
react/react-dompeer floor to>=19.0.0across the linked blocks family.Every pack advertised
react: >=18.0.0while@wabbit/tome-core,chrome,forms,dispatch,longformandreadoutall require>=19— so the React 18 support the packs claimed was unreachable in any real Tome stack: no consumer could satisfy both halves of the graph. The advertised range was not a supported configuration, it was a range nobody could install into.Ruled 2026-09-01: the floor becomes the truth.
Their
devDependenciessaid the same thing from the other direction:reactand@types/reactpinned to^18.0.0while the rootpnpm.overrideshas pinned@types/reactto19.2.14for months, so every pack has in fact been developed and tested against React 19 types the whole time. Those pins move to^19.0.0— a manifest correction, not a version change; the resolved tree is byte-identical.One coordinated bump for the family (these eleven are
linkedin.changeset/config.json, so they version together by design).Consumer impact: a consumer genuinely on React 18 can no longer install these packs. That consumer could not have had a working Tome install anyway — the kernel would have refused the same graph.
Anyone on React 19 sees no change.
dist now raw-Node loadable: relative specifiers get explicit extensions post-build.
buildgains&& node ../../scripts/fix-dist-extensions.mjs --strictas its last step, joining the 13 packages that already ran it. tsup buildsbundle: falseand emits relative specifiers exactly as the TypeScript source wrote them — extensionless — which bundlers resolve and raw Node does not (ESMERR_MODULE_NOT_FOUND; CJS worse,require('./x')finds the ESM.jstwin and Node 22+require(esm)then dies on that file's own extensionless import). Every consumer outside a bundler hit this: the payload CLI under plain node,generate:types,generate:importmap, ops scripts, codegen tools.No source changes, no API changes, and bundler consumers are unaffected — extensioned relative specifiers are universally resolvable.
Two supporting changes made the wiring possible, both in repo scripts rather than package source.
fix-dist-extensions.mjsnow skips bundler-asset specifiers (.css,.module.css,.scss, fonts, images, shaders) by explicit extension allowlist instead of reporting them as unresolvable — that single gap is why the 13 prior adopters were exactly the 13 packages that ship no CSS, since--strictexited 1 on any package with a relative stylesheet import.Dotted MODULE names (
./config.meta,./x.variants,./y.demo) are deliberately NOT treated as assets and still get.js/.cjsappended.assert-node-loadable.mjsgained the matching carve-outs so the new repo-wide CI gate reports real defects only: a resolution failure whose path lands undernode_modulesis a peer SKIP (next@15 has no exports map, sonext/imagefails as an absolute path), and a bundler-asset load failure is an environmental SKIP (CJS surfaces it asSyntaxError: Unexpected token '.'raised from inside the stylesheet).Verified before/after on four packages built one at a time: print 8 FAIL → 0, readout 22 FAIL → 0, ai 3 FAIL → 0, gamification 2 FAIL → 0 (its failure was the other signature — a
directory importmissing/index). cop was already clean on a fresh build, so the audit's "27 of 46 fail" figure includes at least one package whose local dist was merely stale.Manifest metadata:
homepage,bugs,engines.All 46 publishable manifests were missing the three fields a consumer sees before any code (2026-09-01 sale-readiness audit §6). Metadata only — no source, no build, no runtime change.
homepagedeep-links to that package README on GitHub (.../tree/main/packages/<dir>#readme). Without it a registry page links to the monorepo root and the reader has to guess which of 46 folders they want.bugs.urlpoints at the repo issue tracker, so a paying customer has a place to report a defect that is not email.engines.nodeis>=22, matching the rootenginesand.nvmrcset the same day. This is a real floor, not decoration: CI on Node 20 could not expand the glob the block packs use fornode --test, and a package installed on Node 20 fails at a runtime the installer cannot connect back to the version.
The forcing function ships with the change:
scripts/assert-manifest-metadata.mjs(rootpnpm assert:manifest-metadata, wired intoplatform-discipline.ymlbesideassert:license-metadata) fails when any publishable manifest lacksdescription,repository.directorymatching its own folder,homepage,bugs,engines.nodeequal to the repo floor,license,filesorsideEffects. It reported 138 violations before this change and 0 after.Fix a hydration mismatch in
Testimonialand adopt the shared UTC-pinned date formatter across five renderers.@wabbit/tome-blocks-marketing-starter'sTestimonialis a'use client'component and rendered its publication date with a barenew Date(iso).toLocaleDateString(). That resolves against the RUNTIME locale and the RUNTIME time zone, so the server produced one string and the browser produced another and React reported a hydration mismatch on the block.The 2026-07-11 audit flagged it; it was still there on 2026-09-01.
The same bare call sat in four server renderers —
blocks-editorial-pack'sMetricStripandStatusBoard,blocks-agency-essentials'TeamRoster(twice) andTimeline. No hydration mismatch there, but the rendered output changed with the deploy host's locale and offset, which is its own kind of wrong.All six call sites now use
formatDisplayDatefrom@wabbit/tome-blocks-core/utilities/formatDisplayDatewith an explicitlocale: 'en-US', a numericM/D/YYYYdateStyleandtimeZone: 'UTC'. The numeric shape is deliberate: it is byte-identical to what a US-locale runtime already produced, so this fixes the determinism without silently restyling anyone's dates.Every pack already declared
@wabbit/tome-blocks-core, so no dependency changes.Shipped with its forcing function: a
no-restricted-syntaxrule ineslint.config.mjswarns on baretoLocaleDateString/toLocaleString/toLocaleTimeStringin everypackages/*/src/**/*.tsxand every block pack'srender/directory, and points atformatDisplayDateand atblocks-gallery'sADDED_AT_FORMATTERas the two accepted shapes.README peer tables, and the gate that now requires them.
Sixteen packages declared
peerDependenciesand documented them nowhere a reader could scan — in prose inside an install paragraph, in a transposed "compatibility matrix" with the peers as columns, or not at all. Docs only; no source, no manifest, no runtime change (the one manifest change in this PR, admin'ssonnerpeer, has its own changeset).Each of the sixteen gains a
## Peer dependenciessection generated from its ownpackage.json—| Peer | Range | Required |, one row per peer, the range verbatim,no (optional)read frompeerDependenciesMeta, plus one sentence on what is a realdependencyrather than a peer and why the optional ones are optional. The worst omissions this surfaced:@wabbit/tome-coredocumented 2 of its 13 peers and left out bothnextand@payloadcms/richtext-lexical, which are required;@wabbit/tome-adminlisted 5 of 20;@wabbit/tome-readoutand@wabbit/tome-sclisted none.Eight block packs carried a hand-typed compatibility table that had drifted a full React major — still
>=18after the peer floor moved to>=19.0.0— and none of the eight listedreact-domat all. Those tables are retired in favor of the generated one, with a line saying what they used to claim so the next reader does not reinstate them.The forcing function ships with the fix:
scripts/assert-readme-contract.mjsnow FAILS a package that declares peers without a peer table (a markdown table whose header row names a Peer and a Range column — the existingOptional?andNotesthird columns still pass, so the thirty already-conforming READMEs were not touched). It is deliberately shape-only, not row-level: asserting that each row agrees with the manifest is the Tier 2 generation work.Verified non-vacuous by breaking one table's header and watching the gate fail, then restoring it.
CONTRIBUTING.md's assert-script list — which said "five" while sixteen existed — and the three guides that describe this gate were corrected in the same pass.Updated dependencies [57875ba]
Updated dependencies [b01ca1f]
Updated dependencies [0836ef5]
Updated dependencies [73081e6]
Updated dependencies [090e984]
Updated dependencies [73081e6]
- @wabbit/tome-blocks-core@0.16.0
- @wabbit/tome-blocks-extras@0.16.0
0.15.xMinor
Route pack block links through the
LinkAdapterinstead of raw<a href>.LinkAdapter(0.14.0) shipped the seam; this connects it. 67 anchors across 55 renderer files in 10 packs now render through<TomeLink>, so a consuming site that registers a link adapter gets its route transition on pack blocks — previously impossible by construction, since a pack cannot import the consumer's transition component and the consumer cannot reach into a pack's render tree.New in `@wabbit/tome-blocks-core`: `<TomeLink>`, a component form of
resolveLink().resolveRichText()/resolveMedia()are functions because they turn a data value into content; a link _wraps children_, and the function form forces multi-line JSX through achildren:prop.<TomeLink href={…}>…</TomeLink>is a drop-in for the<a>it replaces. It delegates toresolveLink(), so there is exactly one resolution path, and it stays directive-free so RSC pack renderers can use it without becoming client components.`LinkProps.href` is now `string | null | undefined`. Block data routinely carries an optional URL, and the raw
<a href={undefined}>these calls replaced was legal markup. Narrowing it tostringwould have forced ~10 non-null assertions across the packs and changed behavior at each.NOOP_LINK_ADAPTERnormalizes null toundefinedso React omits the attribute — the unregistered path stays byte-identical to the pre-adapter markup.Behavior is unchanged for every consumer that has not registered a link adapter, which is currently all of them:
resolveLinkfalls back to a plain<a>.Deliberately left as raw
<a>:EditorialFootnotes— its#fnref-*anchors are in-page backlinks. Client-routing them would play a page transition for a jump within the same document.PricingPlans/PricingPlanCard— these already accept an injectable anchor component, a more expressive consumer mechanism that predates the adapter.LogoSlider— a self-closing, childlesstarget="_blank"overlay anchor. Always external, so the adapter would hand it straight back to the browser.@wabbit/tome-longform— it has zero runtime dependencies and does not peer onblocks-core. Adding that edge to the layer graph is its own decision, not a sweep side effect.
Updated dependencies [510036f]
- @wabbit/tome-blocks-core@0.15.0
- @wabbit/tome-blocks-extras@0.15.0
7 fixes (0.15.6 – 0.15.12)
- 0.15.12
Republish with correctly-built artifacts, and close the hole that made it necessary.
The 0.15.11 line shipped
defaultBreakoutin its version notes but not in its tarballs: source on main carried all 151 descriptors, the publisheddist/carried zero.pnpm publishdoes not build — it packs whatever is already indist/— so a release ships whatever a previous, possibly unrelated, build left behind.Here the dist had been built from a branch that predated the metadata, and nothing in the pipeline compares artifact to source.
Caught by grepping the _installed_ package in a consumer rather than trusting the version number.
Systemic fix:
prepublishOnly: pnpm run buildadded to all 41 publishable packages that lacked it (onlyblocks-org-packhad one — which is why it was the single package whose build ran during the previous publish). Every publish now rebuilds from source first, so a stale-dist release becomes impossible rather than merely unlikely.Same family as the two publish hazards already documented in this repo (
workspace:*literals reaching the registry, and exact-pin dependencies forcing nested duplicate copies): the publish path had no guard that what ships matches what is committed. - 0.15.12
Updated dependencies [54ff357]
- @wabbit/tome-blocks-extras@0.15.12
- 0.15.11
Populate
BlockMeta.defaultBreakoutacross all nine block packs — 151 descriptors now declare their natural width on the page grid.The 2026-06-28 layout-grid + nesting contract (Decision 3 / Amendment A1) defined
defaultBreakoutas the per-block breakout POLICY co-located with the block, replacing a central hand-maintained table. No pack had ever filled it in, so every consumer fell through to'article'(the reading column) and a full-bleed hero previewed at prose width.Values are drawn from the canonical
@wabbit/tome-uiBreakoutWidthValuevocabulary and assigned from each block's render CSS, not its name:- Root at a named grid line (
content-start / content-end,full-start / full-end,marginalia-right-*, …) —defaultBreakoutmirrors that exact line. - Root
1 / -1+ subgrid with an inner wrapper atcontent-start / content-end— a self-banding block:'full-bleed'. - Root and inner both
1 / -1(width-agnostic) — assigned editorially: bands/heroes'full-bleed', page sections'content', cards and single-column components'breakout-md', prose/inline components'article'. - Where a block already ships its own
breakoutWidthField({ defaultValue }),defaultBreakoutmatches that value exactly rather than contradicting it.
Distribution:
content52,full-bleed41,article33,breakout-md23,breakout-lg1,marginalia-right1.Also declares
pinnedBand: trueon the three blocks that are unambiguously full-bleed bands whose ownbreakoutWidthfield drives INNER content (compareColumns,editorialSection,editorialSpread), andnestable: falseon 22 full-bleed heroes / band primitives / containers that carried nonestabledeclaration.Purely additive optional metadata: no descriptor field, block structure, or CSS changed, and no existing
nestable: truewas flipped, so the derivedlayoutGridchild allowlist is byte-identical (98 nestable blocks before and after). - Root at a named grid line (
- 0.15.11
Fix a systemic, invisible-text readability defect across the block packs: a text color and the surface under it were coming from sources a consumer can set independently, so the pair could split.
Measured live on starter.wabbit.com with a canvas-based contrast parser walking every rendered text node: the worst pairs sat at 1.00–1.03:1 — near-black text on a near-black surface, copy that renders but cannot be read. Nothing in CI could see it, because every unit test and every route smoke passes with perfectly invisible text.
This is the second time this bug family has shipped. The first sweep added
--tome-color-on-solid-dark(blocks-lms-pack 0.12.1) and fixed chrome, lms-pack and catalog-pack; the themed packs were missed.This closes the rest and adds the tokens whose absence is why the misuse kept spreading.
Three mechanisms, one root cause
1. Split pairs. Blocks paired
--tome-color-card— not a house token at all; the house name is--tome-color-surface— carrying a DARK literal fallback, against--tome-color-foreground, which every themed consumer does define, carrying a LIGHT one.A fallback pair is only safe when both sides fall back together. The same shape appeared as cross-family pairing (
surface, the CARD family, paired withforeground, the PAGE family) and as clobbering: a band settingcolor: backgroundon itself while its children hardcoded their owncolor: foreground, which wins. longform had a third variant — it read--tome-color-muted-foreground32 times and--tome-color-muted3 times, and neither has ever been a house token, so the entire muted tier silently fell through tocurrentColorand inherited whatever ink an ancestor happened to have.2. Alpha-dimmed text.
opacity: 0.4–0.9on a label, andcolor-mix(<color> 30–70%, transparent)as acolor:, composite against whatever happens to be behind them, so the ratio is unknowable at author time.Worst measured: 1.46:1. Several were an ancestor
opacityaimed at a rule that dimmed the real text in the same container along with it.3. Status and brand colors used as text.
warning/success/error/destructiveare FILL colors, tuned to be painted as a badge with an ink on top.Used as
color:the default amber measures 2.13:1 and the green 2.82:1. Brand hues have the mirror problem:--tome-color-primaryas text is fine on the page (near-black by default, 5.5:1 even under the starter's oxide theme) but becomes 2.22:1 inside a band whose fill the consumer chooses.New in
@wabbit/tome-ui- `--tome-color-{success,warning,error,destructive,info}-text` — the missing text-weight companions. Literals with inverted
[data-theme="dark"]values, each pinned to clear 4.5:1 against both--tome-color-backgroundand--tome-color-surface.infonever had a fill token either, which is why packs reached forprimary. Rule of thumb:warningpaints a box,warning-textwrites a word. - `--muted-foreground` retuned (
hsl(215 16% 47%)→hsl(215 20% 38%)light,65%→72%dark). That token is--tome-color-on-surface-muted, the tier every pack uses for captions, labels, metadata and table headers, and at the old value it reached only 4.27:1 on--card. The entire secondary text tier platform-wide sat just under AA — which is also why packs kept reaching past it for something with more presence. Standalone default only.
Because these are literals rather than Layer 1 aliases,
@wabbit/tome-coprestates them: a pack that is dark without being[data-theme="dark"]would otherwise inherit the light values.Fix shape, per pack
dispatch, readout, blocks-signal-theme are permanently dark by product identity. Each owns a pack-scoped surface/ink SET (
--dispatch-*,--readout-*,--signal-*) with internally consistent dark defaults compiled into every block module as inline fallbacks.No rule in these packs reads a house surface or text token for a panel, so no consumer theming can split the pair. The house
surface-solid-dark/on-solid-darkpair was rejected here for a stated reason: it is one flat pure-black surface with a single ink, and these packs need a layered palette. tome-cop drives all three sets so its theming still applies. signal-theme's accents split into three roles — identity fill, lightened on-panel text, and per-hue ink for accent fills — because one value cannot serve both a dark panel and a light article.longform, content-writer, editorial-pack, marketing-starter, agency-essentials, extras follow the ambient theme and are fixed with the house vocabulary: correct pairs (
surface/on-surface,background/foreground,primary/on-primary), the new-textweights for status copy, and solid ink steps in place of alpha. Painted bands publish their own ink as a local--_on-band, and brand/status text reads `var(--_on-band, <its normal - `--tome-color-{success,warning,error,destructive,info}-text` — the missing text-weight companions. Literals with inverted
- 0.15.11
Updated dependencies [1bebcdc]
- 0.15.11
Updated dependencies [48773ac]
- @wabbit/tome-blocks-extras@0.15.11
- 0.15.6
Design-wave fixes (2026-08-09 mockup, section 2): exhibit gallery-wall plates now size to their nested content —
align-items: starton the wall grid and nomin-height/flex-fill on the canvas, with generous space-3xl/space-2xl padding — instead of stretching to the row's tallest neighbor and centering a small render in ~50% empty frame.The high-impact-hero
darkvariant demo now suppliesbackgroundColorBehindImage: var(--tome-color-surface-solid-dark)so the gallery preview shows its light text on a dark plate rather than near-white-on-white when the placeholder media is light or unresolved.
0.14.x
1 fix (0.14.0)
- 0.14.0
Updated dependencies
- @wabbit/tome-blocks-core@0.14.0
- @wabbit/tome-blocks-extras@0.14.0
0.13.xMinor
cta:
door-strip+doorsvariants graduated from tome-starter (showcase program Phase 3.7).Adds a
doorsarray field (min/max 2 rows: voice, kicker, heading, body, link) and acolumnSpanfield to the base cta schema — both additive, backward-compatible.door-stripis a compact two-door router (whole-surface links, mono kicker, serif line, arrow affordance);doorsis a full two-door close (kicker, serif heading, body, underlined go-link per door, scroll-reveal via the new@wabbit/tome-blocks-coreRevealhelper — seed withcolumnSpan: '1 / -1'for full bleed).Both are style-only variants: the
doorsfield lives on the base schema behind anadmin.condition, not afieldOverridesschema variant, because per-document schema divergence can't be expressed at config-build time (see comment incta/variants.ts).exhibit: new gallery-wall block graduated from tome-starter (showcase Phase 3.7) — museum plates framing real nested block renders; nested allowlist via factory config (exhibitBlocks).
Ports the starter's
src/blocks/Exhibit/(config.ts, Component.tsx, Component.module.css) into a newexhibitblock: an asymmetric 12-col wall of hairline-framed white canvases, each holding a REAL nested block render (not a screenshot) under a plate caption (title + pack attribution). One style-only variant (gallery-wall), registered via plaindefineBlock(meta, factory, variants)matchingtestimonialBlock's idiom.The nested
blocksallowlist is a factory-config contract — passconfig.exhibitBlocks(an array of PayloadBlockconfigs) when invokingexhibitBlock.block(config)to curate what's exhibitable; omitted, it defaults to this pack's owntestimonialblock so the field is never empty and the pack stays self-contained (no import oflms/catalog/orgpacks). TheExhibitrender component takes an optionalnestedComponentsprop (registry-free resolution map for the nested per-exhibit blocks, checked before the shared@wabbit/tome-blocks-corerender registry) and replicatesRenderBlocks' per-block subgrid wrapper (data-tome-block-wrapper,data-block-background,gridColumn/gridTemplateColumns: subgrid) by hand around eachRenderBlockcall for DOM/CSS parity with the rest of the pack.Registered in both render paths: the legacy
'use client'side-effect barrel (./render) and the server-safe explicit registry (./render/register).Updated dependencies [f4d55c9]
Updated dependencies [eb403d4]
- @wabbit/tome-blocks-core@0.13.0
- @wabbit/tome-blocks-extras@0.13.0
0.11.x
15 fixes (0.11.0 – 0.11.2)
- 0.11.2
Updated dependencies [e11d5a2]
- @wabbit/tome-blocks-core@0.11.2
- @wabbit/tome-blocks-extras@0.11.2
- 0.11.0
Pre-existing test-suite fixes (unrelated to recent feature work).
high-impact-hero'sillustrationHerovariant carried two tags (brand,illustration) outside the canonical taxonomy declared inv2-coverage.test.ts. Fixed to['editorial', 'playful']. TheillustrationHeroslug itself is kept camelCase (not renamed to kebab-case) because it shipped in the published0.5.0release (2026-05-21) and is stored verbatim in consumer content as a_variantfield value — renaming would silently break every stored document that already selected it. The kebab-case rule now carries a documented, slug-scoped exception with a deprecation trigger (next content-breaking major version for this package, when a stored-content migration pass is already budgeted).blocks-core'stest/top20-variants.test.tsimported@wabbit/tome-blocks-marketing-starterand the other bundle packs directly, which a later refactor made unresolvable when it removed blocks-core's devDeps on those packs to break the blocks-core ↔ marketing-starter dependency cycle. Relocated the test to@wabbit/tome-blocks(the meta-package that already depends on every pack for exactly this purpose) rather than re-adding the removed devDeps and recreating the cycle. Test-only change; no runtime behavior changed in either package.
- 0.11.0
Every package now declares an explicit
sideEffectsfield (38 added; motion/engine/forms already correct).Registration-bearing modules (render files'
registerRenderer,blocks/*/index.tsdefineBlockself-registration, widgetregister.tsfiles, productHooks, permission self-registrations, print templates, chrome built-in variants) are listed so bundlers can tree-shake everything else WITHOUT dropping import-time registrations — previously the field was unset, which blocked cross-module tree-shaking through the barrels entirely. Never blanketfalseon a package with registration or CSS. - 0.11.0
Re-render and cleanup fixes: chrome's HeaderClient dead theme state + unreachable effect deleted; Navbar6/7 body-scroll-lock now saves and restores the pre-existing overflow value (LearnerSidebar pattern) instead of clobbering to ''; Navbar7's scroll listener is rAF-throttled. marketing-starter's Testimonial derives the clamped slide index during render instead of an effect. forms'
FieldRendereris wrapped inReact.memo(call-site props verified stable), cutting whole-step re-render work per keystroke in multi-field forms. lms-ui'suseLearnerPrefsgains optionalinitialPrefsserver-seeding (non-breaking) + in-flight dedup with TTL for the unseeded path. - 0.11.0
The clientization migration: 127 render components across seven packs dropped
'use client'— every file individually re-verified hook/handler/context-free before stripping; adapter-consuming static blocks converted toresolveRichText/resolveMedia.Exactly 20 of 155 renderers remain client, each for a verified reason (state/effects/motion, or a documented client-shell composition contract), enforced by the new
assert:rsc-boundariesCI script (per-pack manifest; fails loudly if a directive creeps back or a count drifts). Every renderer-bearing pack now exports./render/register(renderersmap + explicitregisterRenderers()), aggregated by@wabbit/tome-blocks's newregisterAllRenderers()— the format-safe registration path for server component graphs, where the legacy import-time barrel registration never executes (that legacy path is unchanged and remains supported until the spec's deprecation trigger).RenderBlockis rewritten server-safe: directive-free, optionalcomponentsprop (RenderBlocks parity) → registry fallback, dev warn-once naming both fixes on a miss; its docs state the explicit-registration prerequisite. Rendered output is byte-identical everywhere; behavior change only for consumers rendering migrated blocks in RSC WITHOUT a provider or registration — they get the documented warn + graceful degradation instead of silent client bundling. - 0.11.0
Monolith decompositions (behavior- and markup-preserving; public APIs unchanged; markup identity mechanically verified per file): forms' FieldRenderer 633→84 via a field-control registry + shared FieldChrome (consent/checkbox byte-identical branches merged) and TomeForm 656→451 via four extracted hooks (the ordering-critical resolver sync deliberately stays inline, documented); rpg's CharacterSheet 841→130 across panels + three editing hooks + persistence hook (the StrictMode XP-ledger charRef guard preserved verbatim); gallery's GalleryIndex 1032→431 (BlockThumb/BlockCard/Toolbar/useFilteredCatalog siblings, T2's debounce+memo preserved); webgl's WebglCanvasProvider 938→546 (useTransitionOrchestrator + useCanvasRenderer extracted; settle thresholds hoisted to named consts); admin's mergeAdminComponents 828→404 orchestrator + four helpers (all docblocks relocated, 717 tests unmodified) and Nav's config-reading now typed (6 of 8
as anycasts eliminated); marketing-starter's PricingPlans extracts its GSAP toggle timeline hook + a memoized card. rpg additionally trusts the denormalizedxpTotalon sheet load/save hot paths (full recompute stays at the XP-recording reconciliation point). - 0.11.0
Updated dependencies [26dfa07]
- 0.11.0
Updated dependencies [36e537a]
- 0.11.0
Updated dependencies [36e537a]
- 0.11.0
Updated dependencies [36e537a]
- 0.11.0
Updated dependencies [a93f478]
- 0.11.0
Updated dependencies [5f78397]
- 0.11.0
Updated dependencies [5f78397]
- 0.11.0
Updated dependencies [aef2725]
- 0.11.0
Updated dependencies [aef2725]
- @wabbit/tome-blocks-core@0.11.0
- @wabbit/tome-blocks-extras@0.11.0
0.10.x
1 fix (0.10.0)
- 0.10.0
Updated dependencies
- @wabbit/tome-blocks-core@0.10.0
- @wabbit/tome-blocks-extras@0.10.0
0.9.xMinor
layoutGrid nesting capability audit + render hardening (Wave 2).
Tags the
nestablecapability flag (and aminColSpanfloor for internally-wide blocks) across the offered blocks in the core packs (extras, marketing, content, agency, editorial, signal), so thelayoutGridcontainer's derived child allowlist —blockRegistry.getNestableBlocks()— is populated rather than empty. Excluded by design (left non-nestable): containers (editorialSpread,editorialSection,split-view,stacking-wrapper,grid,layoutGrid) to enforce the one-level depth cap; full-bleed heroes/banners (band-owners); and inline Lexical blocks (not block-level grid children).minColSpan: 2is set on the internally multi-column blocks (card-grid,bento-section,content-two-column,signal-stats,signal-image-grid,signal-data-table) so they cannot be crammed into a single-column cell.Also hardens
LayoutGrid's child↔span pairing: children are now flattened with null slots preserved (instead ofReact.Children.toArray, which drops nulls), so an unrenderable child can no longer shift every later child's span metadata onto the wrong block. Adds a dev-mode warning when the consumer's child count doesn't match the item count.@wabbit/tome-blocks-coreis bumped to release the layoutGrid platform primitives merged earlier but never published (the registry's0.8.0predates that merge):BlockMeta.nestable/minColSpan,withChildPlacement, the reserved_colSpan/_rowSpan/_orderfield constants, andblockRegistry.getNestableBlocks(). Without this, a consumer wiring the layoutGrid allowlist would call agetNestableBlocksthat its installedblocks-core@0.8.0does not have.Domain packs (lms, catalog, sc, org) are intentionally deferred — they compose into their own domain layouts and can opt in when a consumer needs them.
Updated dependencies [c7d0afc]
- @wabbit/tome-blocks-core@0.9.0
- @wabbit/tome-blocks-extras@0.9.0
6 fixes (0.9.1 – 0.9.5)
- 0.9.5
Demo-kit diversification (10 fictional brands across all demo props) and block fixes: pricing/testimonial demos supply real card objects instead of placeholder-ID strings; PostHero/EditorialOpener/BlogHero/ChapterHero format display dates with a fixed locale (ISO preserved in the time dateTime attribute); PostHero background layer no longer collapses to the content row (abs-pos grid-item containing-block fix) and fills via the Media adapter; Testimonial renders plain-string quotes.
- 0.9.5
Updated dependencies
- @wabbit/tome-blocks-extras@0.9.5
- 0.9.4
Docs-manifest emitter pipeline (W3 ship-readiness).
@wabbit/tome-blocks-corenow ships a standalone Node ESM CLI atscripts/emit-docs-manifests.mjsthat emits per-package documentation manifests (index.json, packages/<slug>.json, changelog.json) by reading what packages already carry — READMEs, the payload-free<pkg>/metablock-usage barrels, package.json exports maps, and CHANGELOG.md. It is the docs-pipeline sibling of the gallery source extractor and is consumed by host sites at prebuild:node node_modules/@wabbit/tome-blocks-core/scripts/emit-docs-manifests.mjs --output-dir <dir> --scope <scope.json>.To let the emitter import block metadata uniformly without dragging Payload config into a build script, the
./metapayload-free subpath (BlockMetaEntry[]) is extended to the remaining offered blocks packs — agency-essentials, catalog-pack, lms-pack, org-pack, and signal-theme — mirroring the existing editorial-pack / marketing-starter / content-writer / extras barrels. Each block'sBlockMetawas relocated verbatim into a payload-free sibling meta module and re-imported by its block config; no meta values changed.Every supported-core package additionally adds
CHANGELOG.mdto its publishedfilesarray so the next publish cascade ships changelogs the emitter can read from installed tarballs at prebuild. - 0.9.4
Updated dependencies [bed3f90]
- @wabbit/tome-blocks-core@0.9.4
- @wabbit/tome-blocks-extras@0.9.4
- 0.9.2
Updated dependencies
- @wabbit/tome-blocks-core@0.9.2
- @wabbit/tome-blocks-extras@0.9.2
- 0.9.1
Updated dependencies [c07f3c8]
- @wabbit/tome-blocks-extras@0.9.1
0.8.xMinor
Batch 1 (2026-06-27 inserter/variant architecture): author the usage/intent layer on the free
high-impact-hero— it is the canonical free workhorse hero and the migration target for the deprecated low/medium-impact heroes.Additive metadata only.
Deferred to the live-run pass (coupled with the instance data-migration + a visual A/B): the slug rename
high-impact-hero→hero(with a back-compat alias) and theheroTextThemeparity field.Batch 2 feature consolidation (2026-06-27 inserter/variant architecture) — collapse the scattered feature blocks into the single
featureHero.- Deprecated (still registered + rendered for back-compat, removed from the offered
extrasbundle + client-safe gallery meta):feature-masonry,feature-with-large-media,feature-with-three-steps,media-feature→ the marketing-starterfeatureHero. Together with Batch 1'sfeature-hero-with-cards+feature-with-icon-grid, the whole feature family now consolidates tofeatureHero, whose 6-layoutvariantselect already covers them all. - Authored usage/intent metadata on
featureHero(now the sole offered feature block). - Deferred to the live-run reconciliation pass (brand-preserving but a field-semantics swap + data migration):
featureHero's dual variant mechanism — make the 6 LAYOUTS the_variant(so the VariantPicker drives layout, not the unrelated 4-value style axis), move the style axis to a secondary field, and drop the inlinevariant. Instance migration (standalone feature blocks →featureHero+ the right layout) is deferred to a later release.
Tier note: the feature layouts consolidate onto the FREE
featureHero(it already carried all 6 free); unlike heroes there is no distinct premium feature layout to gate, so there is no paidfeature-pro.Ships in the linked family's 0.8.0 minor.
- Deprecated (still registered + rendered for back-compat, removed from the offered
Batch 4 — Marketing & Data (2026-06-27 inserter/variant architecture).
These six blocks already ship as one-block-plus-4-variants (clean
_variant, no scattered duplicates), so this batch is audit + usage-authoring, not consolidation.- Authored usage/intent metadata (Decision 4) on
cta,logo-slider,pricing,testimonial,faq,banner— so assembling agents + the gallery/inserter can select, order, and configure them. Additive metadata only. - Audit finding flagged for the live-run reconciliation pass:
pricingcarries a slug-split (Payload blockslug: 'pricingPlans'camel vs metaslug: 'pricing'kebab) AND a redundant inlinedisplayOptions.variant('full'|'compact') alongside the_variantaxis. Documented in pricing/meta.ts; deferred (couples with the slug-split decision + a data migration). The other five are clean.
Ships in the linked family's 0.8.0 minor.
- Authored usage/intent metadata (Decision 4) on
Updated dependencies [249b670]
Updated dependencies [249b670]
Updated dependencies [249b670]
Updated dependencies [249b670]
- @wabbit/tome-blocks-extras@0.8.0
- @wabbit/tome-blocks-core@0.8.0
0.7.xMinor
Expose a client-safe
./demoexport (the already-built, payload-freegetDemoPropsmodule) on each block pack, separate from the payload-importing root barrel.The root barrel (
.) eagerly pulls each block's config, which importspayload(→richtext-lexical→pino→worker_threads). A consumer that registers packs client-side (the wabbit/blocksgallery storefront, B6) can't importgetDemoPropsfrom the root barrel without draggingpayload/worker_threadsinto the browser bundle (build failure).The
dist/demo.*module is already built and contains only demo-data + type imports — this change just makes it importable as@wabbit/tome-blocks-<pack>/demo.Additive; no code or runtime change to the packs.
NOTE: this is the
getDemoPropshalf of the client-safe gallery-registration fix. The companion piece — a client-safe block-meta/descriptor export (slug/label/variants/tier, separate from the payload-importing config the gallery bridges currently read.metaoff) — is still needed before B6 can register packs entirely off the root barrel.Tracked separately.
Expose a client-safe
./metaexport on each block pack: payload-free block descriptor metadata (slug/name/description/category/tags/source + variants), separate from the payload-importing root barrel.This is the companion to the
./demoexport. Each block'smetaliteral is now extracted into a co-located payload-freemetamodule that the block config imports, and a pack-level./metaentry exposes the full descriptor list as<pack>BlockMeta.A consumer registering packs client-side (the wabbit
/blocksgallery storefront, B6) can now read block metadata for gallery entries without importing the root barrel, which eagerly pulls each block's config (payload->richtext-lexical->pino->worker_threads) into the browser bundle.Additive and behavior-preserving:
defineBlockreceives the same meta object (now imported rather than inline); the block registry, configs, demos, and existing exports are unchanged. The packBlockMetaarray is also re-exported from the root barrel for path-alias consumers.Updated dependencies [28802fa]
Updated dependencies [66c611c]
Updated dependencies [8958d41]
- @wabbit/tome-blocks-extras@0.7.0
- @wabbit/tome-blocks-core@0.7.0
0.6.x
2 fixes (0.6.1 – 0.6.2)
- 0.6.2
Updated dependencies [4b2f368]
- @wabbit/tome-blocks-core@0.6.2
- @wabbit/tome-blocks-extras@0.6.2
- 0.6.1
feat(demo): add getDemoProps dispatchers to agency-essentials, marketing-starter, and signal-theme
Each pack now ships a
demo.tsbarrel with agetDemoProps(blockSlug, variant, ctx?)dispatcher and per-block demo functions. The auto-gallery route in tome-starter can replace thenoopDemoPropsstub for all three bundles, eliminating the warning cards that appeared for every block × variant.- agency-essentials: 10 blocks × 4 variants each (about, contact, team-roster, gallery, timeline, stat, stat-bar, split-view, media, form)
- marketing-starter: 8 blocks × 4-5 variants each (high-impact-hero, feature-hero, cta, logo-slider, pricing, testimonial, faq, banner)
- signal-theme: 33 blocks (all signal-\* slugs); blocks with multi-variant configs covered (accordion: stacked/single, callout: tactical/lore)
- DemoContext interface, individual block-level functions, and getDemoProps all re-exported from each pack barrel
- richText fields intentionally omitted — GalleryRichTextProvider supplies the Lexical state at gallery render time
- Relationship fields (pricing, testimonial) emit sentinel strings; gallery degrades gracefully
Fixes risk R1 from the gallery gap audit.
- @wabbit/tome-blocks-core@0.5.9
0.5.xMinor
high-impact-hero: add anillustrationHerovariant (characterImageupload +characterPosition) for character-led heroes.
3 fixes (0.5.7 – 0.5.9)
- 0.5.9
Three additive packaging fixes surfaced by a consumer's registry-consumption migration (path-aliasing was masking these — the actual package contracts didn't cover them).
@wabbit/tome-blocks-marketing-starter: add./blocks/*subpath exports for the 8 block directories (banner,cta,faq,feature-hero,high-impact-hero,logo-slider,pricing,testimonial). Source already shipped these as directories withindex.ts; theexportsmap only declared.and./render, so any consumer of a specific block from the registry got a module-not-found error. Path-aliasing bypassed the exports map, hiding the gap.@wabbit/tome-core: add./auth/collections/Roles(capital R) alongside the existing lowercase./auth/collections/roles. Both resolve to the same file (./dist/auth/collections/Roles.{js,cjs,d.ts}). The source file isRoles.ts; the exports map declared only lowercase, so consumers using the file's actual case (which is what TS path-aliasing produced when reading the source directly) couldn't import via the package's public API.@wabbit/tome-ui: add./tokens.cssalongside the existing./tokens(both point at./dist/tokens.css). Lets consumers writeimport '@wabbit/tome-ui/tokens.css'to match the CSS-file naming convention as well as the existingimport '@wabbit/tome-ui/tokens'.
All three additions are purely additive — no existing exports removed or changed, so existing consumers stay compatible.
- @wabbit/tome-blocks-core@0.5.9
- @wabbit/tome-blocks-extras@0.5.9
- 0.5.7
@wabbit/tome-blocks-core@0.5.7
- 0.5.7
@wabbit/tome-blocks-extras@0.5.7
0.4.x
4 fixes (0.4.0 – 0.4.2)
- 0.4.2
Updated dependencies
- @wabbit/tome-blocks-extras@0.4.2
- @wabbit/tome-blocks-core@0.4.2
- 0.4.1
Updated dependencies
- @wabbit/tome-blocks-extras@0.4.1
- @wabbit/tome-blocks-core@0.4.0
- 0.4.0
Updated dependencies [b76f684]
- 0.4.0
Updated dependencies [90a694d]
- @wabbit/tome-blocks-core@0.4.0
- @wabbit/tome-blocks-extras@0.4.0
0.3.xMinor
Sprint 3 blocks split — v0.2.0
Extracted the Tome blocks monolith (@wabbit/tome-blocks) into independently publishable bundle packages. Each bundle is independently installable, tree-shakeable, and testable in isolation.
New packages (all v0.2.0):
@wabbit/tome-blocks-core— registries, defineBlock/defineBundle, variants, thumbnails, admin components (BlockPicker, VariantPicker)@wabbit/tome-blocks-marketing-starter(free) — 8 marketing blocks: Hero, FeatureHero, CTA, LogoSlider, Pricing, Testimonial, FAQ, Banner@wabbit/tome-blocks-content-writer(free) — 10 editorial blocks: Blog, Archive, PostHero, RelatedPosts, EditorialOpener, EditorialBridge, EditorialSidenote, EditorialFigure, EditorialColophon, EditorialFootnotes@wabbit/tome-blocks-agency-essentials(starter) — 10 agency blocks: About, Contact/Form, Gallery, Media, SplitView, Stat, StatBar, TeamRoster, Timeline@wabbit/tome-blocks-editorial-pack(pro) — 8 editorial blocks: DataHero, Feature, InfoPanel, MessagePanel, MetricStrip, SplitPanel, StatusBoard, TextReveal@wabbit/tome-blocks-signal-theme(pro) — 33 Signal narrative blocks@wabbit/tome-blocks-lms-pack(pro) — scaffold for LMS blocks (Wave 3)@wabbit/tome-blocks-catalog-pack(pro) — scaffold for catalog/ecommerce blocks (Wave 3)@wabbit/tome-blocks-sc-pack(niche) — scaffold for Star Citizen blocks (Wave 3)@wabbit/tome-blocks-extras(pro) — 47 residual blocks (heroes, layout, content, marketing)
@wabbit/tome-blocks is now a meta-package that re-exports all bundle packages and provides
registerAll(blockRegistry, bundleRegistry)as a convenience function.Render colocation: All 113 render
.tsxcomponents migrated from the monolith into their owning bundle packages (./rendersubpath on each bundle).Breaking changes (internal):
@wabbit/tome-blocks/blocksand@wabbit/tome-blocks/bundlessubpaths removed (were Sprint 2 shims)packages/blocks/src/render/category index files removed (replaced by per-bundle./rendersubpaths)
Migration:
// Before (monolith singleton, all blocks loaded) import "@wabbit/tome-blocks"; // After (explicit registration, tree-shakeable) import { blockRegistry, bundleRegistry, } from "@wabbit/tome-blocks-core/registry"; import { register } from "@wabbit/tome-blocks-marketing-starter"; register(blockRegistry, bundleRegistry); // Or use the meta-package convenience function import { blockRegistry, bundleRegistry, registerAll, } from "@wabbit/tome-blocks"; registerAll(blockRegistry, bundleRegistry);Updated dependencies [f2202cd]
- @wabbit/tome-blocks-core@0.3.0
- @wabbit/tome-blocks-extras@0.3.0