Mobile — tab-based chrome (Widgets / Canvas / Settings)

/* style.css — cookbook/7-mobile — `.demo-mini-builder--mobile`.
 *
 * Self-contained chrome variant (W6.C.B.7). Pair this file with init.js
 * (sibling) and dist/builder.css + dist/builder.js, and you have a fully-
 * working mobile-first Builder mount in 4 files. NO shared mini-builder.css.
 * NO examples.css. The `.demo-mini-builder--mobile` rules below ARE the
 * variant — copy them verbatim into your own stylesheet.
 *
 * ─── Buyer use case ─────────────────────────────────────────────────
 * Mobile-first integration where canvas + sidebars don't fit side-by-side
 * at narrow viewports (375 px – 600 px). The wrapper renders THREE
 * sub-systems (widgets / canvas / settings) but only ONE is visible at
 * a time — buyers tap a tab in the top strip to swap which sub-system
 * fills the body. Pick this when:
 *
 *   - Your host app needs to ship a working Builder on a phone-sized
 *     viewport (in-app email composer, mobile CMS).
 *   - Your buyers are non-technical and prefer a tap-one-at-a-time flow
 *     over juggling 3 columns at once.
 *   - You want a chrome that scales: the same tab-based pattern reads
 *     the same at 375 px, 600 px, or 1024 px (no media queries needed).
 *
 * The defining property: only ONE sub-system slot has `display: block`
 * at any time — driven by the wrapper's `data-mobile-tab` attribute.
 * Tab clicks flip the attribute (see init.js's `wireTabSwitcher()`); the
 * CSS selectors below pick which slot becomes visible.
 *
 * ─── Constructor (no null args — all 3 wired) ──────────────────────
 *   new Builder({
 *       mainContainer:     '#YourCanvas',
 *       widgetsContainer:  '#YourWidgets',
 *       settingsContainer: '#YourSettings',
 *   });
 *
 * The W6.A.A.1 null-tolerance contract isn't needed here — every
 * sub-system is mounted to a real DOM id. Mobile chrome shows them
 * one-at-a-time visually but they're all live in the DOM, so the
 * engine fires events / renders settings / accepts drags as normal.
 *
 * ─── 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-text, --bjs-text-secondary,
 *   --bjs-fs-sm, --bjs-fs-base, --bjs-space-2, --bjs-space-3,
 *   --bjs-primary.
 */

/* ─── Base wrapper (single-column grid; tabs strip + tabbody) ───────
 * The mobile variant uses two extra slots (`__tabs` + `__tabbody`)
 * unique to this variant — the tabs strip is always-visible across the
 * top, the tabbody hosts widgets/canvas/settings stacked absolutely
 * with only one visible at a time. Height stays explicit because the
 * engine's iframe needs a sized host — `100%` would collapse to 0
 * inside an auto-sized parent.
 */
