@palate/cli 0.0.0-stage → 0.0.1

package/kb/sections/visit-hours-map.md

@@ -0,0 +1,110 @@
+---
+id: visit-hours-map
+name: Visit us, with hours, directions and a drawn map
+kind: closing
+shape: split
+layout: "split: on one side the address (copyable, opens a maps app), the opening hours as a small table with today stated in words, and how to get there; on the other a map of the few streets around the place drawn in code, with the door marked"
+fits: [local, food, travel, community, friendly, warm, heritage, events]
+avoid: [saas, developer, b2b, enterprise, data-dense-tool]
+needs: ["the real address and the place's opening hours, including exceptions (closed Mondays, until sold out)", "how people actually arrive: tram or bus stop, bike rack, parking, step-free access", "the 4–8 streets and one or two landmarks around the place, to draw the map", "optional: a real photograph of the shopfront or door"]
+imagery: none
+density: balanced
+effort: m
+moves: [code-drawn-diagram, time-of-day-theming]
+---
+
+## When it's right
+
+The visitor's last question on a bakery, restaurant, shop, workshop or library page is practical: where is it, is it open, how do I get there. For a local place this is the real closing: the action isn't “Sign up”, it's walking through the door. Mabel's (“8 am until sold out”), Torque Cycles (“drop off before 9 for same day”), Open Shelf (“pick up at the Lake Street location”) all end here.
+
+The median page ends with a contact form and an embedded Google map iframe that loads slowly, tracks the visitor, and looks like every other site. This archetype draws the few streets that matter in code, marks the door, says today's hours in words, and tells people how to arrive.
+
+Not for online-only businesses, and not for multi-location chains (list the locations in a ruled list instead). Pairs with `footer-minimal-credits` below it.
+
+## Structure
+
+```
+1440 ─ container 1240; words cols 1–5, map cols 6–12
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ H2 "Come by"                         ┌ map, drawn in code (SVG), 4:3, --r-md ──────────┐ │
+│                                      │      Great Junction St                           │ │
+│ Open today until 1 pm,               │ ═════════════════════════════════════════        │ │ ← streets as strokes
+│ or until we sell out.                │        ║            ● Mabel's                    │ │ ← the door: one brand dot
+│ ← --t-h3, the one live line          │        ║            22 Great Junction St         │ │   with its label
+│                                      │  Leith ║ Walk                                    │ │
+│ 22 Great Junction Street             │        ║      ▢ tram stop: Foot of the Walk      │ │ ← one or two landmarks
+│ Leith, Edinburgh EH6   [Copy]        │ ═══════╬═════════════════════════                │ │
+│ Open in Maps ↗                       │   N ↑                       100 m ├──┤           │ │ ← north arrow, scale
+│ ───────────────────────────────────  └──────────────────────────────────────────────────┘ │
+│ Wed–Fri   8 am – 2 pm                                                                    │ ← hours table:
+│ Sat       8 am – sold out (≈ 1 pm)                                                       │   tabular, hairlines
+│ Sun       9 am – 1 pm                                                                    │
+│ Mon–Tue   closed                                                                         │
+│ ───────────────────────────────────                                                      │
+│ Tram: Foot of the Walk, 4 min walk. Bike rack outside. Step-free door; the counter       │ ← getting here,
+│ is 90 cm high. No parking on the street on Saturdays.                                    │   --t-body, 62ch
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ side padding 16; words first, map after
+┌──────────────────────────────┐
+│ H2 "Come by"                 │
+│ Open today until 1 pm,       │
+│ or until we sell out.        │
+│ 22 Great Junction Street     │
+│ Leith EH6        [Copy]      │
+│ [ Open in Maps ]  full width │
+│ ┌ map, 1:1 ────────────────┐ │
+│ │  streets, door, tram     │ │
+│ └──────────────────────────┘ │
+│ hours table                  │
+│ getting here, 2–4 lines      │
+└──────────────────────────────┘
+```
+
+At 390 the order follows the visitor's need: today's hours line, the address with “Open in Maps” as a full-width secondary button (44px), then the map re-drawn at 1:1 with fewer street labels, then the full hours table and directions. The SVG scales; labels stay at least 13px.
+
+## Finish
+
+- Today line: `--t-h3`, `--ink`, computed from the hours at render time in the place's own time zone (“Open today until 1 pm, or until we sell out.” / “Closed today. Back Wednesday at 8 am.”). This is the only dynamic thing in the section and it is plain words, not a green “OPEN” pill.
+- Address: `--t-body`, `<address>`, with a small text button “Copy” (copies the address, confirms with “Copied” for 1.5s) and a link “Open in Maps ↗” that uses a `geo:` / maps URL. Phone number as a `tel:` link if they take calls.
+- Hours: a real `<table>`, two columns, `--t-body`, `tabular-nums`, rows 40px with 1px `--hairline` between; today's row in weight 600 with a 2px `--ink` rule at its left edge (no coloured background chip). Exceptions in words in the cell (“sold out (≈ 1 pm)”). Holiday closures listed under the table in `--t-small`.
+- Map: an inline SVG drawn for this place (move `code-drawn-diagram`): streets as 1.5–6px strokes in `--ink` at 25–40% by importance, water or a park in a pale `--paper-2` fill, the door as one 10px dot in `--brand` with its label, one or two landmarks (a tram stop, a church, the river), a north arrow and a scale bar. Frame: `--r-md`, `--paper-2` ground, `--shadow-1` or a 1px `--hairline` (one, not both). Optional paper grain at 4% to match the page. If a static map image is used instead, it is from a licence-safe source with its attribution on the image (“© OpenStreetMap contributors, ODbL”).
+- Getting here: `--t-body`, max 62ch, plain sentences by mode of arrival. Access facts are specific (step-free door, counter height, accessible toilet or not).
+- Optional shopfront photo: one, 4:5, above or beside the address, captioned, tone-matched to the page (`_finish.md` image treatment).
+- Gaps: H2 to today line `--s-5`; today line to address `--s-5`; address to hours `--s-6`; hours to directions `--s-6`. Words column top-aligns with the map.
+
+## Content
+
+- The real address, the real hours, and the exceptions people actually hit (“until sold out”, “last orders 9:30”, “closed in winter” for Tidewater Inn, “walk-ins: 12 seats held every night” for Ember & Oak).
+- Directions the way locals give them: the nearest stop and the walk, where to lock a bike, where not to park, the door if it's hard to find (“the blue door left of the hardware store, first floor” for Bramble Bindery).
+- Accessibility in facts, not a badge.
+- No contact form here unless the business answers one; a phone number or email that a person reads is better.
+
+## States and motion
+
+- No-JS and screenshots: the hours table and address are server-rendered; the today line renders server-side for the place's time zone (and revalidates hourly) so it is never blank.
+- Map: static. Optional: the door dot pulses once (scale 1 → 1.4 → 1, 600ms) when the map enters view; off under reduced motion. No pan/zoom, no scroll-jacking.
+- Optional move `time-of-day-theming`: the map's ground warms toward evening, subtly, if the page does this elsewhere.
+- Copy button: focusable, announces “Address copied” via `aria-live="polite"`.
+- The SVG has `role="img"` and an `aria-label` that gives the address and nearest stop in words.
+
+## Pitfalls
+
+- An embedded Google Maps iframe as the whole section: slow, tracking, identical to every site, and often blocked by consent banners.
+- A green “OPEN NOW” status pill or a live-dot badge: app chrome; say it in words.
+- Hours only as a paragraph (“We're open most days from…”) that can't be scanned.
+- A map with every street labelled, a compass rose and a legend: draw only what someone needs to find the door.
+- A contact form nobody answers in place of the address.
+- Directions that assume a car in a city where most visitors walk or take the tram.
+
+## Floor checks
+
+- Is the full street address shown as text, with a way to open it in a maps app?
+- Is today's opening stated in plain words near the top of the section?
+- Are the hours laid out as a scannable table with today's row marked without a coloured pill or badge?
+- Is there a map of the surrounding streets with the place's door clearly marked, rather than an empty iframe or a generic pin graphic?
+- Does the section say how to get there (public transport, bike, parking or step-free access)?
+- Is the section free of status pills, dashboard widgets and app-style cards?
+- At 390, do the today line, address and maps link appear before the map, with the map readable and nothing scrolling sideways?

package/kb/sections/ways-to-help-honest.md

@@ -0,0 +1,115 @@
+---
+id: ways-to-help-honest
+name: Ways to help, each an honest choice
+kind: closing
+shape: editorial-columns
+layout: "2–3 columns, one per real way to take part (give time, give money, use the service), each saying what it asks, what it does, what happens after you click, and its own action; the organisation's charity facts in one line underneath"
+fits: [nonprofit, community, education, honest, sustainability, friendly, trustworthy, local]
+avoid: [saas, developer, b2b, luxury, ecommerce]
+needs: ["the 2–3 real ways someone can take part, with their actual commitment (hours, money, frequency)", "for each: what that contribution does in concrete terms, from the organisation's own figures", "what happens next after each action (an email, a training date, a call)", "the legal facts: charity or 501(c)(3) number, tax-deductibility"]
+imagery: none
+density: balanced
+effort: m
+---
+
+## When it's right
+
+A nonprofit, civic project or community programme ends its page by asking people to take part, and there is more than one honest way to do it. River Watch: become a tester (2 hours a month), adopt a site (£8 a month), or donate once. Lantern: learn, tutor, or give (£15 buys a learner's books for a term). Open Shelf: borrow, volunteer, or donate tools. After Bell: start a club, mentor, or sponsor.
+
+The median page ends with three SaaS pricing-style cards with icons and a “Donate now” button glowing in the middle, or a guilt-heavy appeal with a progress thermometer. This archetype lays the choices side by side like a well-written leaflet: each one states plainly what it asks, what it does, and what happens after you click, so a visitor can pick the one that fits their life.
+
+Not for a single donate button (use `closing-full-bleed-line-and-form`), and not for a membership with tiers and prices to compare (use `services-price-ledger` or a pricing archetype).
+
+## Structure
+
+```
+1440 ─ container 1240; heading cols 1–12, then 3 columns of 4 (2 columns of 6 when there are two choices)
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ H2 "Three ways to keep the rivers watched"                                               │
+│ one line lead, ink-2: "Pick the one that fits your month."                               │
+│ ──────────────────────────────────────────────────────────────────────────────────────── │ ← one hairline across
+│ Test a river               │ Adopt a site               │ Give once                    │ ← h3, display face
+│                            │                            │                              │
+│ 2 hours a month            │ £8 a month                 │ Any amount                   │ ← the ask: --t-lead,
+│                            │                            │                              │   weight 600, tabular
+│ You get a free kit and a   │ Pays for one site's kit,   │ Goes where it's needed most, │ ← what it does:
+│ 2-hour training. You test  │ lab checks and data        │ last year mostly to lab      │   --t-body, 3–5 lines
+│ one stretch of river once  │ hosting for a year. Your   │ checks.                      │
+│ a month and post results.  │ name goes on its page.     │                              │
+│                            │                            │                              │
+│ After you sign up: we      │ After you sign up: a       │ After you give: a receipt    │ ← what happens next:
+│ email training dates near  │ welcome email with your    │ for Gift Aid by email.       │   --t-small, ink-2
+│ you within a week.         │ site's latest results.     │                              │
+│                            │                            │                              │
+│ [ Become a tester ]        │ [ Adopt a site ]           │ Donate once →                │ ← own action each;
+│                            │                            │                              │   one primary on page
+│ ──────────────────────────────────────────────────────────────────────────────────────── │
+│ River Watch is a registered charity, no. 1189421. Gift Aid adds 25% to UK donations.     │ ← facts line, --t-caption
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+  vertical hairlines between columns; titles, asks and buttons each on one baseline
+```
+
+```
+390 ─ side padding 16; one column, ruled
+┌──────────────────────────────┐
+│ H2                           │
+│ lead                         │
+│ ──────────────────────────── │
+│ Test a river                 │
+│ 2 hours a month              │
+│ what it does, 3–5 lines      │
+│ after you sign up: …         │
+│ [ Become a tester ] full w.  │
+│ ──────────────────────────── │
+│ Adopt a site                 │
+│ …                            │
+│ ──────────────────────────── │
+│ charity facts                │
+└──────────────────────────────┘
+```
+
+At 390 the choices stack as a ruled list in the same order, each block ending in its own full-width button (44px+). The most common way in comes first. The facts line stays at the end.
+
+## Finish
+
+- Columns: no cards, no fills, no shadows. 1px `--hairline` above and below the row and between columns (or `--s-7` gaps and no vertical rules; one or the other). It reads like a printed leaflet folded in three.
+- Choice title: `--t-h3`, the display face, `--ink`. The ask: `--t-lead`, weight 600, `tabular-nums`, `--ink` (“2 hours a month”, “£8 a month”, “$4,500 a term”). Body: `--t-body`, `--ink`, max 34ch, `text-wrap: pretty`. Next step: `--t-small`, `--ink-2`, starting “After you sign up:”.
+- Actions: one per column, labelled with the action (“Become a tester”, “Adopt a site”). The organisation's main ask is the page's `.btn-primary`; the others are secondary buttons or text links. Never three filled buttons. Buttons share one baseline (flex column, action pushed down).
+- Alignment: titles, asks, and buttons on shared baselines across the columns (P01).
+- Facts line: `--t-caption`, `--ink-2`, charity or 501(c)(3) number, tax facts (“Donations are tax-deductible”), a link to the annual accounts.
+- Ground: a change from the previous section (`--paper-2` if it was `--paper`), or a dark band if the page uses one at the end (move `dark-band-contrast-section` elsewhere). A real photograph of volunteers at work may sit above the row, captioned; never stock hands holding a heart.
+- No icons above the choices. If the organisation has a real object for each (a test kit, a library tag, a club laptop), a small photograph of it at 4:3 above the title is better.
+
+## Content
+
+- Every number is real and from the organisation: hours asked, amounts, what an amount pays for (“£15 buys a learner's books for a term”).
+- Say what the person will actually do (“test one stretch of river once a month”), including the boring parts (training, a DBS check for mentors working with children).
+- Say what happens after the click, with a time (“within a week”, “matched within 3 weeks”).
+- Sliding scales stated plainly (“$0 to $80 a year; suggested $40”).
+- No guilt (“Every second you wait…”), no fake urgency, no matched-donation claims that aren't real.
+
+## States and motion
+
+- Static. Buttons have hover, press and focus states per `_finish.md`.
+- No progress thermometer unless the campaign is real, current and its total is sourced; then it is a plain line (“£18,400 of £25,000 raised by 1 Nov”), not an animated bar.
+- Each action goes to its own short form or payment page; if a form is inline, it is one step and confirms in words.
+
+## Pitfalls
+
+- Three pricing-style cards with icons, a “Most popular” badge on the middle one, and a glowing donate button: SaaS pricing chrome on a charity.
+- Guilt copy, countdowns or fake urgency.
+- “Get involved” with no commitment stated, so nobody knows if it's an hour or a year.
+- Hiding the volunteer option below the donate one when volunteers are what the organisation actually needs.
+- Stock photography of smiling volunteers that aren't theirs.
+- A donation progress bar with invented numbers.
+
+## Floor checks
+
+- Are there two or three distinct ways to take part, each with its own action?
+- Does each way state its commitment plainly (hours or an amount and how often)?
+- Does each way say what it does, in concrete terms?
+- Does each way say what happens after you click?
+- Is there exactly one primary action, with the others secondary?
+- Is the section free of pricing-style cards, popularity badges, icon tiles and guilt or urgency copy?
+- Is there a line with the organisation's legal or tax facts?
+- At 390, do the choices stack in one column, each with a full-width action and nothing scrolling sideways?