/* style.css — cookbook/6-canvas-only — `.demo-mini-builder--canvas-only`. * * Self-contained chrome variant (W6.C.B.6). Pair this file with init.js * (sibling) and dist/builder.css + dist/builder.js, and you have a fully- * working Builder mount in 4 files. NO shared mini-builder.css. NO * examples.css. The `.demo-mini-builder--canvas-only` rules below ARE * the variant — copy them verbatim into your own stylesheet. * * ─── Buyer use case ───────────────────────────────────────────────── * "No chrome at all." Canvas takes the entire wrapper area; the wrapper * itself drops border + radius + background so the page reads as a * bare-bones render — JUST the page, no surrounding editor frame. * NO widgets palette, NO settings panel, NO header. Pick this when: * * - The host app drives ALL mutations programmatically (server-side * AI generator, headless test rig, integration suite, ML pipeline). * - The host app already has its OWN UI shell for actions and only * needs the engine to render + accept programmatic edits. * - You're embedding the builder inside another tool that paints its * own chrome around the canvas (Storybook, internal admin tool, etc). * * The cookbook entry's host toolbar with "Select first" / "Toggle * preview" / "Save" buttons demonstrates the ALL-API pattern: every * action a chrome-rich variant offers via UI is reachable via a JS * method on `builder`. The toolbar lives OUTSIDE the wrapper; the * wrapper itself stays clean of UI. * * ─── Constructor (DOUBLE null arg) ───────────────────────────────── * new Builder({ * mainContainer: '#YourCanvas', * widgetsContainer: null, // no palette * settingsContainer: null, // no panel * }); * * The W6.A.A.1 null-tolerance contract skips both sub-system mounts * cleanly — no NPE, no console error, no empty-shell DOM. * * ─── Tokens consumed (already exposed by dist/builder.css) ────────── * --bjs-bg, --bjs-bg-subtle, --bjs-border-light, --bjs-radius-md, * --bjs-text, --bjs-text-secondary, --bjs-fs-sm, --bjs-fs-base, * --bjs-space-2, --bjs-space-3, --bjs-primary. */ /* ─── Base wrapper (single-cell grid; canvas takes everything) ────── * Same single-cell shape as the `--sidebar-only` base; the variant's * own modifier strips the framing (border + radius + bg) so the * wrapper visually dissolves and the page render reads as bare-bones. * 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__canvas { grid-area: canvas; background: var(--bjs-bg); overflow: auto; min-height: 0; min-width: 0; } /* ─── Variant: --canvas-only ── strip the frame ───────────────────── * The variant's defining property: no border, no radius, no * background. The wrapper visually dissolves; only the canvas * remains. A buyer reading the page sees the engine's render, not * a bordered editor card. This is THE rule that distinguishes * `--canvas-only` from every other variant — locked by the * cookbook spec's variant-defining-property gate. */ .demo-mini-builder--canvas-only { border: none; border-radius: 0; background: transparent; } .demo-mini-builder--canvas-only .demo-mini-builder__canvas { background: transparent; } /* ─── Host toolbar (lives OUTSIDE the wrapper) ────────────────────── * The variant has zero in-wrapper chrome, so EVERY action button — * Save, plus the API-demo buttons that prove the engine is fully * API-drivable — lives in a host toolbar above the canvas. Same * structural convention as `2-compact-2col`, `3-compact-3col`, and * `5-sidebar-only` (variants without an `__header` slot). * * Three buttons by default: * - "Select first element" — calls `builder.selectElement(...)`, * proving selection drives canvas highlights even with no * settings panel. * - "Toggle preview" — flips `builder.setMode('design'|'preview')`, * proving mode changes are API-driven. * - "Save" — `getHtml()` + `getData()` round-trip, * same Save pattern as every other cookbook entry. */ .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; } /* Pressed state for the Toggle Preview button — `aria-pressed="true"` * means we're currently in preview; tint the button so the buyer sees * the engine's mode at a glance even with no header/status indicator. */ .demo-host-toolbar button[aria-pressed="true"] { background: var(--bjs-bg-subtle); border-color: var(--bjs-primary); color: var(--bjs-primary); } @media (prefers-reduced-motion: reduce) { .demo-mini-builder, .demo-mini-builder *, .demo-host-toolbar button { transition: none; } }