Blocks Local Pack

@wabbit/tome-blocks-local-pack

Local-business blocks for Tome: a menu or price list, a live "open now" status line, and a find-us band. They are built on the open-state utility in @wabbit/tome-local, which handles timezones, split shifts and labelled holiday overrides. The pack is free with any theme.

Status: preview. Three blocks and the flagged ordering island, built first for the Table theme. register() adds them as the free local-pack bundle.

Blocks

| Slug | Name | What it renders | |---|---|---| | local-price-list | Local Price List | A menu or price list in three arrangements: a photo card grid (the default) with a featured lead, numbered category rail and in-card details; a printed ledger; and a home-page teaser. Prices are stored in minor units and formatted with Intl.NumberFormat. Ordering is an opt-in flag. | | local-live-status | Local Live Status | One line of live proof: "Open now · kitchen closes at 10", "Opens tomorrow at 11" or "Closed today · holiday hours". The server renders the value and the client recomputes it, so cached pages stay true. Renders nothing without hours. | | local-logistics | Local Logistics | Address, keyless Google and Apple directions links, phone, an optional map image, and weekly hours grouped by identical days with today highlighted in the business timezone. Also visit notes. |

All three are listed in the block catalog under the local-pack bundle.

Install

pnpm add @wabbit/tome-blocks-core @wabbit/tome-local @wabbit/tome-blocks-local-pack

| Peer | Range | Required | |---|---|---| | @wabbit/tome-blocks-core | >=0.35.0 <1.0.0 | yes | | @wabbit/tome-local | >=0.1.1 <1.0.0 | yes | | @wabbit/tome-blocks-house | >=0.9.0 <1.0.0 | no | | @wabbit/tome-ui | >=0.18.0 <1.0.0 | no | | payload | >=3.67.0 | yes | | react | >=19.0.0 | yes | | react-dom | >=19.0.0 | yes |

Block styles read --tome-* tokens, so load the design tokens once in your global CSS, as with every Tome pack.

Register the block configs into your registries:

// payload.config.ts
import { BlockRegistry, BundleRegistry } from '@wabbit/tome-blocks-core/registry'
import { register } from '@wabbit/tome-blocks-local-pack'

const blockRegistry = new BlockRegistry()
const bundleRegistry = new BundleRegistry()

register(blockRegistry, bundleRegistry)

Register the renderers once at app startup:

import { registerRenderers } from '@wabbit/tome-blocks-local-pack/render/register'

registerRenderers()

Public API

