Card — dashboard tile (360 × 420 fixed)

/* style.css — cookbook/8-card — `.demo-mini-builder--card`.
 *
 * Self-contained chrome variant (W6.C.B.8). Pair this file with init.js
 * (sibling) and dist/builder.css + dist/builder.js, and you have a fully-
 * working card-shaped Builder mount in 4 files. NO shared mini-builder.css.
 * NO examples.css. The `.demo-mini-builder--card` rules below ARE the
 * variant — copy them verbatim into your own stylesheet.
 *
 * ─── Buyer use case ─────────────────────────────────────────────────
 * Builder embedded as a dashboard widget tile alongside other small
 * cards (analytics widgets, status panels, quick-action buttons).
 * Fixed 360 × 420 footprint + rounded corners + drop shadow makes it
 * read as one card among many — not as the page's primary surface.
 * Pick this when:
 *
 *   - Your host app's main surface is a dashboard / cards grid where
 *     the Builder is one of N tiles, not the page-defining feature.
 *   - You need a predictable, small footprint that doesn't fight for
 *     attention with surrounding components.
 *   - Buyers preview / quick-edit a single email or page block here
 *     and "expand" elsewhere for the full editor.
 *
 * The defining property: explicit `width: 360px; height: 420px` — the
 * ONLY variant with hardcoded pixel dimensions (every other cookbook
 * variant uses `width: 100%` and a flexible height). The card's
 * dimensions are part of its identity; locked by the cookbook spec's
 * variant-defining-property gate (`card has fixed width + height`).
 *
 * ─── Constructor null-args (W6.A.A.1 null-tolerance) ────────────────
 *   new Builder({
 *       mainContainer:     '#YourCardCanvas',
 *       widgetsContainer:  null,   // ← no widgets palette
 *       settingsContainer: null,   // ← no settings sidebar
 *   });
 * The engine skips the omitted mounts cleanly — no NPE, no console
 * error, regardless of whether DOM nodes exist for them. Same pattern
 * as `cookbook/1-minimal/` and `cookbook/6-canvas-only/`.
 *
 * ─── Tokens consumed (already exposed by dist/builder.css) ──────────
 *   --bjs-bg, --bjs-bg-subtle, --bjs-border, --bjs-border-light,
 *   --bjs-radius-md, --bjs-radius-lg, --bjs-shadow,
 *   --bjs-text, --bjs-text-secondary, --bjs-primary,
 *   --bjs-fs-sm, --bjs-fs-base, --bjs-space-2, --bjs-space-3.
 */