.demo-mini-builder {
    display: grid;
    width: 100%;
    height: 520px;
    border: 1px solid var(--bjs-border);
    border-radius: var(--bjs-radius-lg);
    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__tabs,
.demo-mini-builder__tabbody,
.demo-mini-builder__widgets,
.demo-mini-builder__canvas,
.demo-mini-builder__settings {
    overflow: auto;
    min-height: 0;
    min-width: 0;
}

/* ─── Variant: --mobile ── tab strip + stacked sub-systems ──────────
 * The variant's defining property: ONE sub-system visible at a time,
 * driven by `data-mobile-tab`. Any of `widgets` / `canvas` / `settings`
 * can be the active value — the matching `[data-mobile-tab="…"]`
 * descendant selector flips its `display` to `block` while the others
 * stay `display: none`. The active tab button gets `.is-active` +
 * `aria-selected="true"` for the underline + screen-reader cue.
 *
 * This is the rule that distinguishes `--mobile` from every other
 * variant — locked by the cookbook spec's variant-defining-property
 * gate (`mobile tab switcher flips data-mobile-tab + slot visibility`).
 */
.demo-mini-builder--mobile {
    grid-template-areas:
        "tabs"
        "tabbody";
    grid-template-rows: 44px 1fr;
}
.demo-mini-builder--mobile .demo-mini-builder__tabs {
    grid-area: tabs;
    display: flex;
    background: var(--bjs-bg-subtle);
    border-bottom: 1px solid var(--bjs-border-light);
}
.demo-mini-builder--mobile .demo-mini-builder__tab {
    flex: 1;
    padding: var(--bjs-space-3);
    text-align: center;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--bjs-text-secondary);
    font: inherit;
    font-size: var(--bjs-fs-sm);
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.demo-mini-builder--mobile .demo-mini-builder__tab:hover {
    color: var(--bjs-text);
    background: var(--bjs-bg);
}
.demo-mini-builder--mobile .demo-mini-builder__tab:focus-visible {
    outline: 2px solid var(--bjs-primary);
    outline-offset: -4px;
}
.demo-mini-builder--mobile .demo-mini-builder__tab.is-active {
    color: var(--bjs-text);
    border-bottom-color: var(--bjs-primary);
    background: var(--bjs-bg);
}

.demo-mini-builder--mobile .demo-mini-builder__tabbody {
    grid-area: tabbody;
    position: relative;
}
.demo-mini-builder--mobile .demo-mini-builder__widgets,
.demo-mini-builder--mobile .demo-mini-builder__canvas,
.demo-mini-builder--mobile .demo-mini-builder__settings {
    grid-area: unset;
    border: none;
    position: absolute;
    inset: 0;
    display: none;
}
.demo-mini-builder--mobile .demo-mini-builder__widgets {
    background: var(--bjs-bg-subtle);
    padding: var(--bjs-space-2);
}
.demo-mini-builder--mobile .demo-mini-builder__canvas {
    background: var(--bjs-bg);
}
.demo-mini-builder--mobile .demo-mini-builder__settings {
    background: var(--bjs-bg-subtle);
    padding: var(--bjs-space-2);
}
.demo-mini-builder--mobile[data-mobile-tab="widgets"]  .demo-mini-builder__widgets,
.demo-mini-builder--mobile[data-mobile-tab="canvas"]   .demo-mini-builder__canvas,
.demo-mini-builder--mobile[data-mobile-tab="settings"] .demo-mini-builder__settings {
    display: block;
}

/* ─── Host toolbar (lives OUTSIDE the wrapper) ──────────────────────
 * The mobile variant has no `__header` slot, so Save lives in a host
 * toolbar above the wrapper. Same structural convention as
 * `2-compact-2col`, `3-compact-3col`, `5-sidebar-only`, `6-canvas-only`.
 *
 * In a real mobile-first integration you'd typically push this into
 * the canvas tab (or onto the bottom of the device chrome) — host
 * apps differ on where the primary action lives. The toolbar here
 * teaches the wiring; geometry is up to you.
 */
.demo-host-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bjs-space-2);
    margin-bottom: var(--bjs-space-3);
    font-size: var(--bjs-fs-sm);
    color: var(--bjs-text-secondary);
}

.demo-host-toolbar__title {
    margin-right: auto;
    font-weight: 600;
    color: var(--bjs-text);
    font-size: var(--bjs-fs-base);
}

.demo-host-toolbar button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--bjs-border-light);
    background: var(--bjs-bg);
    color: var(--bjs-text);
    padding: 4px 10px;
    border-radius: var(--bjs-radius-md);
    font: inherit;
    font-size: var(--bjs-fs-sm);
    line-height: 1.2;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.demo-host-toolbar button:hover {
    background: var(--bjs-bg-subtle);
    border-color: var(--bjs-border);
}
.demo-host-toolbar button:focus-visible {
    outline: 2px solid var(--bjs-primary);
    outline-offset: 2px;
}
.demo-host-toolbar button:active {
    transform: translateY(1px);
}
.demo-host-toolbar button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

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

// init.js — cookbook/7-mobile.
//
// Mounts a Builder instance into the `.demo-mini-builder--mobile`
// 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
//
// All three sub-systems wired (no null args). The mobile variant shows
// only ONE sub-system at a time — driven by the wrapper's
// `data-mobile-tab` attribute. The CSS in style.css picks which slot
// becomes visible based on the attribute value; this init.js wires the
// tab buttons to flip the attribute on click.
//
// Save lives OUTSIDE the wrapper in a host toolbar (same convention as
// `2-compact-2col` / `3-compact-3col` / `5-sidebar-only` / `6-canvas-only`).
// Real host apps typically push the primary action onto the bottom of
// the device chrome instead — the host toolbar here teaches the wiring,
// not the placement.
//
// Engine boots in 'preview' mode → call `setMode('design')` after `load()`
// so the canvas accepts edits + selections from the first tab tap.
// (See `cookbook/4-rich-3col-header/` for the discovery context.)