| Entry | Exports | Runtime | |---|---|---| | @wabbit/tome-blocks-local-pack (.) | register(blockRegistry, bundleRegistry), localPackBlocks, the block descriptors (localPriceListBlock, localLiveStatusBlock, localLogisticsBlock), the option presets (LOCAL_TAG_PRESETS, LOCAL_ATTRIBUTE_PRESETS), the LocalPriceListConfig, LocalPriceListOption and LocalPriceListData types, getDemoProps, localPackDemoProps, and the hours types (OpenStateSource, LocalWeeklyHours, LocalHoursOverride, …) re-exported from @wabbit/tome-local/hours | Payload config (block descriptors) | | ./render | localPackRenders (slug → renderer), the renderers LocalPriceList, LocalLiveStatus and LocalLogistics, LocalLiveStatusAnnouncement (for chrome's announcement slot), toSerializableSource, and the LocalLiveStatusData, LocalLiveStatusAnnouncementProps and LocalLogisticsData types; importing it registers the renderers as a side effect | React | | ./render/register | renderers, registerRenderers(): the explicit, server-guaranteed registration path | React | | ./ordering | The flagged ordering island (OrderProvider, OrderButton, OrderPill, OrderDrawer, useOrder). Mounted only when a list sets ordering.enabled | Client | | ./meta | localPackBlockMeta: each block's gallery meta and variants, payload-free | Isomorphic | | ./demo | getDemoProps(blockSlug, variant?) and localPackDemoProps, with realistic, neutral demo data for the gallery | Isomorphic |

import { localPackBlockMeta } from '@wabbit/tome-blocks-local-pack/meta'
import { getDemoProps } from '@wabbit/tome-blocks-local-pack/demo'
import { renderers } from '@wabbit/tome-blocks-local-pack/render/register'

Local Price List

One data shape, three arrangements, chosen with the block's variant:

• card-grid (default): a featured lead band (kicker, the item as the page h1, description, display price beside the action, a round stamp over the photo), then a numbered category rail beside the categories (sticky from 768px; a horizontal sticky row on phones), a masthead per category, photo cards three, two and one across, and one item that breaks the grid with its details always open. Each card's details (ingredients, allergens, nutrition, a shared note) open inside the card over its photo, so the card never changes size.
• ledger: the printed list. Ruled rows, attribute codes, right-aligned tabular prices, every size or measure listed, and an optional featured lead. Each row carries the card's action (below); a row's details open in place under it.
• teaser: a photo panel beside a numbered list of the first teaser.count items (default 6). Hovering or focusing a row brings it forward and swaps the photo; phones show a thumbnail per row instead of the panel.

Data. Inline only for now (source: 'inline'): sections[] { anchor, title, tagline, description, note, items[] }, each item { key, name, description, image, tags[], attributes[], nutrition[] { label, value }, modifiers[] { label, price }, details { ingredients, allergens }, courses[] { text }, breaker, availabilityLine, metaLine, priceMode, variants[] { label, price, priceMax }, available }. Keys and anchors are generated from the name or title on first save and then stay put; ordering and the featured lead refer to items by key.

Featured lead (featuredLead, card grid and ledger): itemKey names the item; kicker, stamp { ring, core } and moreLabel dress it. description is the lead's own text (empty: the item's description, the one its card shows). headingLevel sets the featured name's heading: auto (default) is the page h1 on card-grid, and on ledger an h1 only when the block is the page's first (the renderer's index is 0) and an h2 otherwise; h1 or h2 force it. Pick h1 when a ledger opens a page whose host does not pass index.

Meta line. Under each card and row: attribute codes, then the first nutritionInMeta nutrition pairs (default 2) and the modifiers, in metaOrder: nutrition-first (default, "120 kcal · Oat +0.50") or modifiers-first ("Oat +0.50 · 120 kcal"). A section can set its own (sections[].nutritionInMeta, sections[].metaOrder), which override the list's for that section's items, so a drinks section can read "Oat +0.50 · 120 kcal" while the dishes lead with protein; left empty, a section uses the list's. A ledger row adds its metaLine parts. At most one item per list may set breaker, and keys must be unique (the sections field validates both). The shape equals the price-list collection planned for @wabbit/tome-local, so a list moves to it without re-entry.

Prices are integer minor units (1700 is 17.00), formatted with Intl.NumberFormat in the block's locale (default en-US) and currency (ISO 4217, default USD). With showCurrency off (the default) the amount prints without a symbol ("17.00") and a visually hidden currency name follows it, so a screen reader hears "17.00 US dollars". priceMode gives a fixed price, "from" the lowest variant, a range (price to priceMax), "Market price" or "On request"; the wording is editable in priceLabels. Aligned prices set in the text face with tabular lining figures.

Tags and attribute codes are free text by default. Pass option lists to the block factory to make them typed selects; the presets are data only:

import { LOCAL_ATTRIBUTE_PRESETS, LOCAL_TAG_PRESETS, localPriceListBlock } from '@wabbit/tome-blocks-local-pack'

localPriceListBlock.block({ tags: LOCAL_TAG_PRESETS.menu, attributes: LOCAL_ATTRIBUTE_PRESETS.dietary })

A known code prints with its expansion (<abbr title="Vegetarian">V</abbr>). The block adds no dietary or allergen wording of its own.

Actions. Each item's action sits in the same spot in every state:

• With ordering.enabled and a checkoutUrl, each priced, available item gets an add button and a stepper rendered hidden, inside data-menu-action. Mount the ordering island on the page (./ordering) to make them work. Without both settings no add action renders, and data-menu-action does not appear.
• With ordering off, askLabel gives each card or ledger row that has details a control opening them (a ledger row renders its details panel only with that control). primaryAction gives the featured lead a link (a booking anchor, say), and the breaker too unless breakerAction gives it its own (for example "Reserve the tasting menu"). In the ledger the breaker's row carries the breaker's action. These sit in data-menu-foot.

Without JavaScript the rail is a plain list of in-page anchors, every details panel shows in place under its photo, and the controls that need script are hidden. The small client island adds the details toggles (Esc closes an open panel wherever focus is, and returns focus to the control that opened it unless the visitor has moved on), the rail scroll-spy (scrollSpy: 'auto' runs it with four or more sections) and the teaser hover. It animates nothing itself, so the block's cards still take part in the platform reveal, and every transition is dropped under prefers-reduced-motion: reduce. Sticky parts and section anchors clear an announcement bar through --tome-announcement-height.

Local Price List hooks. Root: data-block-variant, data-local-price-list, data-menu-ordering="on" when ordering renders, data-menu-teaser on the teaser. Featured: data-menu-featured, data-menu-featured-copy, data-menu-kicker, data-menu-more, data-menu-item-media; stamp data-menu-stamp with data-stamp-disc, data-stamp-ring (the inner circle), data-stamp-text (the ring text) and data-stamp-core. Rail: data-menu-rail, data-menu-rail-link (aria-current="true" on the current one), data-menu-rail-num, data-menu-rail-count. Category: data-menu-section (its id is the anchor), data-menu-masthead, data-menu-section-num, data-menu-tagline, data-menu-section-description, data-menu-section-note. Item: data-menu-item="<key>" (plus data-available="false"), data-menu-item-media, data-menu-item-head, data-menu-item-name, data-menu-item-desc, data-menu-tag, data-menu-leader, data-price with data-price-mode, data-menu-variants, data-menu-meta, data-menu-info, data-menu-details (data-open="true" when open), data-menu-details-note, data-menu-ask, data-menu-action, data-menu-foot, data-menu-primary, data-menu-unavailable. Breaker: data-menu-breaker, data-menu-breaker-panel, data-menu-breaker-availability, data-menu-courses, data-menu-course, data-menu-course-num. Ledger: data-menu-row. Teaser: data-local-label, data-teaser-panel, data-teaser-photo (data-active on the shown one), data-teaser-caption, data-teaser-list (data-engaged="true" while hovered or focused), data-teaser-row (data-active="true"), data-teaser-thumb, data-menu-item-num, data-menu-item-line, data-teaser-actions. Ordering: data-order-add="<key>", data-order-stepper="<key>", data-order-dec, data-order-inc, data-order-qty. Reveal: the featured copy and photo, each card, the breaker and each teaser row carry data-tome-reveal-item. Optional knobs: --tome-menu-leader, --tome-menu-stamp, --tome-menu-stamp-ink, --tome-menu-meta-size.

Theme hooks

Every block root carries data-block-type (the kebab-case catalog slug, such as local-price-list) and data-block-variant. Its parts carry documented data-* hooks (data-menu-*, data-teaser-*, data-order-*, data-live-*, data-logistics-*), so a theme can restyle them without keying off hashed class names. Each block's section in this README lists its hooks; they are the Table theme's hook contract (Wabbit/products/tome/themes/table/HOOK-CONTRACT.md in the Wabbit workspace).

Local Live Status

local-live-status has two variants. bar is a band, one row from 640px while the status and the links fit side by side (the links move under the status where they do not, so the detail never truncates) and a 124px block with three equal buttons on phones. line is inline.

It reads source, an OpenStateSource: a timezone, weekly rows (two rows on one day for a split shift, and a close earlier than the open runs past midnight), labelled holiday and special-hours overrides, and named schedules. The status has two parts:

• A lead: "Open now", "Closed now" or "Closed today".
• A detail: "kitchen closes at 10", "opens tomorrow at 11" or "holiday hours: back Wednesday at 5:30".

Every string is overridable. timeStyle: 'compact' drops AM/PM ("2:30", "10", "midnight"). Each state (open, closed, closedToday) has its own action. A call link and a keyless directions link sit beside it. An action of kind directions hides the separate Directions link.

The server renders the status. A small client island then recomputes it after mount, on a timer aligned to the next opening or closing, and when the tab becomes visible again. It announces through role="status" only when the state really changes.

To put the bar above the header, render it in chrome's announcementSlot. LocalLiveStatusAnnouncement takes the block's fields as props:

import { LocalLiveStatusAnnouncement } from '@wabbit/tome-blocks-local-pack/render'

<HeaderRenderer
  announcementSlot={
    <LocalLiveStatusAnnouncement
      source={hours}
      schedule="kitchen"
      scheduleWord="kitchen"
      timeStyle="compact"
      actions={{ open: { label: 'Reserve', href: '/reserve' }, closed: { label: 'Reserve', href: '/reserve' } }}
      call={{ phone: '(555) 555-0100' }}
      directions={{ address: '1 Example Street, Springfield' }}
    />
  }
/>

It returns null when there is nothing true to say, so the slot collapses.

Hooks:

• Root: data-live-state (open, closed or closed-today) and data-live-dup="directions".
• Status: data-live-region, data-status-dot (with data-state), data-live-lead and data-live-detail. No separator is rendered between the lead and the detail, so a theme draws its own.
• Links: data-live-actions, data-live-call (with data-live-call-label and data-live-phone-number), data-live-directions and data-live-action.

Local Logistics

local-logistics has one variant, split. It shows:

• the section label (data-local-label) and the heading
• a map image, always captioned with the illustrative-map label (data-compliance-label)
• the address, with a keyless Google or Apple directions link and a call link
• the hours, grouped by identical consecutive days ("Wed – Thu")
• an hours note
• titled visit notes

Today's group is marked data-today="true" on its <dt> and <dd>, computed in the business timezone. The server renders it, and the hours island corrects it after mount and at midnight. Today's holiday or special hours show as their own "Today" row. There is no live provider map and no API key.

Hooks: data-logistics-map, data-logistics-address, data-logistics-actions, data-logistics-directions, data-logistics-call, data-logistics-hours, data-logistics-hours-note, data-visit-notes and data-visit-group.

Honesty rules

• Live Status renders nothing rather than guess. Without hours, there is no status.
• The ordering island holds item keys and quantities in the browser and hands them to an external checkoutUrl. It takes no payment, creates no order record and renders no add action without both ordering.enabled and a checkoutUrl.
• The layer adds no allergen or dietary claim of its own. That wording comes from your content.

Server / client posture

The . entry, ./meta and ./demo are server-safe and contain no 'use client'. ./meta and ./demo are also payload-free, so a browser gallery can import them. The renderers are server components. The live-status recompute and the ordering island are small 'use client' islands that receive serializable props, and the server value renders first so there is no hydration mismatch.

Licence

Commercial, see LICENSE.md. Family block-packs, tier free.