@bendyline/squisq-editor-react 1.4.0 → 1.5.1

package/src/styles/editor.css

@@ -29,6 +29,13 @@
   flex-shrink: 0;
 }
 
+.squisq-editor-header--image {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+}
+
 .squisq-editor-content {
   flex: 1;
   overflow: hidden;
@@ -61,7 +68,11 @@
 }
 
 .squisq-view-tab {
-  padding: 6px 16px;
+  /* Asymmetric vertical padding pushes the label down toward the
+     underline so it reads as a tab indicator rather than a label
+     floating above a separate line. Underline (`border-bottom: 2px`)
+     stays at the very bottom of the tab; text shifts ~3px lower. */
+  padding: 11px 16px 3px;
   min-width: 72px;
   text-align: center;
   border: none;
@@ -108,7 +119,20 @@
   background: #ffffff;
   border-right: 1px solid rgba(0, 0, 0, 0.12);
   align-self: stretch;
-  align-items: center;
+  /* Bottom-align so the active-tab underline lands flush with the
+     toolbar's lower edge — the underline-as-tab-indicator pattern
+     reads as "tab", not "floating button in the middle of a bar". */
+  align-items: flex-end;
+  box-sizing: border-box;
+}
+
+/* When the outline pane is visible, anchor the toolbar's view-tabs section
+ * to the outline pane's width so their right-edge dividers line up
+ * vertically — otherwise the view-tabs border and the outline's right edge
+ * sit at different X positions and the chrome looks misaligned. */
+.squisq-editor-shell[data-outline-visible='true'] .squisq-toolbar-view-tabs {
+  flex-shrink: 0;
+  min-width: var(--squisq-outline-width, 240px);
 }
 
 .squisq-toolbar-actions {
@@ -121,7 +145,12 @@
 }
 
 .squisq-toolbar-view-tab {
-  padding: 4px 14px;
+  /* Top padding is asymmetric — bumped 4px above the bottom — so the
+     label sits more vertically centered alongside the neighboring
+     toolbar buttons rather than floating up against the toolbar's
+     top edge. The 2px `border-bottom` remains the active-tab
+     underline at the tab's lower edge. */
+  padding: 8px 14px 4px;
   border: none;
   background: transparent;
   color: #4b5563;
@@ -348,6 +377,7 @@
   white-space: nowrap;
 }
 
+/* Keep for overflow-menu compact=true usage */
 .squisq-template-picker-select {
   font-size: 12px;
   padding: 2px 6px;
@@ -364,6 +394,258 @@
   outline-offset: -1px;
 }
 