(function () {
    'use strict';

    var canvas   = document.getElementById('CookbookMobileCanvas');
    var widgets  = document.getElementById('CookbookMobileWidgets');
    var settings = document.getElementById('CookbookMobileSettings');
    if (!canvas || !widgets || !settings || typeof window.Builder !== 'function') return;

    var builder = new window.Builder({
        mainContainer:     '#CookbookMobileCanvas',
        widgetsContainer:  '#CookbookMobileWidgets',
        settingsContainer: '#CookbookMobileSettings',
        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. Buyer wanting design-on-boot
            // calls `builder.setMode('design')` here.

            // Curate the widget palette. Engine ships every widget class
            // as a top-level `window.<Name>Widget` global; pick the ones
            // you want, set their group label, then call
            // `widgetsBox.render()` to draw the palette tiles. Same
            // pattern as `cookbook/3-compact-3col/`.
            registerWidgets(builder);

            // Wire the tab strip. Mobile chrome's defining behaviour:
            // tap a tab → flip wrapper's `data-mobile-tab` → CSS swaps
            // which sub-system slot is visible.
            wireTabSwitcher();

            // Save lives OUTSIDE the wrapper.
            wireSave(builder);

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

    /**
     * Register a representative widget set. Buyers customise this list
     * by adding their own widget classes (see the `cookbook/.../extensions/`
     * examples) or by curating which built-ins ship.
     *
     * @param {Builder} b
     */
    function registerWidgets(b) {
        var basic = [
            'ParagraphWidget', 'HeadingWidget', 'DividerWidget',
            'ImageWidget',     'ButtonWidget',  'GridWidget',
        ];
        basic.forEach(function (name) {
            var W = window[name];
            if (typeof W === 'function') {
                b.widgetsBox.addWidget(new W(), { group: 'Basic' });
            }
        });

        var imageText = [
            'ImageTextLeftWidget', 'ImageTextRightWidget', 'ImageTextTopWidget',
        ];
        imageText.forEach(function (name) {
            var W = window[name];
            if (typeof W === 'function') {
                b.widgetsBox.addWidget(new W(), { group: 'Image & Text', type: 'image' });
            }
        });

        b.widgetsBox.render();
    }

    /**
     * Wire every tab button under the mobile wrapper. Click flips the
     * wrapper's `data-mobile-tab` to the button's `data-tab` value; the
     * CSS in style.css picks which sub-system slot becomes visible.
     * Also flips `is-active` + `aria-selected` for the active-tab
     * underline + screen-reader cue.
     *
     * Buyers copy this verbatim — the wiring scales unchanged across
     * 1, 2, or N mobile builders on the same page (each `forEach`
     * loop scopes by wrapper).
     */
    function wireTabSwitcher() {
        document.querySelectorAll('.demo-mini-builder--mobile').forEach(function (wrap) {
            wrap.querySelectorAll('.demo-mini-builder__tab').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var nextTab = btn.getAttribute('data-tab');
                    if (!nextTab) return;
                    wrap.setAttribute('data-mobile-tab', nextTab);
                    wrap.querySelectorAll('.demo-mini-builder__tab').forEach(function (b) {
                        var active = b === btn;
                        b.classList.toggle('is-active', active);
                        b.setAttribute('aria-selected', String(active));
                    });
                });
            });
        });
    }

    /**
     * Save — `getHtml()` + `getData()` round-trip. Production hosts
     * swap the alert for a `fetch()` POST to their backend. Identical
     * pattern to every other cookbook entry's Save.
     *
     * @param {Builder} b
     */
    function wireSave(b) {
        var saveBtn = document.getElementById('CookbookMobileSave');
        if (!saveBtn) return;
        saveBtn.addEventListener('click', function () {
            var html = b.getHtml();
            var data = b.getData();
            alert(
                'Saved · ' + html.length + ' chars HTML, ' +
                Object.keys(data).length + ' top-level page-tree keys.'
            );
        });
    }
})();