domma-cms 0.75.0 → 0.77.0

package/admin/js/templates/block-editor.html

@@ -1,228 +1,219 @@
-<div class="view-header">
-    <h1><span data-icon="box"></span> <span id="block-editor-title">New Block</span></h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <select id="block-quick-switch" class="form-input form-input--sm"
-                title="Switch to another block"
-                style="display:none;max-width:260px;">
-            <option value="">Switch to…</option>
+<!-- Block editor. Bound with M.applyBindings - see admin/js/views/block-editor.js, which also inserts the
+     sample-data row template (the router renders a templateUrl through _.render, eating any {{…}} - so the
+     placeholder text below is written as &#123;&#123;…&#125;&#125;). No page heading: the Tool banner above
+     is the heading ("Blocks › <name>"), and All blocks, Copy shortcode and Save are banner actions.
+     #block-editor-body stays: admin.css lifts the view-width cap on it. -->
+<div class="bex-page">
+<div class="bex">
+    <div class="bex-bar">
+        <div class="bex-ident">
+            <strong data-bind-text="titleText"></strong>
+            <small data-bind-text="metaText.value"></small>
+            <span class="bex-chip is-warn" data-bind-hidden="!dirty.value" title="Changes not saved yet">Unsaved</span>
+        </div>
+        <span class="bex-spacer"></span>
+        <select id="block-quick-switch" class="form-input form-input--sm bex-switch" aria-label="Open another block" title="Open another block" data-bind-hidden="isNew">
+            <option value="">Open another block…</option>
         </select>
-        <a href="#/blocks" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Blocks
-        </a>
-        <button id="save-block-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save Block
-        </button>
     </div>
-</div>
 
-<!-- Block Name -->
-<div class="card card-collapsible mb-3">
-    <div class="card-header">
-        <h2>Block Name</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    <div class="bex-unsaved" data-bind-hidden="!dirty.value">
+        <span data-icon="alert-circle" data-icon-size="15"></span>
+        <span>You have unsaved changes.</span>
+        <span class="bex-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannotSave.value">
+            <span data-icon="save" data-icon-size="13"></span> Save</button>
     </div>
-    <div class="card-body" style="max-width:420px;">
-        <label class="form-label">Name <span style="color:var(--dm-danger,#f87171);">*</span></label>
-        <input id="block-name" type="text" class="form-input" placeholder="e.g. feedback-card">
-        <small class="text-muted">Lowercase letters, digits, and hyphens only. Cannot be changed after creation.</small>
-        <div class="mt-3">
-            <label class="form-label">Project</label>
-            <select id="block-project" class="form-input">
-                <option value="">- none -</option>
-            </select>
-            <small class="text-muted">Tag this block to a project for grouping.</small>
-        </div>
-        <div class="mt-3">
-            <label class="form-check-label" title="Included in fresh installs via the seed script">
-                <input id="block-bundled" type="checkbox" class="form-check"> Bundled
-            </label>
-        </div>
-    </div>
-</div>
 
-<!-- HTML Editor + Preview -->
-<div class="card card-collapsible editor-card mb-3">
-    <div class="card-header">
-        <h2>Template HTML</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
-    </div>
-    <div class="card-body p-0">
-
-        <!-- Toolbar -->
-        <div id="block-editor-toolbar" class="editor-toolbar">
-            <button type="button" class="btn btn-ghost btn-sm" data-action="undo" title="Undo (Ctrl+Z)">
-                <span data-icon="corner-up-left"></span>
-            </button>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="redo" title="Redo (Ctrl+Y)">
-                <span data-icon="corner-up-right"></span>
-            </button>
-            <span class="editor-toolbar-sep"></span>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="cut" title="Cut (Ctrl+X)">
-                <span data-icon="scissors"></span>
-            </button>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="copy" title="Copy (Ctrl+C)">
-                <span data-icon="copy"></span>
-            </button>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="paste" title="Paste (Ctrl+V)">
-                <span data-icon="clipboard"></span>
-            </button>
-            <span class="editor-toolbar-sep"></span>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="select-all" title="Select All (Ctrl+A)">
-                <span data-icon="maximise-2"></span>
-            </button>
-            <button type="button" class="btn btn-ghost btn-sm" data-action="format" title="Format HTML">
-                <span data-icon="code"></span> Format
-            </button>
-
-            <!-- View mode toggles (right side) -->
-            <div class="editor-toolbar-right">
-                <span id="block-cursor-pos"
-                      style="font-size:.75rem;color:var(--dm-text-muted,#888);margin-right:.5rem;">Ln 1, Col 1</span>
-                <span class="editor-toolbar-sep"></span>
-                <button type="button" class="editor-view-btn" data-mode="write" title="Edit only">
-                    <span data-icon="edit-2"></span>
-                </button>
-                <button type="button" class="editor-view-btn active" data-mode="split" title="Split view">
-                    <span data-icon="columns"></span>
-                </button>
-                <button type="button" class="editor-view-btn" data-mode="preview" title="Preview only">
-                    <span data-icon="eye"></span>
-                </button>
+    <!-- Details -->
+    <div class="bex-card">
+        <div class="bex-card-title">Details</div>
+        <div class="bex-grid">
+            <div>
+                <label class="form-label" for="block-name">Name <span class="text-danger">*</span>
+                    <span data-help-title="Name" data-help="The block's id - what a shortcode names (block=&quot;…&quot;) and what its CSS is scoped to. Lowercase letters, digits and hyphens; it cannot be changed once the block exists, and a new block cannot take a name already in use."></span></label>
+                <input id="block-name" type="text" class="form-input font-mono" maxlength="80" placeholder="e.g. feedback-card"
+                       data-model="name.value" data-bind-disabled="notNew" autocomplete="off">
+                <small class="bex-err" data-bind-hidden="!nameErr.value" data-bind-text="nameErr.value"></small>
+            </div>
+            <div>
+                <label class="form-label" for="block-project">Project
+                    <span data-help="Files the block under a project - for the project's sidebar section and access scope. Optional."></span></label>
+                <select id="block-project" class="form-input" data-model="project.value">
+                    <option value="">- none -</option>
+                </select>
+            </div>
+            <div class="bex-setting">
+                <label class="form-label" for="block-bundled">Bundled
+                    <span data-help="Shipped with fresh installs by the seed script. Leave it off for a block that belongs to this site only."></span></label>
+                <input id="block-bundled" type="checkbox" class="form-switch" data-model="bundled.value">
             </div>
         </div>
+    </div>
 
-        <!-- Editor body - split pane -->
-        <div id="block-editor-body" class="editor-body editor-mode-split" style="min-height:460px;">
-
-            <!-- Write pane -->
-            <div class="editor-pane editor-pane--write" style="flex-direction:row;overflow:hidden;">
-                <div id="block-line-numbers" class="editor-line-numbers">1</div>
-                <textarea id="block-content" class="editor-textarea"
-                          spellcheck="false"
-                          placeholder="<div class=&quot;card mb-3&quot;>&#10;  <div class=&quot;card-body&quot;>&#10;    <h3>&#123;&#123;title&#125;&#125;</h3>&#10;    <p>&#123;&#123;message&#125;&#125;</p>&#10;  </div>&#10;</div>"></textarea>
+    <!-- Template HTML + preview -->
+    <div class="bex-card bex-editor-card">
+        <div class="bex-card-title">Template HTML
+            <span data-help-title="Template" data-help="The block's HTML. &#123;&#123;field&#125;&#125; inserts an entry's value (HTML-escaped); &#123;&#123;field:DD MMM YYYY&#125;&#125; formats it as a date. The preview fills each placeholder from the sample values beside it. HTML comments are stripped when the block is rendered."></span>
+        </div>
+        <div class="bex-toolbar" role="toolbar" aria-label="Template tools">
+            <button type="button" class="btn btn-ghost btn-sm" data-action="undo" title="Undo (Ctrl+Z)" aria-label="Undo"><span data-icon="corner-up-left" data-icon-size="14"></span></button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="redo" title="Redo (Ctrl+Y)" aria-label="Redo"><span data-icon="corner-up-right" data-icon-size="14"></span></button>
+            <span class="bex-sep"></span>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="cut" title="Cut (Ctrl+X)" aria-label="Cut"><span data-icon="scissors" data-icon-size="14"></span></button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="copy" title="Copy (Ctrl+C)" aria-label="Copy"><span data-icon="copy" data-icon-size="14"></span></button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="paste" title="Paste (Ctrl+V)" aria-label="Paste"><span data-icon="clipboard" data-icon-size="14"></span></button>
+            <span class="bex-sep"></span>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="select-all" title="Select all (Ctrl+A)" aria-label="Select all"><span data-icon="maximize-2" data-icon-size="14"></span></button>
+            <button type="button" class="btn btn-ghost btn-sm" data-action="format" title="Indent the HTML by nesting"><span data-icon="code" data-icon-size="14"></span> Format</button>
+            <span class="bex-spacer"></span>
+            <small class="bex-cursor" data-bind-text="cursor.value"></small>
+            <div class="bex-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="setWrite" data-bind-class="mode.value === 'write' && 'is-on'" title="Template only">Edit</button>
+                <button type="button" data-on-click="setSplit" data-bind-class="mode.value === 'split' && 'is-on'" title="Template and preview">Split</button>
+                <button type="button" data-on-click="setPreview" data-bind-class="mode.value === 'preview' && 'is-on'" title="Preview only">Preview</button>
             </div>
-
-            <div class="editor-divider"></div>
-
-            <!-- Preview pane -->
-            <div class="editor-pane editor-pane--preview" style="flex-direction:column;overflow:hidden;">
-                <!-- Sample data inputs - auto-populated by JS -->
-                <div id="block-sample-data" style="
-                    border-bottom:1px solid var(--dm-border,rgba(255,255,255,.08));
-                    padding:.6rem .75rem;
-                    background:var(--dm-background-alt,rgba(0,0,0,.1));
-                    flex-shrink:0;">
-                    <p class="text-muted" style="font-size:.8rem;margin:0;">
-                        Write some template HTML to populate sample data fields.
-                    </p>
+        </div>
+        <div id="block-editor-body" data-bind-class="modeCls.value">
+            <div class="bex-pane bex-write"></div>
+            <div class="bex-pane bex-preview">
+                <div class="bex-samples-wrap">
+                    <div class="bex-samples-title">Sample values
+                        <span data-help-title="Sample values" data-help="One per placeholder the template uses, so the preview shows something real. They are only for the preview - nothing here is saved. Right-click one (or ⋮, or Shift+F10) to insert its placeholder, copy it or reset the sample."></span></div>
+                    <p class="bex-note" data-bind-hidden="!noSamples.value" data-bind-text="noSamplesText"></p>
+                    <div class="bex-samples" data-each="sampleRows.value key=key"></div>
                 </div>
-                <!-- Rendered output -->
-                <div id="block-preview-output" style="flex:1;overflow-y:auto;padding:1rem;"></div>
+                <div id="block-preview-output" class="bex-output" aria-label="Preview"></div>
             </div>
-
         </div>
     </div>
-</div>
 
-<!-- Custom CSS -->
-<div class="card card-collapsible mb-3">
-    <div class="card-header">
-        <h2>Custom CSS</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
-    </div>
-    <div class="card-body">
-        <p style="font-size:.85rem;color:var(--dm-text-muted,#888);margin:0 0 .5rem;line-height:1.5;">
-            Your CSS is automatically scoped to
-            <code class="dm-code-inline" id="block-css-scope-hint" style="font-size:.9em;">[data-block="…"]</code>.
-            Use CSS nesting for child rules.
-            <strong>Note:</strong>
-            <code class="dm-code-inline" style="font-size:.9em;">@keyframes</code>,
-            <code class="dm-code-inline" style="font-size:.9em;">@font-face</code>, and
-            <code class="dm-code-inline" style="font-size:.9em;">@import</code>
-            cannot be scoped - use site-wide Custom CSS in Settings for those.
-        </p>
-        <textarea id="block-css"
-                  class="editor-textarea"
-                  spellcheck="false"
-                  style="font-family:var(--dm-font-mono,monospace);min-height:240px;width:100%;"
-                  placeholder="/* Example:
-color: var(--dm-primary);
-h2 { font-size: 1.5rem; }
-.highlight { background: yellow; } */"></textarea>
+    <!-- Custom CSS -->
+    <div class="bex-card">
+        <div class="bex-card-title">Custom CSS
+            <span data-help-title="Custom CSS" data-help="Scoped to this block automatically - the rules below are wrapped in [data-block=&quot;name&quot;] { … }, so use nesting for child rules. @keyframes, @font-face and @import cannot be scoped: put those in Site Settings › Custom CSS. Up to 50 KB."></span>
+        </div>
+        <p class="bex-note">Scoped to <code class="dm-code-inline" id="block-css-scope-hint" data-bind-text="scopeHint.value"></code>.</p>
+        <div class="bex-css"></div>
+        <small class="bex-err" data-bind-hidden="!cssErr.value" data-bind-text="cssErr.value"></small>
     </div>
+
 </div>
 
-<!-- Placeholder Reference -->
-<div class="card card-collapsible mb-3 card-collapsed">
-    <div class="card-header">
-        <h2>Placeholder Reference</h2>
-        <span class="card-collapse-icon" data-icon="chevron-down"></span>
-    </div>
-    <div class="card-body" style="font-size:.85rem;line-height:1.8;">
-        <p>Use <code class="dm-code-inline">&#123;&#123;fieldName&#125;&#125;</code> to insert entry field values. Values are HTML-escaped
-            automatically to prevent XSS.</p>
-        <table class="table" style="max-width:520px;margin:.75rem 0;">
-            <thead>
-            <tr>
-                <th style="width:180px;">Placeholder</th>
-                <th>Value</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-                <td><code class="dm-code-inline">&#123;&#123;fieldName&#125;&#125;</code></td>
-                <td>Any entry field - e.g. <code class="dm-code-inline">&#123;&#123;title&#125;&#125;</code>, <code class="dm-code-inline">&#123;&#123;rating&#125;&#125;</code>,
-                    <code class="dm-code-inline">&#123;&#123;message&#125;&#125;</code></td>
-            </tr>
-            <tr>
-                <td><code class="dm-code-inline">&#123;&#123;_id&#125;&#125;</code></td>
-                <td>Entry UUID</td>
-            </tr>
-            <tr>
-                <td><code class="dm-code-inline">&#123;&#123;_createdAt&#125;&#125;</code></td>
-                <td>Creation timestamp (ISO 8601 by default)</td>
-            </tr>
-            <tr>
-                <td><code class="dm-code-inline">&#123;&#123;_updatedAt&#125;&#125;</code></td>
-                <td>Last-updated timestamp (ISO 8601 by default)</td>
-            </tr>
-            <tr>
-                <td><code class="dm-code-inline">&#123;&#123;field:FORMAT&#125;&#125;</code></td>
-                <td>Any placeholder with a <code class="dm-code-inline">:FORMAT</code> suffix
-                    applies moment-style date formatting when the value parses as a date.
-                    E.g. <code class="dm-code-inline">&#123;&#123;_createdAt:DD MMM YYYY&#125;&#125;</code> →
-                    <em>05 Jan 2026</em>, or
-                    <code class="dm-code-inline">&#123;&#123;_createdAt:HH:mm&#125;&#125;</code> →
-                    <em>14:30</em>.
-                </td>
-            </tr>
-            </tbody>
-        </table>
-        <p style="margin-top:.5rem;"><strong>Format tokens:</strong>
-            <code class="dm-code-inline">YYYY</code> <code class="dm-code-inline">YY</code>
-            <code class="dm-code-inline">MMMM</code> <code class="dm-code-inline">MMM</code>
-            <code class="dm-code-inline">MM</code> <code class="dm-code-inline">M</code>
-            <code class="dm-code-inline">DD</code> <code class="dm-code-inline">D</code>
-            <code class="dm-code-inline">dddd</code> <code class="dm-code-inline">ddd</code>
-            <code class="dm-code-inline">HH</code> <code class="dm-code-inline">H</code>
-            <code class="dm-code-inline">hh</code> <code class="dm-code-inline">h</code>
-            <code class="dm-code-inline">mm</code> <code class="dm-code-inline">m</code>
-            <code class="dm-code-inline">ss</code> <code class="dm-code-inline">s</code>
-            <code class="dm-code-inline">A</code> <code class="dm-code-inline">a</code>
-            - any literal character that isn't one of these tokens passes through unchanged
-            (so <code class="dm-code-inline">DD/MM/YYYY</code>, <code class="dm-code-inline">HH:mm</code>,
-            and <code class="dm-code-inline">dddd D MMMM YYYY</code> all work).
-        </p>
-        <p><strong>Use in a shortcode:</strong></p>
-        <pre class="dm-code-block">[collection slug="feedback" display="block" block="feedback-card" /]
+<!-- Outside the bound root (.bex): the reference is full of literal placeholders, which the binder would flag as un-interpolated. -->
+    <!-- Placeholder reference -->
+    <details class="bex-card bex-ref">
+        <summary class="bex-card-title">Placeholder reference</summary>
+        <div class="bex-ref-body">
+            <p>Use <code class="dm-code-inline">&#123;&#123;fieldName&#125;&#125;</code> to insert entry field values. Values are HTML-escaped
+                automatically to prevent XSS.</p>
+            <table class="table bex-ref-table">
+                <thead><tr><th>Placeholder</th><th>Value</th></tr></thead>
+                <tbody>
+                <tr><td><code class="dm-code-inline">&#123;&#123;fieldName&#125;&#125;</code></td>
+                    <td>Any entry field - e.g. <code class="dm-code-inline">&#123;&#123;title&#125;&#125;</code>, <code class="dm-code-inline">&#123;&#123;rating&#125;&#125;</code>,
+                        <code class="dm-code-inline">&#123;&#123;message&#125;&#125;</code></td></tr>
+                <tr><td><code class="dm-code-inline">&#123;&#123;_id&#125;&#125;</code></td><td>Entry UUID</td></tr>
+                <tr><td><code class="dm-code-inline">&#123;&#123;_createdAt&#125;&#125;</code></td><td>Creation timestamp (ISO 8601 by default)</td></tr>
+                <tr><td><code class="dm-code-inline">&#123;&#123;_updatedAt&#125;&#125;</code></td><td>Last-updated timestamp (ISO 8601 by default)</td></tr>
+                <tr><td><code class="dm-code-inline">&#123;&#123;field:FORMAT&#125;&#125;</code></td>
+                    <td>Any placeholder with a <code class="dm-code-inline">:FORMAT</code> suffix applies moment-style date formatting when
+                        the value parses as a date. E.g. <code class="dm-code-inline">&#123;&#123;_createdAt:DD MMM YYYY&#125;&#125;</code> →
+                        <em>05 Jan 2026</em>, or <code class="dm-code-inline">&#123;&#123;_createdAt:HH:mm&#125;&#125;</code> → <em>14:30</em>.</td></tr>
+                </tbody>
+            </table>
+            <p><strong>Format tokens:</strong>
+                <code class="dm-code-inline">YYYY</code> <code class="dm-code-inline">YY</code>
+                <code class="dm-code-inline">MMMM</code> <code class="dm-code-inline">MMM</code>
+                <code class="dm-code-inline">MM</code> <code class="dm-code-inline">M</code>
+                <code class="dm-code-inline">DD</code> <code class="dm-code-inline">D</code>
+                <code class="dm-code-inline">dddd</code> <code class="dm-code-inline">ddd</code>
+                <code class="dm-code-inline">HH</code> <code class="dm-code-inline">H</code>
+                <code class="dm-code-inline">hh</code> <code class="dm-code-inline">h</code>
+                <code class="dm-code-inline">mm</code> <code class="dm-code-inline">m</code>
+                <code class="dm-code-inline">ss</code> <code class="dm-code-inline">s</code>
+                <code class="dm-code-inline">A</code> <code class="dm-code-inline">a</code>
+                - any other character passes through unchanged (so <code class="dm-code-inline">DD/MM/YYYY</code>,
+                <code class="dm-code-inline">HH:mm</code> and <code class="dm-code-inline">dddd D MMMM YYYY</code> all work).</p>
+            <p><strong>Use in a shortcode:</strong></p>
+            <pre class="dm-code-block">[collection slug="feedback" display="block" block="feedback-card" /]
 [view slug="my-view" display="block" block="feedback-card" /]</pre>
-        <p style="margin-top:.75rem;"><strong>Example block template:</strong></p>
-        <pre class="dm-code-block">&lt;div class="card mb-3"&gt;
+            <p><strong>Example block template:</strong></p>
+            <pre class="dm-code-block">&lt;div class="card mb-3"&gt;
   &lt;div class="card-body"&gt;
     &lt;h3&gt;&#123;&#123;name&#125;&#125;&lt;/h3&gt;
     &lt;p&gt;&#123;&#123;message&#125;&#125;&lt;/p&gt;
     &lt;small&gt;Rating: &#123;&#123;rating&#125;&#125; &amp;mdash; &#123;&#123;_createdAt&#125;&#125;&lt;/small&gt;
   &lt;/div&gt;
 &lt;/div&gt;</pre>
-    </div>
+        </div>
+    </details>
 </div>
+<style>
+.bex-page { display: flex; flex-direction: column; gap: .75rem; }
+.bex { display: flex; flex-direction: column; gap: .75rem; }
+.bex [hidden] { display: none !important; }
+.bex-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.bex-ident { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; min-width: 0; }
+.bex-ident strong { font-family: var(--dm-font-mono, monospace); }
+.bex-ident small, .bex-note, .bex-cursor { color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.bex-note { margin: 0; }
+.bex-cursor { font-size: var(--dm-text-xs); font-variant-numeric: tabular-nums; }
+.bex-spacer { flex: 1; }
+.bex-switch { width: auto; max-width: 16rem; }
+.bex-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.bex-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.bex-unsaved { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 12%, transparent); border: 1px solid color-mix(in srgb, var(--dm-warning) 35%, transparent);
+    position: sticky; top: 0; z-index: 5; }
+.bex-unsaved .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.bex-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem;
+    background: var(--dm-surface); }
+.bex-card-title { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
+.bex-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); gap: .85rem; align-items: start; }
+.bex-grid .form-label { display: flex; align-items: center; gap: .3rem; }
+.bex-setting { display: flex; flex-direction: column; gap: .35rem; }
+.bex-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.bex-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding-bottom: .5rem; border-bottom: 1px solid var(--dm-border); }
+.bex-toolbar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.bex-sep { width: 1px; align-self: stretch; margin: .2rem .3rem; background: var(--dm-border); }
+.bex-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; margin-left: .5rem; }
+.bex-seg button { border: 0; background: none; color: var(--dm-text); padding: .25rem .65rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.bex-seg button + button { border-left: 1px solid var(--dm-border); }
+.bex-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.bex-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.bex-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; height: min(70vh, 820px); min-height: 460px;
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.bex-body.is-write { grid-template-columns: minmax(0, 1fr); }
+.bex-body.is-write .bex-preview { display: none; }
+.bex-body.is-preview { grid-template-columns: minmax(0, 1fr); }
+.bex-body.is-preview .bex-write { display: none; }
+.bex-pane { min-width: 0; min-height: 0; overflow: hidden; }
+.bex-write { border-right: 1px solid var(--dm-border); }
+.bex-body.is-write .bex-write { border-right: 0; }
+.bex-preview { display: flex; flex-direction: column; }
+.bex-samples-wrap { flex-shrink: 0; max-height: 40%; overflow-y: auto; padding: .6rem .75rem; border-bottom: 1px solid var(--dm-border);
+    background: var(--dm-surface-raised, color-mix(in srgb, var(--dm-text) 4%, transparent)); display: flex; flex-direction: column; gap: .4rem; }
+.bex-samples-title { display: flex; align-items: center; gap: .3rem; font-size: var(--dm-text-sm); font-weight: 600; }
+.bex-samples { display: flex; flex-direction: column; gap: .3rem; }
+.bex-sample { display: flex; align-items: center; gap: .5rem; border-radius: var(--dm-radius-sm); }
+.bex-sample:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 1px; }
+.bex-sample-label { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs); color: var(--dm-text-muted); flex: 0 0 9.5rem; text-align: right;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bex-sample input { flex: 1; min-width: 0; }
+.bex-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.bex-kebab:hover { color: var(--dm-primary); }
+.bex-output { flex: 1; overflow-y: auto; padding: 1rem; background: var(--dm-background, var(--dm-surface)); }
+.bex-css { height: 260px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.bex-ref summary { cursor: pointer; list-style: revert; }
+.bex-ref-body { font-size: var(--dm-text-sm); line-height: 1.7; }
+.bex-ref-table { max-width: 40rem; margin: .5rem 0; }
+@media (max-width: 900px) {
+    .bex-grid { grid-template-columns: 1fr; }
+    .bex-body, .bex-body.is-split { grid-template-columns: minmax(0, 1fr); height: auto; }
+    .bex-body .bex-write { height: 55vh; border-right: 0; border-bottom: 1px solid var(--dm-border); }
+    .bex-body .bex-preview { min-height: 40vh; }
+}
+</style>