+/* ─── Template Gallery Popover ───────────────────────── */
+
+.squisq-template-picker-popover-host {
+  position: relative;
+}
+
+.squisq-template-picker-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px 3px 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #374151;
+  background: #fff;
+  border: 1px solid #d1d5db;
+  border-radius: 5px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 0.1s,
+    border-color 0.1s;
+}
+
+.squisq-template-picker-trigger:hover {
+  background: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.squisq-template-picker-trigger--open {
+  background: #f3f4f6;
+  border-color: #6366f1;
+  outline: 2px solid rgba(99, 102, 241, 0.25);
+  outline-offset: -1px;
+}
+
+.squisq-template-picker-trigger-label {
+  color: #6b7280;
+}
+
+/* Mini thumbnail of the current template's wireframe inside the trigger.
+   The underlying SVGs are 56×40; we shrink them via width/height so the
+   trigger button stays compact next to other toolbar controls. */
+.squisq-template-picker-trigger-thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 3px;
+  background: #fff;
+  padding: 1px;
+  line-height: 0;
+}
+.squisq-template-picker-trigger-thumb svg {
+  width: 24px;
+  height: 17px;
+  display: block;
+}
+
+/* When the toolbar is width-constrained, drop the "Block:" label so the
+   thumbnail + name + caret can fit. The toolbar root sets
+   container-type: inline-size + container-name: squisq-toolbar. */
+@container squisq-toolbar (max-width: 900px) {
+  .squisq-template-picker-trigger-label {
+    display: none;
+  }
+}
+
+.squisq-template-picker-trigger-value {
+  color: #111827;
+  font-weight: 400;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.squisq-template-picker-trigger-caret {
+  color: #9ca3af;
+  flex-shrink: 0;
+}
+
+/* The gallery popover panel — rendered in a portal with fixed positioning */
+.squisq-template-gallery {
+  width: 420px;
+  max-width: calc(100vw - 24px);
+  max-height: 480px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.12),
+    0 2px 6px rgba(0, 0, 0, 0.06);
+  padding: 8px;
+  animation: squisq-gallery-appear 0.12s ease-out;
+}
+
+@keyframes squisq-gallery-appear {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* "— none —" row at the top */
+.squisq-template-gallery-none {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  margin-bottom: 6px;
+  transition: background 0.1s;
+}
+
+.squisq-template-gallery-none:hover {
+  background: #f9fafb;
+}
+
+.squisq-template-gallery-none.squisq-template-gallery-card--selected {
+  background: #eef2ff;
+  border-color: #c7d2fe;
+}
+
+.squisq-template-gallery-none-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #6b7280;
+  white-space: nowrap;
+}
+
+.squisq-template-gallery-none-desc {
+  font-size: 11px;
+  color: #9ca3af;
+}
+
+/* Grid of template cards */
+.squisq-template-gallery-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+
+@media (min-width: 900px) {
+  .squisq-template-gallery {
+    width: 780px;
+    max-height: 880px;
+  }
+
+  .squisq-template-gallery-grid {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
+/* Individual template card */
+.squisq-template-gallery-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 7px;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background 0.1s,
+    border-color 0.1s,
+    box-shadow 0.1s;
+}
+
+.squisq-template-gallery-card:hover {
+  background: #f9fafb;
+  border-color: #a5b4fc;
+  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.1);
+}
+
+.squisq-template-gallery-card--selected {
+  background: #eef2ff;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
+}
+
+.squisq-template-gallery-card-icon {
+  flex-shrink: 0;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  line-height: 0;
+}
+
+.squisq-template-picker-icon {
+  display: block;
+}
+
+.squisq-template-gallery-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.squisq-template-gallery-card-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #111827;
+  line-height: 1.3;
+}
+
+.squisq-template-gallery-card-desc {
+  font-size: 11px;
+  color: #6b7280;
+  line-height: 1.4;
+}
+
+/* Recommended / All templates segmentation */
+.squisq-template-gallery-section + .squisq-template-gallery-section {
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.squisq-template-gallery-section-title {
+  margin: 4px 4px 8px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.squisq-editor-shell[data-theme='dark']
+  .squisq-template-gallery-section
+  + .squisq-template-gallery-section {
+  border-top-color: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-section-title {
+  color: #9ca3af;
+}
+
 /* ─── Tooltip (portal) ────────────────────────────────── */
 
 .squisq-tooltip {
@@ -395,11 +677,12 @@
 .squisq-template-badge {
   display: inline-flex;
   align-items: center;
+  gap: 4px;
   margin-left: 8px;
-  padding: 1px 7px;
+  padding: 1px 6px 1px 8px;
   font-size: 11px;
   font-weight: 600;
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-family: inherit;
   color: #6d28d9;
   background: #ede9fe;
   border: 1px solid #c4b5fd;
@@ -407,10 +690,64 @@
   vertical-align: middle;
   user-select: none;
   line-height: 1.6;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.squisq-template-badge:hover,
+.squisq-template-badge:focus-visible {
+  background: #ddd6fe;
+  border-color: #a78bfa;
+  outline: none;
+}
+
+.squisq-template-badge::before {
+  content: attr(data-template-label);
 }
 
 .squisq-template-badge::after {
-  content: attr(data-template);
+  content: '▾';
+  font-size: 9px;
+  line-height: 1;
+  opacity: 0.7;
+}
+
+/* Empty variant — subtle affordance on plain headings that opens the
+ * template picker. Quiet by default, brightens when the heading is
+ * hovered, fully styled on direct hover/focus. */
+.squisq-template-badge.squisq-template-badge--empty {
+  color: #94a3b8;
+  background: transparent;
+  border-color: #d1d5db;
+  border-style: dashed;
+  opacity: 0.5;
+}
+
+.squisq-template-badge.squisq-template-badge--empty::before {
+  content: 'Block';
+  font-weight: 500;
+}
+
+:is(h1, h2, h3, h4, h5, h6):hover > .squisq-template-badge--empty {
+  opacity: 0.9;
+}
+
+.squisq-template-badge.squisq-template-badge--empty:hover,
+.squisq-template-badge.squisq-template-badge--empty:focus-visible {
+  opacity: 1;
+  color: #6d28d9;
+  background: #ede9fe;
+  border-color: #c4b5fd;
+  border-style: solid;
+}
+
+/* Hide block-template chips when the View menu toggles them off. The
+ * underlying `data-template` heading attribute is untouched — only the
+ * inline visual affordance disappears. */
+.squisq-wysiwyg-container[data-block-tags='hidden'] .squisq-template-badge {
+  display: none;
 }
 
 /* ─── Status Bar ─────────────────────────────────────── */
@@ -459,8 +796,61 @@
   margin: 0 auto;
   outline: none;
   min-height: 100%;
-  background: #fff;
+  /* When the WYSIWYG container is set to inherit theme colors (View menu →
+     "Theme styling: Fonts & colors"), --squisq-theme-bg / --squisq-theme-text
+     are populated from the active Squisq theme. Otherwise the editor falls
+     back to its default light surface. */
+  color: var(--squisq-theme-text, #1f2937);
+  background: var(--squisq-theme-bg, #fff);
   box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
+  /* Body font follows the active squisq theme when one is selected; the
+     fallback inherits from the host page when it isn't. */
+  font-family: var(--squisq-theme-body-font, inherit);
+  /* Explicit caret color so the blinking insertion point stays visible
+     even when an ancestor (e.g. a DocBlocks shell with the OS in dark
+     mode) inherits a near-white color into the editor. Without this
+     `caret-color: auto` follows the inherited `color`, which can end up
+     white-on-white in the WYSIWYG surface. */
+  caret-color: var(--squisq-theme-text, #1f2937);
+  /* Custom I-beam mouse cursor so the pointer stays visible on the
+     editor's white surface even when the OS is configured to render
+     cursors in white (Windows lets users do this). The SVG draws a
+     dark I-beam with a thin white halo so it reads on both light and
+     dark editor backgrounds. Hotspot is the centerline (8,11). The
+     final `text` keyword is the fallback when the URL fails to load. */
+  cursor:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'><g fill='none' stroke-linecap='round'><path d='M5 3 L11 3 M5 19 L11 19 M8 3 L8 19' stroke='white' stroke-width='3.2'/><path d='M5 3 L11 3 M5 19 L11 19 M8 3 L8 19' stroke='%231f2937' stroke-width='1.4'/></g></svg>")
+      8 11,
+    text;
+}
+
+/* ── Drop cursor (I-beam) ─────────────────────────────────────
+   ProseMirror's Dropcursor extension (bundled with StarterKit) renders
+   a horizontal bar at the prospective drop position when an image or
+   any other node is being dragged inside the document. The default
+   styling is a 1px black line that's easy to miss against body text,
+   so we beef it up to a 3px accent-coloured bar with rounded ends. */
+.squisq-wysiwyg-editor .prosemirror-dropcursor-block,
+.squisq-wysiwyg-editor .prosemirror-dropcursor-inline {
+  background: var(--squisq-editor-accent, #4a9eff) !important;
+  border-radius: 2px;
+}
+.squisq-wysiwyg-editor .prosemirror-dropcursor-block {
+  height: 3px !important;
+}
+.squisq-wysiwyg-editor .prosemirror-dropcursor-inline {
+  width: 3px !important;
+}
+
+.squisq-wysiwyg-editor h1,
+.squisq-wysiwyg-editor h2,
+.squisq-wysiwyg-editor h3,
+.squisq-wysiwyg-editor h4,
+.squisq-wysiwyg-editor h5,
+.squisq-wysiwyg-editor h6 {
+  /* Headings pick up the theme's titleFont; fall through to body when
+     no theme is active. */
+  font-family: var(--squisq-theme-title-font, var(--squisq-theme-body-font, inherit));
 }
 
 .squisq-wysiwyg-editor h1 {
@@ -494,15 +884,21 @@
 }
 
 .squisq-wysiwyg-editor blockquote {
-  border-left: 3px solid #d1d5db;
+  border-left: 3px solid var(--squisq-theme-text-muted, #d1d5db);
   padding-left: 16px;
   margin: 0.5em 0;
-  color: #6b7280;
+  color: var(--squisq-theme-text-muted, #6b7280);
 }
 
+/* Inline `code` and `<pre>` blocks: the foreground / background draw from
+   the active theme when the WYSIWYG container inherits theme colors
+   (View menu → "Editor styling from theme: Fonts & colors"). The
+   fallbacks preserve the historical light-mode look when no theme is
+   active. Dark-mode overrides below adapt the same fallbacks for the
+   editor's own dark chrome. */
 .squisq-wysiwyg-editor pre {
-  background: #1e293b;
-  color: #e2e8f0;
+  background: var(--squisq-theme-bg-muted, #1e293b);
+  color: var(--squisq-theme-text, #e2e8f0);
   padding: 12px 16px;
   border-radius: 6px;
   overflow-x: auto;
@@ -511,7 +907,8 @@
 }
 
 .squisq-wysiwyg-editor code {
-  background: #f1f5f9;
+  background: var(--squisq-theme-bg-muted, #f1f5f9);
+  color: var(--squisq-theme-text, inherit);
   padding: 1px 4px;
   border-radius: 3px;
   font-size: 0.9em;
@@ -681,9 +1078,22 @@
   min-width: 0;
 }
 
+/* Link color follows the active theme's primary when "Theme styling →
+   Fonts & colors" is on, otherwise falls back to the historical blue.
+   In both cases we blend toward the surface text color so the link
+   reads cleanly against the background — some themes (Gezellig) pick a
+   mid-tone primary that's nearly invisible on a dark page when used
+   neat. The fallback `--squisq-theme-text: #1f2937` matches the
+   default editor chrome. */
 .squisq-wysiwyg-editor a {
-  color: #2563eb;
+  color: color-mix(
+    in srgb,
+    var(--squisq-theme-primary, #2563eb) 65%,
+    var(--squisq-theme-text, #1f2937)
+  );
   text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
 }
 
 /* Tiptap placeholder */
@@ -865,69 +1275,171 @@
   border-color: #4b5563;
 }
 
-/* Template badge (dark) */
-.squisq-editor-shell[data-theme='dark'] .squisq-template-badge {
-  color: #a78bfa;
-  background: #2e1065;
-  border-color: #6d28d9;
+/* Template Gallery Popover (dark) */
+.squisq-editor-shell[data-theme='dark'] .squisq-template-picker-trigger {
+  background: #1f2937;
+  color: #e5e7eb;
+  border-color: #4b5563;
 }
 
-/* Status Bar */
-.squisq-editor-shell[data-theme='dark'] .squisq-status-bar {
-  border-top-color: #374151;
-  background: #1f2937;
-  color: #9ca3af;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-picker-trigger:hover {
+  background: #374151;
+  border-color: #6b7280;
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-status-ok {
-  color: #34d399;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-picker-trigger--open {
+  background: #374151;
+  border-color: #818cf8;
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-status-error {
-  color: #f87171;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-picker-trigger-label {
+  color: #9ca3af;
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-status-parsing {
-  color: #fbbf24;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-picker-trigger-value {
+  color: #f9fafb;
 }
 
-/* WYSIWYG Editor */
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-container {
-  background: #0f1219;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery {
+  background: #1f2937;
+  border-color: #374151;
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.4),
+    0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor {
-  color: #e5e7eb;
-  background: #111827;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-none:hover {
+  background: #374151;
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor blockquote {
-  border-left-color: #4b5563;
+.squisq-editor-shell[data-theme='dark']
+  .squisq-template-gallery-none.squisq-template-gallery-card--selected {
+  background: #1e1b4b;
+  border-color: #4338ca;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-none-label {
   color: #9ca3af;
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor pre {
-  background: #0f172a;
-  color: #e2e8f0;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-none-desc {
+  color: #6b7280;
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor code {
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-card {
+  border-color: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-card:hover {
   background: #374151;
-  color: #e5e7eb;
+  border-color: #6366f1;
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor pre code {
-  background: none;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-card--selected {
+  background: #1e1b4b;
+  border-color: #818cf8;
+  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor hr {
-  border-top-color: #374151;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-card-icon {
+  background: #111827;
+  border-color: #374151;
 }
 
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor th,
-.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor td {
-  border-color: #4b5563;
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-card-name {
+  color: #f3f4f6;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-template-gallery-card-desc {
+  color: #9ca3af;
+}
+
+/* Template badge (dark) */
+.squisq-editor-shell[data-theme='dark'] .squisq-template-badge {
+  color: #a78bfa;
+  background: #2e1065;
+  border-color: #6d28d9;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-template-badge.squisq-template-badge--empty {
+  color: #64748b;
+  background: transparent;
+  border-color: #374151;
+  border-style: dashed;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-template-badge.squisq-template-badge--empty:hover,
+.squisq-editor-shell[data-theme='dark']
+  .squisq-template-badge.squisq-template-badge--empty:focus-visible {
+  color: #c4b5fd;
+  background: #2e1065;
+  border-color: #6d28d9;
+  border-style: solid;
+}
+
+/* Status Bar */
+.squisq-editor-shell[data-theme='dark'] .squisq-status-bar {
+  border-top-color: #374151;
+  background: #1f2937;
+  color: #9ca3af;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-status-ok {
+  color: #34d399;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-status-error {
+  color: #f87171;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-status-parsing {
+  color: #fbbf24;
+}
+
+/* WYSIWYG Editor */
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-container {
+  background: #0f1219;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor {
+  color: #e5e7eb;
+  background: #111827;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  caret-color: #e5e7eb;
+  /* Light-stroked I-beam for the dark editor surface — same shape as
+     the light-mode cursor but inverted colors so it contrasts on dark. */
+  cursor:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'><g fill='none' stroke-linecap='round'><path d='M5 3 L11 3 M5 19 L11 19 M8 3 L8 19' stroke='%23111827' stroke-width='3.2'/><path d='M5 3 L11 3 M5 19 L11 19 M8 3 L8 19' stroke='%23e5e7eb' stroke-width='1.4'/></g></svg>")
+      8 11,
+    text;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor blockquote {
+  border-left-color: #4b5563;
+  color: #9ca3af;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor pre {
+  background: var(--squisq-theme-bg-muted, #0f172a);
+  color: var(--squisq-theme-text, #e2e8f0);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor code {
+  background: var(--squisq-theme-bg-muted, #374151);
+  color: var(--squisq-theme-text, #e5e7eb);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor pre code {
+  background: none;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor hr {
+  border-top-color: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor th,
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor td {
+  border-color: #4b5563;
 }
 
 .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor th {
@@ -956,7 +1468,16 @@
 }
 
 .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor a {
-  color: #60a5fa;
+  /* Dark-chrome fallback: when no theme is providing
+     --squisq-theme-primary, blend the dark-chrome blue with the dark-
+     chrome text color so the link still has enough lift. Themed
+     surfaces (Fonts & colors) override this via the rule above using
+     their own primary, so we don't need a separate dark-themed mix. */
+  color: color-mix(
+    in srgb,
+    var(--squisq-theme-primary, #60a5fa) 65%,
+    var(--squisq-theme-text, #e5e7eb)
+  );
 }
 
 .squisq-editor-shell[data-theme='dark']
@@ -1435,3 +1956,1921 @@
     color: rgba(255, 255, 255, 0.6);
   }
 }
+
+/* ─── Image Viewer ───────────────────────────────────── */
+
+.squisq-image-viewer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: #f3f4f6;
+  /* Subtle checkerboard so transparent PNGs are visible without dominating
+     the chrome. Anchored to the stage element below. */
+}
+
+.squisq-image-viewer-stage {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f3f4f6;
+  background-image:
+    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
+    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
+    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
+  background-size: 16px 16px;
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0;
+  user-select: none;
+}
+
+.squisq-image-viewer-img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  image-rendering: auto;
+  pointer-events: none;
+}
+
+.squisq-image-viewer-error {
+  color: #b91c1c;
+  font-size: 13px;
+}
+
+.squisq-image-viewer-toolbar {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.squisq-image-viewer-btn {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #1f2937;
+  min-width: 28px;
+}
+
+.squisq-image-viewer-btn:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.squisq-image-viewer-btn[aria-pressed='true'] {
+  background: rgba(88, 101, 242, 0.15);
+  color: #4338ca;
+}
+
+.squisq-image-viewer-status {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 10px;
+  font-size: 11px;
+  color: #6b7280;
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+}
+
+.squisq-image-viewer--dark {
+  background: #111827;
+}
+
+.squisq-image-viewer--dark .squisq-image-viewer-stage {
+  background-color: #111827;
+  background-image:
+    linear-gradient(45deg, #1f2937 25%, transparent 25%),
+    linear-gradient(-45deg, #1f2937 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #1f2937 75%),
+    linear-gradient(-45deg, transparent 75%, #1f2937 75%);
+}
+
+.squisq-image-viewer--dark .squisq-image-viewer-toolbar {
+  background: rgba(31, 41, 55, 0.92);
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.squisq-image-viewer--dark .squisq-image-viewer-btn {
+  color: #e5e7eb;
+}
+
+.squisq-image-viewer--dark .squisq-image-viewer-btn:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.squisq-image-viewer--dark .squisq-image-viewer-btn[aria-pressed='true'] {
+  background: rgba(128, 140, 255, 0.22);
+  color: #c7d2fe;
+}
+
+.squisq-image-viewer--dark .squisq-image-viewer-status {
+  color: #9ca3af;
+  background: #0b1020;
+  border-top-color: rgba(255, 255, 255, 0.08);
+}
+
+/* ─── Version History ────────────────────────────────── */
+
+.squisq-version-history {
+  position: relative;
+  flex-shrink: 0;
+  margin-left: 2px;
+}
+
+.squisq-version-history-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 90;
+  min-width: 280px;
+  max-width: 360px;
+  margin-top: 4px;
+  padding: 8px 0;
+  background: var(--squisq-bg, #fff);
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  color: var(--squisq-text, #1f2937);
+}
+
+/* When a snapshot is selected, the popover expands and lays out the diff
+   to the left of the version list. The diff column flexes; the list
+   column stays a fixed width so the times/sizes don't reflow. */
+.squisq-version-history-popover--with-diff {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: min(960px, 90vw);
+  min-width: 720px;
+  max-width: none;
+  padding: 0;
+}
+
+.squisq-version-history-popover--with-diff .squisq-version-history-list-pane {
+  width: 280px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--squisq-border, #e5e7eb);
+  padding: 8px 0;
+  overflow-y: auto;
+  max-height: 480px;
+}
+
+.squisq-version-history-diff {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.squisq-version-history-diff-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--squisq-border, #e5e7eb);
+  font-size: 11px;
+  color: var(--squisq-text-muted, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.squisq-version-history-diff-label strong {
+  color: var(--squisq-text, #1f2937);
+  font-weight: 600;
+  margin-right: 6px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.squisq-version-history-diff-body {
+  flex: 1 1 auto;
+  height: 480px;
+  min-height: 0;
+}
+
+.squisq-version-history-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px 8px 12px;
+  border-bottom: 1px solid var(--squisq-border, #e5e7eb);
+}
+
+.squisq-version-history-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.squisq-version-history-error {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: #b91c1c;
+  background: #fef2f2;
+}
+
+.squisq-version-history-empty {
+  padding: 16px 12px;
+  font-size: 12px;
+  color: var(--squisq-text-muted, #6b7280);
+  text-align: center;
+}
+
+.squisq-version-history-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.squisq-version-history-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  font-size: 12px;
+}
+
+.squisq-version-history-row:hover {
+  background: var(--squisq-row-hover, #f3f4f6);
+}
+
+.squisq-version-history-row--selected {
+  background: var(--squisq-row-hover, #e5edff);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-row--selected {
+  background: #2a3a52;
+}
+
+/* The synthetic "Current" row at the top represents the live editor
+   draft. It's clickable (selecting it deselects any snapshot, hiding the
+   diff) and gets a subtle separator below it so it reads apart from the
+   list of saved snapshots. */
+.squisq-version-history-row--current {
+  border-bottom: 1px solid var(--squisq-border, #e5e7eb);
+  margin-bottom: 4px;
+  padding-bottom: 2px;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-row--current {
+  border-color: #374151;
+}
+
+.squisq-version-history-row-select {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 6px 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.squisq-version-history-row__time {
+  font-variant-numeric: tabular-nums;
+}
+
+.squisq-version-history-row__size {
+  color: var(--squisq-text-muted, #6b7280);
+  font-variant-numeric: tabular-nums;
+}
+
+.squisq-version-history-row__actions {
+  display: flex;
+  gap: 8px;
+  padding: 6px 0;
+}
+
+.squisq-version-history-link {
+  border: none;
+  background: transparent;
+  padding: 0;
+  color: #2563eb;
+  font: inherit;
+  cursor: pointer;
+}
+
+.squisq-version-history-link:hover {
+  text-decoration: underline;
+}
+
+.squisq-version-history-link--primary {
+  color: #b91c1c;
+  font-weight: 600;
+}
+
+.squisq-version-history-confirm {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  margin-top: 6px;
+  background: var(--squisq-row-hover, #f3f4f6);
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.squisq-version-history-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-popover {
+  background: #1f2937;
+  border-color: #374151;
+  color: #d1d5db;
+}
+
+.squisq-editor-shell[data-theme='dark']
+  .squisq-version-history-popover--with-diff
+  .squisq-version-history-list-pane {
+  border-color: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-diff-header {
+  border-color: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-diff-label strong {
+  color: #d1d5db;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-header {
+  border-color: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-row:hover {
+  background: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-row__size {
+  color: #9ca3af;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-confirm {
+  background: #111827;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-error {
+  background: rgba(239, 68, 68, 0.1);
+  color: #fca5a5;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-link {
+  color: #93c5fd;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-link--primary {
+  color: #fca5a5;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-version-history-preview {
+  background: #0b1020;
+  border-color: #374151;
+}
+
+/* ─── View Menu ─────────────────────────────────────────────────── */
+
+.squisq-view-menu {
+  position: relative;
+  flex-shrink: 0;
+  margin-left: 2px;
+}
+
+.squisq-view-menu-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 90;
+  min-width: 200px;
+  margin-top: 4px;
+  padding: 6px 0;
+  background: var(--squisq-bg, #fff);
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  color: var(--squisq-text, #1f2937);
+}
+
+.squisq-view-menu-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 13px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.squisq-view-menu-row:hover {
+  background: var(--squisq-row-hover, #f3f4f6);
+}
+
+.squisq-view-menu-checkbox {
+  margin: 0;
+  cursor: pointer;
+}
+
+.squisq-view-menu-label {
+  flex: 1;
+}
+
+.squisq-view-menu-row--select {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  cursor: default;
+}
+
+.squisq-view-menu-row--select:hover {
+  background: transparent;
+}
+
+.squisq-view-menu-row--select .squisq-view-menu-label {
+  font-size: 11px;
+  color: var(--squisq-text-muted, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.squisq-view-menu-select {
+  width: 100%;
+  padding: 4px 8px;
+  font: inherit;
+  font-size: 13px;
+  background: var(--squisq-input-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Radio-group variant of --select: same uppercase caption header, but the
+   options render as stacked radio rows instead of a native <select>. */
+.squisq-view-menu-row--radios {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+  cursor: default;
+}
+
+.squisq-view-menu-row--radios:hover {
+  background: transparent;
+}
+
+.squisq-view-menu-row--radios > .squisq-view-menu-label {
+  font-size: 11px;
+  color: var(--squisq-text-muted, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 2px;
+}
+
+.squisq-view-menu-radio-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 4px;
+  font-size: 13px;
+  cursor: pointer;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.squisq-view-menu-radio-row:hover {
+  background: var(--squisq-row-hover, #f3f4f6);
+}
+
+.squisq-view-menu-radio {
+  margin: 0;
+  cursor: pointer;
+}
+
+.squisq-view-menu-radio-label {
+  flex: 1;
+}
+
+.squisq-view-menu-separator {
+  height: 1px;
+  background: var(--squisq-border, #e5e7eb);
+  margin: 6px 0;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-view-menu-popover {
+  background: #1f2937;
+  border-color: #374151;
+  color: #d1d5db;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-view-menu-row:hover {
+  background: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-view-menu-row--select:hover {
+  background: transparent;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-view-menu-row--radios:hover {
+  background: transparent;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-view-menu-radio-row:hover {
+  background: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-view-menu-select {
+  background: #111827;
+  border-color: #374151;
+  color: #e5e7eb;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-view-menu-separator {
+  background: #374151;
+}
+
+/* ─── Theme Customizer ──────────────────────────────────────────── */
+
+.squisq-theme-customizer {
+  position: relative;
+  flex-shrink: 0;
+  margin-left: 2px;
+}
+
+.squisq-theme-customizer-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 90;
+  width: 360px;
+  max-width: 95vw;
+  margin-top: 4px;
+  background: var(--squisq-bg, #fff);
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  color: var(--squisq-text, #1f2937);
+}
+
+.squisq-theme-customizer-header {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--squisq-border, #e5e7eb);
+}
+
+.squisq-theme-customizer-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.squisq-theme-customizer-body {
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.squisq-theme-customizer-section {
+  padding: 8px 12px;
+}
+
+.squisq-theme-customizer-section + .squisq-theme-customizer-section {
+  border-top: 1px solid var(--squisq-border, #f3f4f6);
+}
+
+.squisq-theme-customizer-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--squisq-text-muted, #6b7280);
+  margin-bottom: 6px;
+}
+
+.squisq-theme-customizer-section-hint {
+  font-size: 11px;
+  color: var(--squisq-text-muted, #6b7280);
+  margin-bottom: 8px;
+}
+
+.squisq-theme-customizer-section-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.squisq-theme-customizer-row {
+  display: grid;
+  grid-template-columns: 88px auto 1fr;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.squisq-theme-customizer-row--font {
+  grid-template-columns: 88px 1fr;
+  flex-wrap: wrap;
+}
+
+.squisq-theme-customizer-row--font > input,
+.squisq-theme-customizer-row--font > select:not(:first-of-type) {
+  grid-column: 2 / -1;
+  margin-top: 4px;
+}
+
+.squisq-theme-customizer-row-label {
+  font-weight: 500;
+  color: var(--squisq-text, #1f2937);
+}
+
+.squisq-theme-customizer-color {
+  width: 28px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.squisq-theme-customizer-input {
+  width: 100%;
+  padding: 4px 6px;
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 4px;
+  background: var(--squisq-input-bg, #fff);
+  font: inherit;
+  font-size: 12px;
+  color: inherit;
+}
+
+.squisq-theme-customizer-input--hex {
+  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+.squisq-theme-customizer-scale {
+  display: flex;
+  gap: 4px;
+  margin-top: 6px;
+  margin-left: 96px;
+}
+
+.squisq-theme-customizer-swatch {
+  width: 24px;
+  height: 16px;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  display: inline-block;
+}
+
+.squisq-theme-customizer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--squisq-border, #e5e7eb);
+}
+
+.squisq-theme-customizer-button {
+  padding: 4px 10px;
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 4px;
+  background: var(--squisq-input-bg, #f9fafb);
+  font: inherit;
+  font-size: 12px;
+  color: inherit;
+  cursor: pointer;
+}
+
+.squisq-theme-customizer-button:hover {
+  background: var(--squisq-row-hover, #f3f4f6);
+}
+
+.squisq-theme-customizer-button--primary {
+  background: #2563eb;
+  border-color: #2563eb;
+  color: #fff;
+}
+
+.squisq-theme-customizer-button--primary:hover {
+  background: #1d4ed8;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-customizer-popover {
+  background: #1f2937;
+  border-color: #374151;
+  color: #d1d5db;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-customizer-header,
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-customizer-footer {
+  border-color: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark']
+  .squisq-theme-customizer-section
+  + .squisq-theme-customizer-section {
+  border-color: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-customizer-input {
+  background: #111827;
+  border-color: #374151;
+  color: #d1d5db;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-customizer-button {
+  background: #111827;
+  border-color: #374151;
+  color: #d1d5db;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-customizer-button:hover {
+  background: #374151;
+}
+
+/* ─── Inline Preview Gutter ─────────────────────────────────────── */
+
+/* Wrapper around the active editor + gutters — a flex row inside the
+   editor body. Used by both WYSIWYG and Markdown views. Panes (outline
+   on the left, card-preview gutter on the right) are flex children with
+   fixed widths so the editor naturally shrinks to fit the remaining
+   space; nothing overlaps even when the editor (Monaco or Tiptap) fills
+   the wrapper edge-to-edge by default. */
+.squisq-editor-with-gutter {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+  container-type: inline-size;
+  container-name: squisq-editor-body;
+}
+
+.squisq-editor-with-gutter > .squisq-wysiwyg-container,
+.squisq-editor-with-gutter > .squisq-wysiwyg-pane,
+.squisq-editor-with-gutter > .squisq-raw-editor-container {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Frame the white code area inside Monaco. The outline + inline-preview
+   panes and Monaco's gutter / overview ruler all share the same beige
+   "desk" color.
+
+   The breathing room between the seam and the first character is faked
+   in two layers:
+
+   1. RawEditor.tsx sets `lineDecorationsWidth: 22` — 12 more than
+      Monaco's default (10) — which widens the gutter on the right.
+      Monaco's own coordinate math accounts for it, so cursor /
+      hit-testing / selections all stay aligned with the rendered text.
+
+   2. The right 12px of `.margin` is painted with the canvas background
+      via `.margin::before`, and the seam (`.margin::after`) is moved
+      inward to `right: 12px` so it sits between the real gutter and the
+      fake-canvas strip. From the outside the gutter looks the same
+      width it always did and the breathing room appears to live inside
+      the canvas. */
+.squisq-raw-editor-container .monaco-editor .margin {
+  position: relative;
+}
+
+.squisq-raw-editor-container .monaco-editor .margin::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 12px;
+  height: 100%;
+  background: #ffffff;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.squisq-raw-editor-container .monaco-editor .margin::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 12px;
+  width: 1px;
+  height: 100%;
+  background: #b0a99a;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.squisq-editor-shell[data-theme='dark']
+  .squisq-raw-editor-container
+  .monaco-editor
+  .margin::before {
+  background: #1e1e1e;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-raw-editor-container .monaco-editor .margin::after {
+  background: #2a3144;
+}
+
+/* The outline pane and the inline-preview gutter are flex children too —
+   each holds a fixed width and the editor takes the remainder. */
+.squisq-editor-with-gutter > .squisq-outline,
+.squisq-editor-with-gutter > .squisq-inline-preview-gutter {
+  flex: 0 0 auto;
+  min-height: 0;
+}
+
+/* All gutter chrome is parameterized through CSS custom properties so
+   hosts can re-theme without overriding individual rules. Defaults
+   below match the original light-mode values; the dark-mode block
+   further down rebinds them. Hosts override at any selector level
+   (e.g. `.db-shell[data-theme='dark'] .squisq-editor-shell { ... }`). */
+.squisq-editor-shell {
+  --squisq-preview-accent: #6366f1;
+  --squisq-preview-accent-muted: #94a3b8;
+  --squisq-preview-gutter-bg: #dcd8d0;
+  --squisq-preview-card-bg: #ffffff;
+  --squisq-preview-card-border: #e5e7eb;
+  --squisq-preview-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --squisq-preview-card-title: #111827;
+  --squisq-preview-card-svg-bg: #f1f5f9;
+  --squisq-preview-dot-halo: #ffffff;
+  --squisq-preview-empty-bg: #ffffff;
+  --squisq-preview-empty-border: #d1d5db;
+  --squisq-preview-empty-text: #6b7280;
+}
+
+.squisq-inline-preview-gutter {
+  /* Tinted to match the WYSIWYG container's "desk" color so this pane
+     reads as part of the same surrounding chrome the Monaco gutter
+     blends into on the other side of the canvas. */
+  padding: 0;
+  background: var(--squisq-preview-gutter-bg);
+  border: none;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+.squisq-inline-preview-empty {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  right: 12px;
+  color: var(--squisq-preview-empty-text);
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 12px;
+  text-align: center;
+  border: 1px dashed var(--squisq-preview-empty-border);
+  border-radius: 8px;
+  background: var(--squisq-preview-empty-bg);
+}
+
+.squisq-inline-preview-empty p {
+  margin: 0;
+}
+
+.squisq-inline-preview-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  background: var(--squisq-preview-card-bg);
+  border: 1px solid var(--squisq-preview-card-border);
+  border-radius: 8px;
+  box-shadow: var(--squisq-preview-card-shadow);
+  transition: top 120ms ease-out;
+}
+
+.squisq-inline-preview-card-label {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.squisq-inline-preview-card-template {
+  font-weight: 600;
+  color: var(--squisq-preview-accent);
+  flex-shrink: 0;
+}
+
+.squisq-inline-preview-card-sep {
+  color: var(--squisq-preview-accent-muted);
+  flex-shrink: 0;
+}
+
+.squisq-inline-preview-card-title {
+  color: var(--squisq-preview-card-title);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.squisq-inline-preview-card-svg {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 4px;
+  background: var(--squisq-preview-card-svg-bg);
+}
+
+/* Vertical bracket line showing each block's editor extent. Lives in the
+   connector strip, anchored to its right edge so the cards sit
+   immediately to its right. The diagonal connector bridges from the
+   vertical line to its card at the heading row. */
+.squisq-inline-preview-extent {
+  width: 4px;
+  background: var(--squisq-preview-accent);
+  border-radius: 2px;
+  transition:
+    top 120ms ease-out,
+    height 120ms ease-out;
+}
+
+/* Untagged blocks get a thinner, lower-contrast bar — they still surface
+   the block's structural reach but recede behind the strong accent bars
+   that pair with cards. */
+.squisq-inline-preview-extent--untagged {
+  width: 3px;
+  background: var(--squisq-preview-accent-muted);
+  border-radius: 1.5px;
+}
+
+/* Diagonal connector SVG colors — the JSX uses inline `stroke`/`fill`
+   presentation attributes so the geometry stays self-contained, but
+   those attributes are weaker than CSS rules and are overridden here
+   so all preview accents flow through the same custom property. */
+.squisq-inline-preview-connector-svg line {
+  stroke: var(--squisq-preview-accent);
+}
+.squisq-inline-preview-connector-svg circle {
+  fill: var(--squisq-preview-accent);
+  stroke: var(--squisq-preview-dot-halo);
+}
+
+/* Diagonal connector SVG — drawn directly via <line>/<circle> elements
+   in InlinePreviewGutter; CSS is intentionally minimal so the JSX
+   coordinates remain the source of truth. */
+.squisq-inline-preview-connector-svg line,
+.squisq-inline-preview-connector-svg circle {
+  transition:
+    cx 120ms ease-out,
+    cy 120ms ease-out,
+    x1 120ms ease-out,
+    y1 120ms ease-out,
+    x2 120ms ease-out,
+    y2 120ms ease-out;
+}
+
+/* Auto-hide the gutter (and its connector strip) when the editor body is
+   too narrow to host both surfaces comfortably. */
+@container squisq-editor-body (max-width: 720px) {
+  .squisq-inline-preview-gutter,
+  .squisq-inline-preview-connectors,
+  .squisq-outline {
+    display: none;
+  }
+}
+
+/* ─── Outline pane ─────────────────────────────────────────────────
+   Left-side companion to the inline preview gutter — a hierarchical
+   tree of the document's headings. Sits as a flex child inside
+   `.squisq-editor-with-gutter`; the editor takes whatever space remains. */
+
+.squisq-outline {
+  padding: 12px 8px;
+  background: #dcd8d0;
+  font-size: 13px;
+  color: #1f2937;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.squisq-outline-empty {
+  padding: 16px 12px;
+  font-size: 12px;
+  color: #6b7280;
+  text-align: center;
+}
+
+.squisq-outline-tree {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.squisq-outline-item {
+  margin: 0;
+}
+
+.squisq-outline-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 4px 6px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.squisq-outline-row:hover {
+  background: #f3f4f6;
+}
+
+.squisq-outline-row-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Depth-based indent. The outermost level still pays a small base
+   inset so all rows visually align inside the pane. */
+.squisq-outline-row--depth-1 {
+  padding-left: 6px;
+  font-weight: 600;
+}
+.squisq-outline-row--depth-2 {
+  padding-left: 18px;
+  font-weight: 500;
+}
+.squisq-outline-row--depth-3 {
+  padding-left: 30px;
+}
+.squisq-outline-row--depth-4 {
+  padding-left: 42px;
+  color: #475569;
+}
+.squisq-outline-row--depth-5 {
+  padding-left: 54px;
+  font-size: 12px;
+  color: #475569;
+}
+.squisq-outline-row--depth-6 {
+  padding-left: 66px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+/* Template-name chip + current-row highlight inherit the active document
+ * theme's accent via `--squisq-outline-accent` (injected by OutlinePanel
+ * from `previewSettings.activeTheme.colors.primary`). Without a theme
+ * mounted the fallback purple matches the original styling. Soft bg /
+ * border tints are derived from the accent via `color-mix` so any
+ * theme color produces a balanced, low-contrast surface. */
+.squisq-outline-template-chip {
+  flex-shrink: 0;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--squisq-outline-accent, #6d28d9);
+  background: color-mix(in oklch, var(--squisq-outline-accent, #6d28d9) 12%, transparent);
+  border: 1px solid color-mix(in oklch, var(--squisq-outline-accent, #6d28d9) 35%, transparent);
+  border-radius: 8px;
+  line-height: 1.4;
+}
+
+.squisq-outline-row--current {
+  background: color-mix(in oklch, var(--squisq-outline-accent, #4338ca) 14%, transparent);
+  color: var(--squisq-outline-accent, #4338ca);
+}
+
+/* ── Hover-revealed promote / demote arrows ─────────────────────
+ * The wrap is the row-level flex container. Arrows sit absolutely on
+ * the right edge so they overlay the template chip without causing
+ * layout shift on hover. Their background fills the row's hover tint
+ * so the chip behind them isn't visible while the buttons are active. */
+.squisq-outline-row-wrap {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.squisq-outline-row-wrap .squisq-outline-row {
+  flex: 1;
+  min-width: 0;
+}
+
+.squisq-outline-row-actions {
+  position: absolute;
+  top: 50%;
+  right: 2px;
+  transform: translateY(-50%);
+  display: flex;
+  gap: 1px;
+  padding: 1px 2px;
+  border-radius: 4px;
+  opacity: 0;
+  pointer-events: none;
+  background: #f3f4f6;
+  transition: opacity 0.1s ease;
+}
+
+.squisq-outline-row-wrap:hover .squisq-outline-row-actions,
+.squisq-outline-row-wrap:focus-within .squisq-outline-row-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* When the row is the active one, the actions tint matches the
+ * accent-tinted row background so they blend into the highlight. */
+.squisq-outline-row-wrap:has(.squisq-outline-row--current) .squisq-outline-row-actions {
+  background: color-mix(in oklch, var(--squisq-outline-accent, #4338ca) 14%, #f3f4f6);
+}
+
+/* Keep the row's hover fill while the cursor is on the arrows, since
+ * `:hover` on `.squisq-outline-row` won't match when the pointer leaves
+ * the button onto a sibling. */
+.squisq-outline-row-wrap:hover .squisq-outline-row:not(.squisq-outline-row--current) {
+  background: #f3f4f6;
+}
+
+.squisq-outline-row-arrow {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  padding: 0;
+  cursor: pointer;
+  color: #6b7280;
+  transition:
+    background 0.1s ease,
+    color 0.1s ease;
+}
+
+.squisq-outline-row-arrow:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.08);
+  color: #111827;
+}
+
+.squisq-outline-row-arrow:focus-visible {
+  outline: 2px solid var(--squisq-outline-accent, #4338ca);
+  outline-offset: 1px;
+}
+
+.squisq-outline-row-arrow:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-row-actions {
+  background: #1f2937;
+}
+
+.squisq-editor-shell[data-theme='dark']
+  .squisq-outline-row-wrap:has(.squisq-outline-row--current)
+  .squisq-outline-row-actions {
+  background: color-mix(in oklch, var(--squisq-outline-accent, #4338ca) 32%, #1f2937);
+}
+
+.squisq-editor-shell[data-theme='dark']
+  .squisq-outline-row-wrap:hover
+  .squisq-outline-row:not(.squisq-outline-row--current) {
+  background: #1f2937;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-row-arrow {
+  color: #9ca3af;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-row-arrow:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.08);
+  color: #f9fafb;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline {
+  background: #0f1219;
+  color: #d1d5db;
+}
+
+/* Dark-mode rebind for all preview-gutter custom properties. Individual
+   rules below remain as no-ops kept for back-compat with any host CSS
+   that may still target them — the variable redefinition is the single
+   source of truth going forward. */
+.squisq-editor-shell[data-theme='dark'] {
+  --squisq-preview-accent: #818cf8;
+  --squisq-preview-accent-muted: #475569;
+  --squisq-preview-gutter-bg: #0f1219;
+  --squisq-preview-card-bg: #111827;
+  --squisq-preview-card-border: #1f2937;
+  --squisq-preview-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --squisq-preview-card-title: #e5e7eb;
+  --squisq-preview-card-svg-bg: #1e293b;
+  --squisq-preview-dot-halo: #0f172a;
+  --squisq-preview-empty-bg: #111827;
+  --squisq-preview-empty-border: #374151;
+  --squisq-preview-empty-text: #94a3b8;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-inline-preview-gutter {
+  background: var(--squisq-preview-gutter-bg);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-empty {
+  color: #94a3b8;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-row:hover {
+  background: #1f2937;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-row--depth-4,
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-row--depth-5 {
+  color: #94a3b8;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-row--depth-6 {
+  color: #6b7280;
+}
+
+/* Dark mode keeps the same accent inheritance — but mixes the tint
+ * toward a higher saturation since transparent overlays on a dark
+ * surface read as much weaker than on light. Text color is lifted
+ * toward white so the accent stays legible against dark chrome. */
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-template-chip {
+  color: color-mix(in oklch, var(--squisq-outline-accent, #6d28d9) 55%, #ffffff);
+  background: color-mix(in oklch, var(--squisq-outline-accent, #6d28d9) 30%, transparent);
+  border-color: color-mix(in oklch, var(--squisq-outline-accent, #6d28d9) 55%, transparent);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-outline-row--current {
+  background: color-mix(in oklch, var(--squisq-outline-accent, #4338ca) 32%, transparent);
+  color: color-mix(in oklch, var(--squisq-outline-accent, #4338ca) 55%, #ffffff);
+}
+
+/* (Dark-mode preview-gutter chrome flows through the custom-property
+   redefinition above. Individual color rules removed — the base
+   .squisq-inline-preview-* selectors already pull from the same vars
+   that the dark block rebinds.) */
+
+/* ── Link Dialog ─────────────────────────────────────────────── */
+
+.squisq-link-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  padding: 16px;
+}
+
+.squisq-link-dialog {
+  width: 100%;
+  max-width: 440px;
+  background: var(--squisq-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 8px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+
+.squisq-link-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--squisq-border, #e5e7eb);
+}
+
+.squisq-link-dialog-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.squisq-link-dialog-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--squisq-text-muted, #6b7280);
+  padding: 0 4px;
+}
+
+.squisq-link-dialog-close:hover {
+  color: var(--squisq-text, #1f2937);
+}
+
+.squisq-link-dialog-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.squisq-link-dialog-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.squisq-link-dialog-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--squisq-text-muted, #6b7280);
+}
+
+.squisq-link-dialog-input {
+  width: 100%;
+  padding: 6px 10px;
+  font: inherit;
+  font-size: 13px;
+  background: var(--squisq-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 4px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.squisq-link-dialog-input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.squisq-link-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--squisq-border, #e5e7eb);
+}
+
+.squisq-link-dialog-btn {
+  padding: 6px 14px;
+  font: inherit;
+  font-size: 13px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.squisq-link-dialog-btn--secondary {
+  background: transparent;
+  color: var(--squisq-text, #1f2937);
+  border-color: var(--squisq-border, #d1d5db);
+}
+
+.squisq-link-dialog-btn--secondary:hover {
+  background: var(--squisq-bg, #f3f4f6);
+}
+
+.squisq-link-dialog-btn--primary {
+  background: #3b82f6;
+  color: #fff;
+  border-color: #3b82f6;
+}
+
+.squisq-link-dialog-btn--primary:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+}
+
+/* ─── Document-link picker (LinkDialog) ──────────────────
+   Surfaced when EditorShell receives a `documentLinkProvider` —
+   the dialog grows a "Browse documents" tab that lists workspace
+   neighbors so authors can pick a link target without typing the
+   relative path by hand. */
+
+.squisq-link-dialog-tabs {
+  display: flex;
+  gap: 2px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.squisq-link-dialog-tab {
+  flex: 1;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+}
+
+.squisq-link-dialog-tab:hover {
+  color: #1f2937;
+}
+
+.squisq-link-dialog-tab--active {
+  color: #1f2937;
+  border-bottom-color: #3b82f6;
+}
+
+.squisq-link-dialog-doc-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+}
+
+.squisq-link-dialog-doc-list {
+  max-height: 240px;
+  overflow-y: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.squisq-link-dialog-doc-empty {
+  padding: 16px 12px;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 13px;
+}
+
+.squisq-link-dialog-doc-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas:
+    'label path'
+    'desc desc';
+  gap: 2px 12px;
+  width: 100%;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #f3f4f6;
+  text-align: left;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.squisq-link-dialog-doc-item:last-child {
+  border-bottom: none;
+}
+
+.squisq-link-dialog-doc-item:hover {
+  background: #f3f4f6;
+}
+
+.squisq-link-dialog-doc-item--selected {
+  background: #eff6ff;
+}
+
+.squisq-link-dialog-doc-item-label {
+  grid-area: label;
+  font-size: 13px;
+  font-weight: 500;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.squisq-link-dialog-doc-item-path {
+  grid-area: path;
+  font-size: 11px;
+  color: #6b7280;
+  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+.squisq-link-dialog-doc-item-desc {
+  grid-area: desc;
+  font-size: 11px;
+  color: #9ca3af;
+}
+
+.squisq-link-dialog-doc-current {
+  font-size: 11px;
+  color: #6b7280;
+  padding: 4px 6px;
+}
+
+.squisq-link-dialog-doc-current code {
+  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: #1f2937;
+  background: #f3f4f6;
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+/* ─── FontAwesome glyph decorations (Monaco) ─────────────
+   Used by RawEditor to render the actual FA glyph as a Monaco
+   `before:` content decoration adjacent to each `{[icon]}` source
+   span. Per-family font-weight/font-family is necessary because the
+   Free tier ships three distinct fonts (Brands, Solid, Regular). */
+
+/* `inlineClassName` on Monaco's `before:` content decoration is
+   applied to the wrapper around the injected glyph character. We
+   render the codepoint via the appropriate FontAwesome font for the
+   icon's family. */
+.fa-glyph-decoration-brands {
+  font-family: 'Font Awesome 6 Brands' !important;
+  font-weight: 400 !important;
+  color: var(--squisq-fg, inherit);
+  padding-right: 2px;
+  font-style: normal !important;
+}
+
+.fa-glyph-decoration-solid {
+  font-family: 'Font Awesome 6 Free' !important;
+  font-weight: 900 !important;
+  color: var(--squisq-fg, inherit);
+  padding-right: 2px;
+  font-style: normal !important;
+}
+
+.fa-glyph-decoration-regular {
+  font-family: 'Font Awesome 6 Free' !important;
+  font-weight: 400 !important;
+  color: var(--squisq-fg, inherit);
+  padding-right: 2px;
+  font-style: normal !important;
+}
+
+/* Monaco's suggest widget — when a completion item's `label.label`
+   starts with a FontAwesome codepoint (we set this in RawEditor for
+   icon suggestions), use FA fonts as fallbacks so the glyph renders
+   instead of the empty ``-style placeholder square. Brand and
+   Free fonts are listed in order; the browser picks whichever has
+   the codepoint. font-weight 900 covers solid icons; brand icons
+   shipping under their own font don't care about weight. Regular FA
+   icons (weight 400) will fall through to the default and render
+   as a placeholder — an acceptable trade since regular is the
+   smallest tier in the Free catalog. */
+.monaco-editor .suggest-widget .monaco-list-row .label-name {
+  /* Real fonts first (used for the icon-name characters), then FA
+     fonts as fallbacks (used for the leading codepoint character).
+     `inherit` is illegal inside a comma-separated font-family list
+     — the browser drops the whole declaration if it appears there —
+     so we spell out the system stack explicitly. */
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, system-ui,
+    'Font Awesome 6 Brands', 'Font Awesome 6 Free', sans-serif;
+}
+
+/* ─── Theme picker (popover with themed previews) ─────── */
+
+.squisq-theme-picker-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px 2px 4px;
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 4px;
+  background: var(--squisq-input-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  max-width: 220px;
+}
+
+.squisq-theme-picker-trigger:hover {
+  border-color: var(--squisq-text-muted, #9ca3af);
+}
+
+.squisq-theme-picker-trigger--open {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
+}
+
+.squisq-theme-picker-trigger--full {
+  width: 100%;
+  max-width: none;
+  padding: 4px 8px 4px 4px;
+  font-size: 13px;
+}
+
+.squisq-theme-picker-caret {
+  flex-shrink: 0;
+  color: var(--squisq-text-muted, #6b7280);
+}
+
+.squisq-theme-picker-name-chip {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.squisq-theme-picker-name-chip--trigger {
+  flex: 1;
+  min-width: 0;
+}
+
+.squisq-theme-picker-name-chip--default {
+  background: var(--squisq-bg, #fff) !important;
+  color: var(--squisq-text, #1f2937) !important;
+  border-color: var(--squisq-border, #d1d5db) !important;
+  font-family: inherit !important;
+  font-style: italic;
+}
+
+.squisq-theme-picker-swatches {
+  display: inline-flex;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.squisq-theme-picker-swatch {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-picker-swatch {
+  border-color: rgba(255, 255, 255, 0.18);
+}
+
+/* Popover */
+.squisq-theme-picker-popover {
+  max-height: min(70vh, 520px);
+  overflow-y: auto;
+  background: var(--squisq-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 8px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  animation: squisq-theme-picker-appear 0.12s ease-out;
+}
+
+@keyframes squisq-theme-picker-appear {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.squisq-theme-picker-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  font: inherit;
+}
+
+.squisq-theme-picker-row:hover {
+  background: var(--squisq-row-hover, #f3f4f6);
+}
+
+.squisq-theme-picker-row--selected {
+  background: #eef2ff;
+  border-color: #c7d2fe;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-picker-row:hover {
+  background: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-picker-row--selected {
+  background: rgba(99, 102, 241, 0.2);
+  border-color: rgba(165, 180, 252, 0.4);
+}
+
+.squisq-theme-picker-row .squisq-theme-picker-name-chip {
+  flex-shrink: 0;
+  min-width: 110px;
+  text-align: center;
+  padding: 6px 10px;
+  font-size: 13px;
+}
+
+.squisq-theme-picker-row-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+}
+
+.squisq-theme-picker-row-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--squisq-text, #1f2937);
+}
+
+.squisq-theme-picker-row-desc {
+  font-size: 11px;
+  color: var(--squisq-text-muted, #6b7280);
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Dark editor-shell variants for the trigger / popover */
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-picker-trigger {
+  background: #111827;
+  border-color: #374151;
+  color: #e5e7eb;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-theme-picker-popover {
+  background: #1f2937;
+  border-color: #374151;
+  color: #e5e7eb;
+}
+
+/* ─── Document settings dialog ───────────────────────── */
+
+.squisq-doc-settings-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+  padding: 16px;
+}
+
+.squisq-doc-settings-dialog {
+  width: 100%;
+  max-width: 440px;
+  background: var(--squisq-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  border: 1px solid var(--squisq-border, #e5e7eb);
+  border-radius: 8px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+}
+
+.squisq-doc-settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--squisq-border, #e5e7eb);
+}
+
+.squisq-doc-settings-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.squisq-doc-settings-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--squisq-text-muted, #6b7280);
+  padding: 0 4px;
+}
+
+.squisq-doc-settings-close:hover {
+  color: var(--squisq-text, #1f2937);
+}
+
+.squisq-doc-settings-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.squisq-doc-settings-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.squisq-doc-settings-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--squisq-text-muted, #6b7280);
+}
+
+.squisq-doc-settings-input {
+  width: 100%;
+  padding: 6px 10px;
+  font: inherit;
+  font-size: 13px;
+  background: var(--squisq-bg, #fff);
+  color: var(--squisq-text, #1f2937);
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 4px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.squisq-doc-settings-input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.squisq-doc-settings-hint {
+  font-size: 11px;
+  color: var(--squisq-text-muted, #6b7280);
+  line-height: 1.4;
+}
+
+.squisq-doc-settings-hint strong {
+  color: var(--squisq-text, #1f2937);
+  font-weight: 600;
+}
+
+.squisq-doc-settings-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--squisq-border, #e5e7eb);
+}
+
+.squisq-doc-settings-btn {
+  padding: 6px 14px;
+  font: inherit;
+  font-size: 13px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.squisq-doc-settings-btn--secondary {
+  background: transparent;
+  color: var(--squisq-text, #1f2937);
+  border-color: var(--squisq-border, #d1d5db);
+}
+
+.squisq-doc-settings-btn--secondary:hover {
+  background: var(--squisq-bg, #f3f4f6);
+}
+
+.squisq-doc-settings-btn--primary {
+  background: #3b82f6;
+  color: #fff;
+  border-color: #3b82f6;
+}
+
+.squisq-doc-settings-btn--primary:hover {
+  background: #2563eb;
+  border-color: #2563eb;
+}