Skip to content

cookiebite v0.3.0

Choose a tag to compare

View all tags
@korECM korECM released this 18 Jun 00:54
· 200 commits to main since this release
v0.3.0
e6ad075

Moves the invariant report boilerplate into a hosted runtime and adds declarative fast-path helpers, so the model emits far less HTML per report — without giving up any authoring freedom. Delivery is inline-only: reports stay single, self-contained files with no CDN dependency.

Fast-path runtime — assets/cookiebite.js + cookiebite.css (new)

  • The invariant boilerplate (Tailwind config, theme tokens, number helpers, baseChart, dark toggle, TOC observer, card hydration) now lives in the runtime — 0 model tokens per report instead of being re-emitted every time.
  • 6 declarative helpers — COOKIEBITE.kpis / findings / timeline / table / chart / pill·callout — render the repetitive ~80% (KPI cards, tables, findings, timelines, chart wrappers) from a data array.
  • Escape hatch kept wide open. Anything bespoke stays raw HTML reaching exposed primitives (theme tokens, baseChart, accentRgba, deepMerge) and stays on-theme + dark-aware. Nothing is forced through the declarative API.
  • ~45–55% fewer model output tokens on metric/incident reports.

Inline delivery — scripts/inline.sh (new)

  • The template references the runtime via ./assets placeholders; inline.sh folds the runtime in to produce the self-contained, double-clickable deliverable.
  • No CDN reference and no release tag required for reports to work.

Fixed (rendering bugs caught by the visual self-check)

  • Tailwind ordering. The Play CDN must load before the runtime sets tailwind.config, or the custom spacing/type scale is ignored (p-20 fell back to 5rem → bloated cards, vertically-wrapped Korean labels). Reordered Tailwind ahead of cookiebite.js.
  • COOKIEBITE.table never rendered. It appended its right-align <style> to the host before grid.render(), and Grid.js refuses a non-empty container. The scoped style now goes to document.head.
  • Timeline collapse. Load the @alpinejs/collapse plugin (COOKIEBITE.timeline uses x-collapse).
  • Grid.js dark mode. Neutralize mermaid's white td/tr/tbody backgrounds so the surface token shows through (readable in dark).

Verified by rendering the template in light + dark + narrow with scripts/verify-report.sh.

Full changelog: v0.2.1...v0.3.0

Assets 2
Loading