add live page editor sidebar with collapsible UI

Admins can now edit pages directly on the live shop by clicking the
pencil icon in the header. A sidebar slides in with block management
controls (add, remove, reorder, edit settings, save, reset, done).

Key features:
- PageEditorHook on_mount with handle_params/event/info hooks
- BlockEditor pure functions extracted from admin editor
- Shared BlockEditorComponents with event_prefix namespacing
- Collapsible sidebar: X closes it, header pencil reopens it
- Backdrop overlay dismisses sidebar on tap
- Conditional admin.css loading for logged-in users
- content_body block now portable (textarea setting + rich text fallback)

13 integration tests, 26 unit tests, 1370 total passing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/admin/components.css

@@ -183,6 +183,11 @@
   font-size: 0.75rem;
 }
 
+.admin-btn-xs {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.6875rem;
+}
+
 .admin-btn-icon {
   padding: 0.5rem;
   aspect-ratio: 1;
@@ -469,6 +474,11 @@
   font-size: 0.625rem;
 }
 
+.admin-badge-warning {
+  background-color: color-mix(in oklch, var(--t-status-warning, #f59e0b) 15%, transparent);
+  color: var(--t-status-warning, #b45309);
+}
+
 /* ── Dropdown ── */
 
 .admin-dropdown {
@@ -1465,4 +1475,95 @@
   border-style: dashed;
 }
 
+/* ── Live editor layout (sidebar on shop pages) ── */
+
+.page-editor-live {
+  display: flex;
+  min-height: 100vh;
+}
+
+.page-editor-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 360px;
+  background: var(--t-surface-base);
+  border-right: 1px solid var(--t-border-default);
+  overflow-y: auto;
+  z-index: 40;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+  padding: 1rem;
+  transition: transform 0.25s ease;
+  transform: translateX(0);
+}
+
+/* Hidden sidebar — slides off-screen */
+[data-sidebar-open="false"] .page-editor-sidebar {
+  transform: translateX(-100%);
+  box-shadow: none;
+}
+
+.page-editor-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.page-editor-sidebar-title {
+  font-size: 1rem;
+  font-weight: 600;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.page-editor-sidebar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.page-editor-sidebar-dirty {
+  margin-bottom: 0.5rem;
+}
+
+.page-editor-content {
+  flex: 1;
+  margin-left: 360px;
+  min-width: 0;
+  transition: margin-left 0.25s ease;
+}
+
+/* Content goes full-width when sidebar is hidden */
+[data-sidebar-open="false"] .page-editor-content {
+  margin-left: 0;
+}
+
+/* Clickable backdrop to dismiss the sidebar */
+.page-editor-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 39;
+  background: rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+}
+
+/* Mobile: sidebar overlays content, no margin push */
+@media (max-width: 63.99em) {
+  .page-editor-sidebar {
+    width: 85%;
+    max-width: 360px;
+  }
+
+  .page-editor-content {
+    margin-left: 0;
+  }
+}
+
 } /* @layer admin */