/* ─── Base wrapper (header + canvas grid) ─────────────────────────── */
.demo-mini-builder {
    display: grid;
    border: 1px solid var(--bjs-border);
    background: var(--bjs-bg);
    color: var(--bjs-text);
    font-size: var(--bjs-fs-base);
    overflow: hidden;
    box-sizing: border-box;
    grid-template-areas: "canvas";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.demo-mini-builder *,
.demo-mini-builder *::before,
.demo-mini-builder *::after { box-sizing: border-box; }

.demo-mini-builder__header,
.demo-mini-builder__canvas {
    overflow: auto;
    min-height: 0;
    min-width: 0;
}

.demo-mini-builder__header {
    grid-area: header;
    background: var(--bjs-bg-subtle);
    border-bottom: 1px solid var(--bjs-border-light);
    padding: var(--bjs-space-2) var(--bjs-space-3);
    display: flex;
    align-items: center;
    gap: var(--bjs-space-2);
    font-size: var(--bjs-fs-sm);
    font-weight: 500;
    color: var(--bjs-text-secondary);
}

.demo-mini-builder__canvas {
    grid-area: canvas;
    background: var(--bjs-bg);
    position: relative;
}

/* ─── Variant: --card ──── 360 × 420 dashboard tile ───────────────── *
 * Explicit pixel dimensions are the variant's defining property — the
 * cookbook spec's `card has fixed width + height` test asserts the
 * computed `width` is `360px` and `height` is `420px`. Don't change
 * these without bumping the spec; the dimensions ARE the contract.
 *
 * The 40 px header row is just enough for a tile title + a small
 * primary action (e.g. Save). Drop-shadow makes the card lift off
 * the dashboard background — same visual language as analytics tiles.
 */
.demo-mini-builder--card {
    width: 360px;
    height: 420px;
    border-radius: var(--bjs-radius-lg);
    box-shadow: 0 4px 16px var(--bjs-shadow);
    grid-template-areas:
        "header"
        "canvas";
    grid-template-rows: 40px 1fr;
}

/* ─── Card title + Save button (in-wrapper header) ─────────────────
 * Title takes the leading flex space; Save is pushed to the trailing
 * edge by `margin-left: auto`. Save uses the engine's primary-tone
 * tokens so the card reads as "primary action lives here" without
 * needing a custom palette.
 */
.demo-mini-builder--card .demo-mini-builder__header {
    padding: 0 var(--bjs-space-3);
}

.demo-mini-builder--card .demo-card-title {
    color: var(--bjs-text);
    font-weight: 600;
    font-size: var(--bjs-fs-sm);
    letter-spacing: 0.01em;
}

.demo-mini-builder--card .demo-card-save {
    appearance: none;
    -webkit-appearance: none;
    margin-left: auto;
    border: 1px solid var(--bjs-primary);
    background: var(--bjs-primary);
    color: var(--bjs-text-on-primary, #fff);
    padding: 4px 12px;
    border-radius: var(--bjs-radius-md);
    font: inherit;
    font-size: var(--bjs-fs-sm);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.demo-mini-builder--card .demo-card-save:hover {
    filter: brightness(1.06);
}
.demo-mini-builder--card .demo-card-save:focus-visible {
    outline: 2px solid var(--bjs-primary);
    outline-offset: 2px;
}
.demo-mini-builder--card .demo-card-save:active {
    transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
    .demo-mini-builder, .demo-mini-builder *,
    .demo-mini-builder--card .demo-card-save { transition: none; }
}

// init.js — cookbook/8-card.
//
// Mounts a Builder instance into the `.demo-mini-builder--card` scaffold
// rendered alongside this file. Reads four named globals (BUILDER.md
// RULE I split-globals convention):
//
//     window.THEME_JSON        — page tree (the sample JSON)
//     window.THEME_TEMPLATES   — { templateKey: HTML EJS string }
//     window.THEME_CONFIG_DATA — theme's index.json verbatim
//     window.MEDIA_URL         — base URL for relative asset paths
//
// W6.A.A.1 null-tolerance — passing `null` for both `widgetsContainer`
// and `settingsContainer` makes the engine skip those sub-system mounts
// cleanly. Same DOUBLE null-arg pattern as `cookbook/1-minimal/` and
// `cookbook/6-canvas-only/`. The card variant adds a 40-px in-wrapper
// `__header` slot for a title + Save button (vs minimal's 36-px
// header, vs canvas-only's host toolbar above the wrapper).
//
// Engine boots in 'preview' mode → call `setMode('design')` after
// `load()` so the canvas accepts edits the moment the buyer clicks
// inside the tile. (See `cookbook/4-rich-3col-header/` for the
// discovery context.)

(function () {
    'use strict';

    var canvas = document.getElementById('CookbookCardCanvas');
    if (!canvas || typeof window.Builder !== 'function') return;

    var builder = new window.Builder({
        mainContainer:     '#CookbookCardCanvas',
        widgetsContainer:  null,
        settingsContainer: null,
        historyUI:         false
    });

    builder.load(
        window.THEME_JSON,
        window.THEME_TEMPLATES,
        window.THEME_CONFIG_DATA,
        window.MEDIA_URL,
        function () {
            // 2026-05-09 — demo defaults to 'preview' (engine default)
            // per the "no debug overlays unless this example IS the
            // mode-toggle showcase" rule. Card chrome is the lesson; mode
            // is orthogonal. Buyer wanting design-on-boot calls
            // `builder.setMode('design')` here.

            // Save lives INSIDE the wrapper's `__header` slot (same
            // pattern as `cookbook/1-minimal/`, contrast with the host-
            // toolbar pattern shared by `2-compact-2col` / `3-compact-
            // 3col` / `5-sidebar-only` / `6-canvas-only` / `7-mobile`).
            // Production hosts swap the alert for a `fetch()` POST.
            var saveBtn = document.getElementById('CookbookCardSave');
            if (saveBtn) {
                saveBtn.addEventListener('click', function () {
                    var html = builder.getHtml();
                    var data = builder.getData();
                    alert(
                        'Saved · ' + html.length + ' chars HTML, ' +
                        Object.keys(data).length + ' top-level page-tree keys.'
                    );
                });
            }

            // Expose for buyer-side debugging + spec assertions.
            window.cookbookCardBuilder = builder;
        }
    );
})();