blipjot mockups

Mockup standards (in effect 2026-05-16)

BLIPJOT MOCKUP STANDARDS v2026.05.16:
- filename: mockup-{feature}-v{YYYY.MM.DD}.{NN}.html (CalVer, never overwrite)
- always deploy to infra.jetblip.com/public/
- always mobile-first (390px primary viewport)
- always include: ⚙ gear toggle for debug/config panels
- always include: config export (human-readable + CSS vars + copy buttons)
- always include: save to localStorage + restore on reload
- always include a "📋 All mockups" link in the page header pointing to
  https://infra.jetblip.com/blipjot-mockups so navigation between versions
  requires zero copy-paste
- search only appears in headers where the content is searchable.
  secondary sheets (More, Customize) show only the theme toggle on
  the right; the primary drawer header gets [🔍 44×44] + [☀ 44×44].
- every interactive element must carry a bj-{sheet}-{element} id
  (e.g. bj-head-search, bj-more-bookmark, bj-prefs-save). NO numbers
  in bj-* ids — names must be self-describing; if two elements seem
  similar, make the name more specific instead of suffixing a digit.
- hover tooltips load descriptions from /blipjot-ids.json at runtime
  (one glossary feeds every mockup and every production page).
  Tooltip appears after 600ms hover, dismisses on mouseout, skipped
  on touch devices. Update the JSON → tooltips update everywhere.
- when adding a new element, add its id + description to the
  glossary FIRST, then add the id to the HTML.
- sheet headers are generated by a single renderSheetHeader()
  function — never hardcode header HTML in more than one place.
  Any future change to the header happens once in renderSheetHeader
  and applies to every sheet automatically.
- every deploy must update blipjot-manifest.json with the new
  version entry. blipjot-mockups.html reads from the manifest at
  runtime — never edit the index HTML directly to add a version.
- session start → read https://infra.jetblip.com/blip-rules/INDEX.md
  first, then load only the category files relevant to the current
  task. Categories: architecture/sheets, architecture/ids-and-tooltips,
  css/patterns, css/antipatterns, javascript/event-handling,
  javascript/search-toggle, workflow/deploy-checklist,
  workflow/efficiency, mockups/standards.
- never use external dependencies
- approved configs saved to blipjot-mockups.html index (driven by
  blipjot-manifest.json)