Catalogue: what each element needs from the client

[ecropolis]

First step of favourites-to-requests §1 (library before site, engine, portal). Each element now says what the client has to give us before it can be built on their site. The portal will make each ask a request-form field, and the engine will name a missing required one as a gap.

What changed

• Ask and Element.asks?: Ask[] in src/data/catalog.ts, typed exactly as the design note has them ({ key, label, hint?, required? }). Ask is exported.
• Asks for 27 elements, written for the client in sentence case. The four examples in the design note are used as written: business-hours hours, countdown ends_at / after, map addresses, and social-grid handle / consent.
• Gallery pages list the asks under the demo as "What the client needs to give you", with required ones marked and hints beneath. There are no per-element README files in this repo. The element's gallery page is its README, generated from the catalogue, so the list cannot drift. The check still compares the built page with the catalogue.
• scripts/check-catalog.mjs pins:
  • key shape ^[a-z][a-z0-9_]*$, at most 40 characters, unique within the element
  • label 1 to 120 characters, sentence case, with no closing full stop or colon
  • hint at most 200 characters
  • required is a boolean
  • between 1 and 6 asks when present (an empty list is refused, so leave the field out instead)
  • no fields beyond the four
  • every element in NEEDS_INPUT has at least one required ask
  • each built page lists exactly its entry's asks, keys, order and required marks
• Root README: asks is added to "Adding an element", to the check's list and to the table of what the website reads.

The superhero-ui-library skill is not touched. Another pass updates it.

Which elements got asks

Required input (22, pinned in NEEDS_INPUT):

• accordion, announcement-bar, before-after, business-hours, content-toggle, countdown, flip-box, hotspot, info-circle, info-list, map, modal
• news-ticker, responsive-table, slide-box, social-grid, tabcordion, tabs, testimonial-carousel, video-background, video-gallery, video-player

Optional asks only (5):

• icon: which icons, and where. We can choose them.
• sticker: what each sticker says and which items carry it.
• animated-text: the line and which words move. We can suggest one from the brief.
• parallax-band: a wide photo, if they have one.
• card-slider: what each card shows, if it is not already on the site.

Deliberately none (16):

• cookie-consent: the container and IDs are ours, and the privacy link is the site's own.
• mega-menu, off-canvas, menu-button: built from the site's own pages and navigation.
• scrollbox, tags: they present content the site already has.
• toast, notice, loading, stepper, radio-group, tooltip: their words come from the feature or form they sit in, which the brief describes.
• link-effects, scroll-reveal, particle-field, animated-background: styling and motion only.

Judgement calls to review

• Modal: trigger is optional, because opening on a button press is a sound default. message is required.
• Business hours: this has three asks. The time zone is a required ask of its own, and holidays are optional. The design note folded the zone into the hint.
• Map: the Directions link is always on the card, so the optional ask is whether to add the click-to-load map.
• Content-toggle and responsive-table: both have a required ask, because neither exists without the client's two versions or their data.

Verification

• npm run check is green: 43 elements, 43 pages built, 27 with asks.
• The check refused each of 10 planted faults: duplicate key, bad key, map's required ask removed, a string required, a lowercase label, a 201-character hint, an empty asks, seven asks, a page label that differs, and a page missing its required marks.
• Headless Chromium rendered the business-hours page at 900px and the testimonial-carousel page at 375px, with no horizontal overflow. The loading page has no client-needs section.

🤖 Generated with Claude Code