/* style.css — cookbook/5-sidebar-only — `.demo-mini-builder--sidebar-only`. * * Self-contained chrome variant (W6.C.B.5). 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--sidebar-only` rules below ARE * the variant — copy them verbatim into your own stylesheet. * * ─── Buyer use case ───────────────────────────────────────────────── * "Edit in place" feel. Canvas takes the full wrapper area; the * Settings panel floats absolutely top-right with shadow + rounded * corners. No widgets palette, no inline sidebar — everything that * isn't the canvas hovers over it. Pick this when the host page is * primarily a viewer and edits are occasional / per-element rather * than continuous: a customer's CMS page, a marketing landing review, * a "preview-mostly + tweak when needed" UX. * * ─── No header slot, no widgets palette ──────────────────────────── * Variant declares NO `__header` slot — Save / etc. live OUTSIDE the * wrapper in a `.demo-host-toolbar`, same convention as `2-compact-2col` * and `3-compact-3col`. Buyers learn ONE rule: if the variant has a * header slot, put chrome there; otherwise host toolbar above the * wrapper. * * The wrapper passes `widgetsContainer: null` — the W6.A.A.1 null- * tolerance contract skips the palette mount cleanly. Buyers who want * a palette pick `3-compact-3col` (inline column) or `4-rich-3col- * header` (inline column + in-wrapper header) instead. * * ─── Constructor (single null arg) ───────────────────────────────── * new Builder({ * mainContainer: '#YourCanvas', * widgetsContainer: null, // no palette * settingsContainer: '#YourFloatingSettings', * }); * * ─── Tokens consumed (already exposed by dist/builder.css) ────────── * --bjs-bg, --bjs-bg-subtle, --bjs-border, --bjs-border-light, * --bjs-radius-lg, --bjs-radius-md, --bjs-text, --bjs-text-secondary, * --bjs-fs-sm, --bjs-fs-base, --bjs-space-2, --bjs-space-3, * --bjs-space-5, --bjs-shadow, --bjs-primary. */ /* ─── Base wrapper (canvas-only fallback shape) ───────────────────── * Same canvas-only base as C.B.6 will use — single grid cell, the * variant's own rules layer the floating settings panel on top via * absolute positioning. The wrapper itself is `position: relative` so * the absolute settings panel anchors to it, not to the page . */ .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, .demo-mini-builder__settings { overflow: auto; min-height: 0; min-width: 0; } .demo-mini-builder__canvas { grid-area: canvas; background: var(--bjs-bg); position: relative; } /* ─── Variant: --sidebar-only ── floating Settings overlay ─────────── */ .demo-mini-builder--sidebar-only { position: relative; } .demo-mini-builder--sidebar-only .demo-mini-builder__settings { /* Absolute positioning lifts the panel out of the grid flow so the * canvas can use the full wrapper width. `inset:

* auto auto` parks the panel `` from the top edge and * `` from the right edge; `auto auto` on bottom + left lets * the panel size itself by content (capped by `max-height` below). * * `min-height` keeps the panel visually present even when it has * no selected element to render — without it, the panel collapses * to ~2 px (just the border) on first paint, which reads as "the * editor isn't ready" rather than "click an element to edit". */ grid-area: unset; position: absolute; inset: var(--bjs-space-3) var(--bjs-space-3) auto auto; width: 280px; min-height: 96px; max-height: calc(100% - var(--bjs-space-5)); border: 1px solid var(--bjs-border-light); border-radius: var(--bjs-radius-md); box-shadow: 0 4px 16px var(--bjs-shadow); background: var(--bjs-bg); overflow: auto; z-index: 10; /* Subtle entrance — the panel feels deliberate, not sudden, when * it appears on first paint or after a settings-driven re-render. */ transition: box-shadow 160ms ease, transform 160ms ease; } /* Empty-state placeholder. The engine renders nothing into the * settings container until an element is selected. For "edit in * place" UX, a buyer hitting the page should see a short hint * telling them what to do — that the panel exists and edits start * from the canvas, not from the panel itself. `:empty` matches * exactly when the panel has zero children; once the engine * renders the first set of controls, the rule stops applying and * the placeholder disappears. */ .demo-mini-builder--sidebar-only .demo-mini-builder__settings:empty { display: flex; align-items: center; justify-content: center; padding: var(--bjs-space-3); text-align: center; color: var(--bjs-text-secondary); font-size: var(--bjs-fs-sm); line-height: 1.4; } .demo-mini-builder--sidebar-only .demo-mini-builder__settings:empty::before { content: "Click any element on the canvas to edit its settings here."; } /* ─── Host toolbar ─────────────────────────────────────────────────── */ .demo-host-toolbar { display: flex; align-items: center; 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-mini-builder--sidebar-only .demo-mini-builder__settings, .demo-host-toolbar button { transition: none; } }