@bendyline/docblocks-react 1.1.0 → 1.1.2

package/src/styles/docblocks.css

@@ -2,65 +2,104 @@
 
 /* ── Theme Tokens ────────────────────────────────────────────── */
 
+/* DocBlocks accent palette — warm brown on a canvas/parchment base.
+   Think paper on a wooden desk: the editor itself stays white (paper),
+   the chrome around it (sidebar, gutters, panes) reads as cream
+   canvas, and the accent picks up a saturated dark brown for CTAs.
+   Dark mode inverts the metaphor into espresso wood with light tan
+   highlights. Derived shades (`--db-accent-soft-*`, `--db-accent-tint`,
+   `--db-accent-deep`) are defined alongside so every place that needs
+   a tinted background or a readable-on-tint text color pulls from the
+   same source of truth. */
 .db-shell {
   --db-bg: #ffffff;
-  --db-bg-subtle: #f9fafb;
-  --db-bg-hover: #f3f4f6;
-  --db-bg-selected: #dbeafe;
-  --db-bg-selected-hover: #bfdbfe;
-  --db-border: #cbd5e1;
-  --db-border-strong: #94a3b8;
-  --db-text: #1f2937;
-  --db-text-secondary: #374151;
-  --db-text-muted: #6b7280;
-  --db-text-placeholder: #9ca3af;
-  --db-accent: #3b82f6;
-  --db-accent-hover: #2563eb;
-  --db-input-border: #93c5fd;
-  --db-danger: #dc2626;
-  --db-danger-bg: #fef2f2;
-  --db-shadow: rgba(0, 0, 0, 0.12);
+  --db-bg-subtle: #f3eede;
+  --db-bg-hover: #e9e2cb;
+  --db-bg-selected: #7d6948;
+  --db-bg-selected-hover: #5e4f37;
+  --db-border: #d6cdb0;
+  --db-border-strong: #b5a985;
+  --db-text: #2a2419;
+  --db-text-secondary: #3d3528;
+  --db-text-muted: #6b614a;
+  --db-text-placeholder: #766c54;
+  --db-accent: #7d6948;
+  --db-accent-hover: #5e4f37;
+  --db-accent-soft-08: rgba(125, 105, 72, 0.08);
+  --db-accent-soft-12: rgba(125, 105, 72, 0.12);
+  --db-accent-soft-15: rgba(125, 105, 72, 0.15);
+  --db-accent-soft-25: rgba(125, 105, 72, 0.25);
+  --db-accent-tint: #f3eede;
+  --db-accent-tint-strong: #d8d0b5;
+  --db-accent-deep: #3d3220;
+  /* Outline pane + inline-preview gutter background. Sits one step
+     lighter than the toolbar (`--db-accent-tint-strong`) so the chrome
+     panes read as distinct from the action bar above the canvas. */
+  --db-gutter-bg: #efe8d4;
+  --db-input-border: #c4b693;
+  --db-danger: #b22b1b;
+  --db-danger-bg: #fdf0ee;
+  --db-shadow: rgba(40, 30, 15, 0.12);
 }
 
 .db-shell[data-theme='dark'] {
-  --db-bg: #0f172a;
-  --db-bg-subtle: #1e293b;
-  --db-bg-hover: #334155;
-  --db-bg-selected: #1e3a5f;
-  --db-bg-selected-hover: #1e4a7f;
-  --db-border: #475569;
-  --db-border-strong: #64748b;
-  --db-text: #e5e7eb;
-  --db-text-secondary: #cbd5e1;
-  --db-text-muted: #94a3b8;
-  --db-text-placeholder: #64748b;
-  --db-accent: #3b82f6;
-  --db-accent-hover: #60a5fa;
-  --db-input-border: #3b82f6;
+  --db-bg: #1a1812;
+  --db-bg-subtle: #262219;
+  --db-bg-hover: #3a3528;
+  --db-bg-selected: #3a3528;
+  --db-bg-selected-hover: #4d4636;
+  --db-border: #4d4636;
+  --db-border-strong: #6b6448;
+  --db-text: #e8e2d0;
+  --db-text-secondary: #d4ccb0;
+  --db-text-muted: #a89a7c;
+  --db-text-placeholder: #6b614a;
+  --db-accent: #c8b48f;
+  --db-accent-hover: #dec79d;
+  --db-accent-soft-08: rgba(200, 180, 143, 0.08);
+  --db-accent-soft-12: rgba(200, 180, 143, 0.12);
+  --db-accent-soft-15: rgba(200, 180, 143, 0.18);
+  --db-accent-soft-25: rgba(200, 180, 143, 0.28);
+  --db-accent-tint: #262219;
+  --db-accent-tint-strong: #3a382e;
+  --db-accent-deep: #e6dcc0;
+  --db-input-border: #c8b48f;
   --db-danger: #f87171;
   --db-danger-bg: #1c1917;
   --db-shadow: rgba(0, 0, 0, 0.4);
+  /* In dark mode, "lighter than the toolbar" means brighter — so this
+     sits a step above `--db-accent-tint-strong` instead of between it
+     and tint. */
+  --db-gutter-bg: #4a4538;
 }
 
 @media (prefers-color-scheme: dark) {
   .db-shell:not([data-theme='light']) {
-    --db-bg: #0f172a;
-    --db-bg-subtle: #1e293b;
-    --db-bg-hover: #334155;
-    --db-bg-selected: #1e3a5f;
-    --db-bg-selected-hover: #1e4a7f;
-    --db-border: #475569;
-    --db-border-strong: #64748b;
-    --db-text: #e5e7eb;
-    --db-text-secondary: #cbd5e1;
-    --db-text-muted: #94a3b8;
-    --db-text-placeholder: #64748b;
-    --db-accent: #3b82f6;
-    --db-accent-hover: #60a5fa;
-    --db-input-border: #3b82f6;
+    --db-bg: #1a1812;
+    --db-bg-subtle: #262219;
+    --db-bg-hover: #3a3528;
+    --db-bg-selected: #3a3528;
+    --db-bg-selected-hover: #4d4636;
+    --db-border: #4d4636;
+    --db-border-strong: #6b6448;
+    --db-text: #e8e2d0;
+    --db-text-secondary: #d4ccb0;
+    --db-text-muted: #a89a7c;
+    --db-text-placeholder: #6b614a;
+    --db-accent: #c8b48f;
+    --db-accent-hover: #dec79d;
+    --db-accent-soft-08: rgba(200, 180, 143, 0.08);
+    --db-accent-soft-12: rgba(200, 180, 143, 0.12);
+    --db-accent-soft-15: rgba(200, 180, 143, 0.18);
+    --db-accent-soft-25: rgba(200, 180, 143, 0.28);
+    --db-accent-tint: #262219;
+    --db-accent-tint-strong: #3a382e;
+    --db-accent-deep: #e6dcc0;
+    --db-input-border: #c8b48f;
     --db-danger: #f87171;
     --db-danger-bg: #1c1917;
     --db-shadow: rgba(0, 0, 0, 0.4);
+    --db-gutter-bg: #4a4538;
   }
 }
 
@@ -82,10 +121,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(37, 99, 235, 0.08);
-  border: 2px dashed #2563eb;
+  background: var(--db-accent-soft-08);
+  border: 2px dashed var(--db-accent);
   border-radius: 6px;
-  color: #2563eb;
+  color: var(--db-accent);
   font-size: 13px;
   font-weight: 600;
   z-index: 10;
@@ -211,10 +250,12 @@
 
 .db-tree-row--selected {
   background: var(--db-bg-selected);
+  color: #ffffff;
 }
 
 .db-tree-row--selected:hover {
   background: var(--db-bg-selected-hover);
+  color: #ffffff;
 }
 
 .db-tree-icon {
@@ -276,7 +317,7 @@
 
 .db-tree-more--active {
   background: var(--db-bg-selected);
-  color: var(--db-text);
+  color: #ffffff;
 }
 
 /* ── Context Menu ────────────────────────────────────────────── */
@@ -355,9 +396,10 @@
 .db-workspace-dropdown {
   position: absolute;
   left: 8px;
-  right: 8px;
   top: 100%;
   z-index: 60;
+  min-width: calc(100% - 16px);
+  max-width: min(320px, 90vw);
   background: var(--db-bg);
   border: 1px solid var(--db-border);
   border-radius: 4px;
@@ -369,6 +411,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
   width: 100%;
   padding: 6px 12px;
   font-size: 13px;
@@ -377,6 +420,7 @@
   border: none;
   cursor: pointer;
   color: var(--db-text-secondary);
+  white-space: nowrap;
 }
 
 .db-workspace-dropdown-item:hover {
@@ -385,6 +429,7 @@
 
 .db-workspace-dropdown-item--active {
   background: var(--db-bg-selected);
+  color: #ffffff;
   font-weight: 500;
 }
 
@@ -592,13 +637,67 @@
 
 .db-shell-sidebar {
   width: 260px;
-  border-right: 1px solid var(--db-border-strong);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   flex-shrink: 0;
 }
 
+/* Drag handle between sidebar and editor. The visible line is the
+   hairline divider itself — 1px wide, in --db-border-strong so it
+   matches the toolbar's bottom border. The hit area extends 3px to
+   either side via an absolutely-positioned ::before so the cursor
+   can grab it without being pixel-perfect. The sidebar no longer
+   carries its own `border-right`; this 1px IS that border. */
+.db-shell-sidebar-resizer {
+  flex: 0 0 1px;
+  width: 1px;
+  /* Custom col-resize cursor — a dark double-arrow with a white halo
+     so it stays visible against any background. Windows' custom-color
+     cursor setting can render the system col-resize in white, which
+     disappears against the light chrome on either side of our 1px
+     line; a CSS `url()` cursor always wins over the OS preference.
+     Hotspot is the center (11, 8). */
+  cursor:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8 L19 8 M3 8 L7 4 M3 8 L7 12 M19 8 L15 4 M19 8 L15 12' stroke='white' stroke-width='3.5'/><path d='M3 8 L19 8 M3 8 L7 4 M3 8 L7 12 M19 8 L15 4 M19 8 L15 12' stroke='%231f2937' stroke-width='1.4'/></g></svg>")
+      11 8,
+    col-resize;
+  background: var(--db-border-strong);
+  position: relative;
+  z-index: 5;
+  user-select: none;
+  touch-action: none;
+  transition: background-color 0.12s ease;
+}
+
+.db-shell-sidebar-resizer::before {
+  /* Invisible hit-extension so the 1px line isn't fiddly to grab. */
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -3px;
+  right: -3px;
+}
+
+.db-shell-sidebar-resizer:hover,
+.db-shell-sidebar-resizer:active {
+  background: var(--db-accent);
+}
+
+/* Drag-state body cursor — set via JS while a sidebar resize is in
+   progress so the col-resize cursor stays painted even when the
+   pointer briefly slips off the 7px hit area. Uses the same custom
+   SVG as the resizer itself so Windows' white-cursor setting doesn't
+   make it invisible against light chrome. */
+body.db-resizing-sidebar,
+body.db-resizing-sidebar * {
+  cursor:
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8 L19 8 M3 8 L7 4 M3 8 L7 12 M19 8 L15 4 M19 8 L15 12' stroke='white' stroke-width='3.5'/><path d='M3 8 L19 8 M3 8 L7 4 M3 8 L7 12 M19 8 L15 4 M19 8 L15 12' stroke='%231f2937' stroke-width='1.4'/></g></svg>")
+      11 8,
+    col-resize !important;
+}
+
 .db-shell-sidebar-header {
   display: flex;
   align-items: center;
@@ -673,6 +772,28 @@
   background: var(--db-bg-subtle);
 }
 
+/* "Restore split view" button — appears on the editor toolbar when
+   compact layout was triggered manually on a wide viewport. Lets the
+   user pop the sidebar back open alongside the editor. Iconic only,
+   no label, so it stays compact in the toolbar's right-slot. */
+.db-restore-split {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  margin-right: 4px;
+  border: none;
+  border-radius: 4px;
+  background: none;
+  color: var(--db-text-secondary);
+  cursor: pointer;
+}
+
+.db-restore-split:hover {
+  background: var(--db-bg-hover);
+  color: var(--db-text);
+}
+
 /* ── Dialog ───────────────────────────────────────────────────── */
 
 .db-dialog-overlay {
@@ -767,6 +888,10 @@
   padding: 0;
 }
 
+.db-settings-fieldset + .db-settings-fieldset {
+  margin-top: 20px;
+}
+
 .db-settings-legend {
   font-size: 12px;
   font-weight: 600;
@@ -776,6 +901,20 @@
   margin-bottom: 8px;
 }
 
+.db-settings-hint {
+  font-size: 12px;
+  color: var(--db-text-muted);
+  margin: 0 0 6px;
+  line-height: 1.5;
+}
+
+.db-settings-hint code {
+  font-size: 11px;
+  background: var(--db-bg-subtle);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
 .db-settings-radio {
   display: flex;
   align-items: center;
@@ -870,10 +1009,31 @@
   max-width: none;
 }
 
+/* …unless the inline preview gutter is present. The gutter is absolutely
+   positioned to the right of the centered editor "page", so a full-bleed
+   editor pushes it offscreen. Restore squisq's 800px page width when the
+   gutter wrapper is active. The container query at 720px in editor.css
+   auto-hides the gutter on narrow viewports. */
+.squisq-wysiwyg-with-gutter .squisq-wysiwyg-editor {
+  max-width: 800px;
+}
+
 .squisq-toolbar {
   min-height: 48px;
 }
 
+/* Squisq's view-tab section is bottom-aligned in the toolbar (so the
+   active-tab underline sits flush with the toolbar's lower edge),
+   with `padding: 8px 14px 4px` calibrated for squisq's natural ~36px
+   toolbar height. We force the toolbar to 48px for breathing room,
+   which drops the label too far down relative to the centered B/I/S
+   buttons. Lift the label ~6px by growing bottom padding — the
+   underline stays anchored to the section's bottom edge, only the
+   text moves up. */
+.db-shell .squisq-toolbar-view-tab {
+  padding-bottom: 10px;
+}
+
 .squisq-toolbar-button[aria-label='Insert image'] {
   font-size: 0;
   background: no-repeat center / 18px
@@ -1003,6 +1163,66 @@
   color: var(--db-text-placeholder);
 }
 
+.db-export-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--db-text);
+  cursor: pointer;
+  user-select: none;
+}
+
+.db-export-checkbox input[type='checkbox'] {
+  margin: 0;
+  cursor: pointer;
+}
+
+/* Chip radio group — used by the Export dialog for the top three
+   options (Format / Style / Bundle). Wraps to multiple lines on narrow
+   widths so the format row doesn't truncate. */
+.db-export-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.db-export-chip {
+  flex: 0 0 auto;
+  padding: 6px 12px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--db-text);
+  background: var(--db-bg-subtle);
+  border: 1px solid var(--db-border);
+  border-radius: 3px;
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease,
+    color 0.12s ease;
+}
+
+.db-export-chip:hover {
+  background: var(--db-bg-hover);
+}
+
+.db-export-chip--active {
+  background: var(--db-accent);
+  border-color: var(--db-accent);
+  color: #ffffff;
+}
+
+.db-export-chip--active:hover {
+  background: var(--db-accent-hover);
+  border-color: var(--db-accent-hover);
+}
+
+.db-export-chip:focus-visible {
+  outline: 2px solid var(--db-accent);
+  outline-offset: 2px;
+}
+
 .db-export-footer {
   display: flex;
   justify-content: flex-end;
@@ -1059,11 +1279,11 @@
 }
 
 .db-shell[data-theme='light'] .squisq-toolbar {
-  background: #d8dee6;
+  background: var(--db-accent-tint);
 }
 
 .db-shell[data-theme='light'] .squisq-toolbar-view-tabs {
-  background: #ffffff;
+  background: var(--db-gutter-bg);
   box-shadow: 1px 0 0 rgba(0, 0, 0, 0.04);
 }
 
@@ -1072,5 +1292,727 @@
 }
 
 .db-shell[data-theme='dark'] .squisq-toolbar-view-tabs {
-  background: #0b1220;
+  background: #16110b;
+}
+
+/* ── Inline preview gutter: thematic green ──────────────────── */
+/* Rebind squisq's `--squisq-preview-*` custom properties so the
+   gutter chrome (vertical bracket, diagonal connector + dots,
+   "FACTCARD" template label) reads as sage green instead of indigo,
+   and the card surface tones harmonize with the rest of docblocks.
+   The preview-block renderer's own theme is unaffected — that's a
+   document-level concern, not chrome. */
+.db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] {
+  --squisq-preview-accent: var(--db-accent);
+  --squisq-preview-accent-muted: var(--db-text-muted);
+  --squisq-preview-gutter-bg: var(--db-gutter-bg);
+  --squisq-preview-card-bg: #ffffff;
+  --squisq-preview-card-border: var(--db-border);
+  --squisq-preview-card-shadow: 0 1px 2px rgba(40, 30, 15, 0.08);
+  --squisq-preview-card-title: var(--db-accent-deep);
+  --squisq-preview-card-svg-bg: var(--db-accent-tint);
+  --squisq-preview-dot-halo: var(--db-gutter-bg);
+  --squisq-preview-empty-bg: #ffffff;
+  --squisq-preview-empty-border: var(--db-border);
+  --squisq-preview-empty-text: var(--db-accent-deep);
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] {
+  --squisq-preview-accent: var(--db-accent-hover);
+  --squisq-preview-accent-muted: var(--db-text-muted);
+  --squisq-preview-gutter-bg: var(--db-gutter-bg);
+  --squisq-preview-card-bg: var(--db-bg);
+  --squisq-preview-card-border: var(--db-border);
+  --squisq-preview-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --squisq-preview-card-title: var(--db-text);
+  --squisq-preview-card-svg-bg: var(--db-bg-subtle);
+  --squisq-preview-dot-halo: var(--db-gutter-bg);
+  --squisq-preview-empty-bg: var(--db-bg);
+  --squisq-preview-empty-border: var(--db-border);
+  --squisq-preview-empty-text: var(--db-text-muted);
+}
+
+/* ── Squisq dark-theme override ──────────────────────────────── */
+/* Squisq has hardcoded slate-blue surfaces in its dark mode. We re-tone
+   them via the DocBlocks dark palette so the editor reads as warm dark
+   wood instead of cold slate. If squisq ever accepts a theme-color
+   prop, replace this block with that mechanism. */
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] {
+  --squisq-bg: var(--db-bg-subtle);
+  --squisq-border: var(--db-border);
+  --squisq-input-bg: var(--db-bg-hover);
+  background: var(--db-bg);
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-editor-header {
+  background: var(--db-bg-subtle);
+  border-bottom-color: var(--db-border-strong);
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-toolbar-view-tabs {
+  background: var(--db-bg);
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-container {
+  background: #16110b;
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor {
+  background: var(--db-bg);
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor pre {
+  background: #16110b;
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor code {
+  background: var(--db-bg-hover);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-wysiwyg-editor
+  blockquote {
+  border-left-color: var(--db-border);
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-preview-player {
+  background: var(--db-bg);
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-preview-codeblock {
+  background: #16110b;
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-status-bar {
+  background: var(--db-bg-subtle);
+  border-top-color: var(--db-border);
+}
+
+.db-shell[data-theme='dark'] .squisq-image-viewer--dark,
+.db-shell[data-theme='dark'] .squisq-image-viewer--dark .squisq-image-viewer-stage {
+  background: var(--db-bg);
+}
+
+/* ── Squisq accent override (blue → thematic green) ──────────── */
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-view-tab--active {
+  color: var(--db-accent-hover);
+  border-bottom-color: var(--db-accent-hover);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-toolbar-view-tab--active {
+  color: var(--db-accent-deep);
+  border-bottom-color: var(--db-accent-hover);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-toolbar-button--active {
+  background: var(--db-accent-tint-strong);
+  color: var(--db-accent-hover);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-toolbar-button--active:hover {
+  background: var(--db-accent-tint-strong);
+  color: var(--db-accent-deep);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-toolbar-overflow-item--active {
+  color: var(--db-accent-hover);
+  background: var(--db-accent-tint-strong);
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor a {
+  color: var(--db-accent-hover);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-wysiwyg-editor
+  .column-resize-handle {
+  background: var(--db-accent-hover);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-wysiwyg-editor
+  .selectedCell::after {
+  background: var(--db-accent-soft-15);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-template-picker-select {
+  background: var(--db-bg-hover);
+  border-color: var(--db-border);
+  color: var(--db-text-secondary);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-template-picker-select:focus {
+  outline-color: var(--db-accent);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-toolbar-button:disabled,
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-toolbar-button:disabled:hover {
+  color: var(--db-text-muted);
+  background: transparent;
+  cursor: not-allowed;
+  opacity: 0.6;
+  /* Desaturate colored emoji glyphs (e.g. 🖼) so they don't read as blue
+     against the warm-brown dark surface when disabled. */
+  filter: grayscale(1);
+}
+
+/* Closed-state template trigger: neutralize squisq's slate-navy bg ── */
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-template-picker-trigger {
+  background: var(--db-bg-subtle);
+  border-color: var(--db-border);
+  color: var(--db-text);
+}
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-template-picker-trigger:hover {
+  background: var(--db-bg-hover);
+  border-color: var(--db-border-strong);
+}
+
+/* ── Tooltips (portal): sans-serif + thematic chip ───────────── */
+/* Tooltips render via portal into document.body, OUTSIDE `.db-shell`
+   — so the `--db-accent-*` variables (scoped to `.db-shell`) don't
+   cascade into them. We reach the portaled element with
+   `html:has(.db-shell)` and emit explicit colors per theme; using
+   `var(--db-accent-…)` here drops to the squisq fallback (dark slate
+   bg + near-white text) because the vars never resolve. */
+html:has(.db-shell) .squisq-tooltip {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+  box-shadow: 0 2px 8px rgba(15, 30, 20, 0.35);
+  /* Default (light mode + system-light): dark espresso chip, cream
+     text — an inverted floating chip against the cream UI. */
+  background: #3d3220;
+  color: #f3eede;
+}
+
+html:has(.db-shell[data-theme='dark']) .squisq-tooltip {
+  /* Dark mode: cream chip, dark text — an inverted floating chip
+     against the espresso UI. Contrast ratio ~12:1 between
+     `#e6dcc0` and `#1f1a10`. */
+  background: #e6dcc0;
+  color: #1f1a10;
+}
+
+@media (prefers-color-scheme: dark) {
+  /* Shell defaults to system theme when `data-theme` is unset —
+     mirror the dark-mode override so the tooltip stays readable
+     without an explicit user choice. */
+  html:has(.db-shell:not([data-theme='light'])) .squisq-tooltip {
+    background: #e6dcc0;
+    color: #1f1a10;
+  }
+}
+
+/* ── Template picker accents (dark): indigo → thematic green ─── */
+/* The gallery popover renders into document.body via createPortal, so
+   neither .db-shell nor .squisq-editor-shell are ancestors. We use
+   `html:has(.db-shell[data-theme='dark'])` to detect docblocks' dark
+   theme from outside the shell, then style the portaled gallery (its
+   root has id="squisq-template-gallery-portal"). */
+
+.db-shell[data-theme='dark']
+  .squisq-editor-shell[data-theme='dark']
+  .squisq-template-picker-trigger--open {
+  border-color: var(--db-accent-hover);
+  outline-color: var(--db-accent-soft-25);
+}
+
+/* The template gallery is rendered into document.body via createPortal,
+   so it lives outside `.db-shell`. Hoist the same brown/canvas tokens
+   onto the html element (gated by `:has(.db-shell[data-theme=…])`) so
+   the portal rules below can pull from the same source of truth. */
+html:has(.db-shell[data-theme='dark']) {
+  --db-bg: #1a1812;
+  --db-bg-subtle: #262219;
+  --db-bg-hover: #3a3528;
+  --db-border: #4d4636;
+  --db-border-strong: #6b6448;
+  --db-text: #e8e2d0;
+  --db-text-muted: #a89a7c;
+  --db-accent: #c8b48f;
+  --db-accent-hover: #dec79d;
+  --db-accent-soft-15: rgba(200, 180, 143, 0.18);
+  --db-accent-soft-25: rgba(200, 180, 143, 0.28);
+  --db-accent-tint-strong: #3a382e;
+  --db-gutter-bg: #4a4538;
+}
+
+html:has(.db-shell[data-theme='light']) {
+  --db-bg: #ffffff;
+  --db-bg-subtle: #f3eede;
+  --db-bg-hover: #e9e2cb;
+  --db-border: #d6cdb0;
+  --db-border-strong: #b5a985;
+  --db-text: #2a2419;
+  --db-text-muted: #6b614a;
+  --db-accent: #7d6948;
+  --db-accent-hover: #5e4f37;
+  --db-accent-soft-15: rgba(125, 105, 72, 0.15);
+  --db-accent-soft-25: rgba(125, 105, 72, 0.25);
+  --db-accent-tint-strong: #d8d0b5;
+  --db-gutter-bg: #efe8d4;
+}
+
+html:has(.db-shell[data-theme='dark']) #squisq-template-gallery-portal {
+  background: var(--db-bg-subtle);
+  border-color: var(--db-border);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.5),
+    0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-none {
+  background: transparent;
+  border-color: var(--db-border);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-none:hover {
+  background: var(--db-bg-hover);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-none.squisq-template-gallery-card--selected {
+  background: var(--db-accent-tint-strong);
+  border-color: var(--db-accent);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-none-label {
+  color: var(--db-text);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-none-desc {
+  color: var(--db-text-muted);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-card {
+  background: transparent;
+  border-color: var(--db-border);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-card:hover {
+  background: var(--db-bg-hover);
+  border-color: var(--db-accent);
+  box-shadow: 0 1px 4px var(--db-accent-soft-15);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-card--selected {
+  background: var(--db-accent-tint-strong);
+  border-color: var(--db-accent-hover);
+  box-shadow: 0 0 0 2px var(--db-accent-soft-25);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-card-icon {
+  background: var(--db-bg);
+  border-color: var(--db-border);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-card-name {
+  color: var(--db-text);
+}
+
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-gallery-card-desc {
+  color: var(--db-text-muted);
+}
+
+/* Recolor the indigo accent fills inside template thumbnail SVGs */
+html:has(.db-shell[data-theme='dark'])
+  #squisq-template-gallery-portal
+  .squisq-template-picker-icon
+  [fill='#818cf8'] {
+  fill: var(--db-accent-hover);
+}
+
+/* ── Template picker accents (light): indigo → thematic green ── */
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-template-picker-trigger--open {
+  border-color: var(--db-accent);
+  outline-color: var(--db-accent-soft-25);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-template-gallery-card:hover {
+  border-color: var(--db-input-border);
+  box-shadow: 0 1px 4px var(--db-accent-soft-08);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-template-gallery-card--selected {
+  background: var(--db-accent-tint);
+  border-color: var(--db-accent);
+  box-shadow: 0 0 0 2px var(--db-accent-soft-15);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-template-gallery-none.squisq-template-gallery-card--selected {
+  background: var(--db-accent-tint);
+  border-color: var(--db-accent-tint-strong);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-template-picker-icon
+  [fill='#818cf8'] {
+  fill: var(--db-accent);
+}
+
+/* ── Template badge: inherit OS font, amber palette ──────────── */
+
+.db-shell .squisq-template-badge {
+  font-family: inherit;
+}
+
+.db-shell[data-theme='light'] .squisq-template-badge {
+  color: #92400e;
+  background: #fef3c7;
+  border-color: #fcd34d;
+}
+
+.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-template-badge {
+  color: #fbbf24;
+  background: #2a1e08;
+  border-color: #92400e;
+}
+
+/* Light mode squisq surfaces (toolbar, header, status bar) */
+.db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] .squisq-editor-header {
+  background: var(--db-accent-tint);
+  border-bottom-color: var(--db-border-strong);
+}
+
+/* Toolbar / view-tabs: the formatting area sits LIGHTER than the
+   mode-switcher tabs on its left, so the cluster of buttons fades
+   into the canvas while the mode switcher reads as the anchor. */
+.db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] .squisq-toolbar {
+  background: var(--db-accent-tint);
+}
+
+.db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] .squisq-toolbar-view-tabs {
+  background: var(--db-gutter-bg);
+  border-right-color: var(--db-border);
+}
+
+.db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] .squisq-status-bar {
+  background: var(--db-accent-tint-strong);
+  border-top-color: var(--db-border);
+}
+
+/* Status bar "✓ OK" indicator — squisq paints this in saturated emerald
+   (#059669 light, #34d399 dark). Re-tone to the sage accent so the
+   parse-status indicator harmonizes with the rest of the chrome. */
+.db-shell .squisq-status-ok {
+  color: var(--db-accent);
+}
+
+.db-shell[data-theme='dark'] .squisq-status-ok {
+  color: var(--db-accent-hover);
+}
+
+/* Outline pane (left of the editor) — squisq paints a warm beige
+   (#dcd8d0 light / dark slate in dark mode). Re-tone to `--db-gutter-bg`
+   so it matches the inline-preview gutter on the right and reads as
+   one step lighter than the toolbar above. */
+.db-shell[data-theme='light'] .squisq-outline {
+  background: var(--db-gutter-bg);
+  color: var(--db-text);
+}
+
+.db-shell[data-theme='light'] .squisq-outline-row:hover {
+  background: var(--db-accent-soft-15);
+}
+
+.db-shell[data-theme='dark'] .squisq-outline {
+  background: var(--db-gutter-bg);
+  color: var(--db-text);
+}
+
+.db-shell[data-theme='dark'] .squisq-outline-row:hover {
+  background: var(--db-accent-soft-15);
+}
+
+/* Explicit borders on the canvas side of each chrome pane so the
+   white editor area reads as a clearly-edged "page" rather than
+   blending into the cream gutters. Uses --db-border-strong to match
+   the hairline under the toolbar. */
+.db-shell .squisq-outline {
+  border-right: 1px solid var(--db-border-strong);
+}
+
+.db-shell .squisq-inline-preview-gutter {
+  border-left: 1px solid var(--db-border-strong);
+}
+
+/* Monaco's line-number gutter ("editorGutter.background") is set via
+   squisq's JS-side theme registration — those colors can't be CSS
+   variables. To make the gutter blend with the outline/preview chrome
+   on either side, we override the painted bg on `.margin` and its
+   `.margin-view-overlays` child with our --db-gutter-bg. `!important`
+   is required because Monaco inlines the color via the style attribute.
+   The right-edge seam pseudo-element (`.margin::after`) also retones
+   to --db-border so it's a single hairline matching the toolbar's
+   bottom border, not a contrast stripe of its own. */
+.db-shell .squisq-raw-editor-container .monaco-editor .margin,
+.db-shell .squisq-raw-editor-container .monaco-editor .margin-view-overlays {
+  background-color: var(--db-gutter-bg) !important;
+}
+
+.db-shell .squisq-raw-editor-container .monaco-editor .margin::after {
+  background: var(--db-border);
+}
+
+/* Light mode squisq accents */
+.db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] .squisq-view-tab--active,
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-toolbar-view-tab--active {
+  color: var(--db-accent-hover);
+  border-bottom-color: var(--db-accent);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-toolbar-button--active {
+  background: var(--db-accent-tint);
+  color: var(--db-accent-hover);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-toolbar-button--active:hover {
+  background: var(--db-accent-tint-strong);
+  color: var(--db-accent-deep);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-toolbar-overflow-item--active {
+  background: var(--db-accent-tint);
+  color: var(--db-accent-hover);
+}
+
+.db-shell[data-theme='light'] .squisq-editor-shell[data-theme='light'] .squisq-wysiwyg-editor a {
+  color: var(--db-accent-hover);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-wysiwyg-editor
+  .column-resize-handle {
+  background: var(--db-accent);
+}
+
+.db-shell[data-theme='light']
+  .squisq-editor-shell[data-theme='light']
+  .squisq-wysiwyg-editor
+  .selectedCell::after {
+  background: var(--db-accent-soft-12);
+}
+
+/* Version history popover — DocBlocks-specific overrides.
+   The upstream squisq popover uses Tailwind's slate-blue palette
+   (#1f2937 bg, #374151 border, #2563eb selection). Inside DocBlocks we
+   want the same dark surface used by the rest of the shell (--db-bg /
+   --db-border). Selected rows pick up the sage accent at low alpha. */
+.db-shell .squisq-version-history-row--selected {
+  background: var(--db-accent-soft-15);
+}
+
+.db-shell[data-theme='dark'] .squisq-version-history-row--selected {
+  background: var(--db-accent-soft-25);
+}
+
+.db-shell[data-theme='dark'] .squisq-version-history-popover {
+  background: var(--db-bg);
+  border-color: var(--db-border);
+  color: var(--db-text);
+}
+
+.db-shell[data-theme='dark'] .squisq-version-history-header,
+.db-shell[data-theme='dark'] .squisq-version-history-diff-header,
+.db-shell[data-theme='dark']
+  .squisq-version-history-popover--with-diff
+  .squisq-version-history-list-pane,
+.db-shell[data-theme='dark'] .squisq-version-history-row--current {
+  border-color: var(--db-border);
+}
+
+.db-shell[data-theme='dark'] .squisq-version-history-row:hover {
+  background: var(--db-bg-hover);
+}
+
+/* ── Save toast ──────────────────────────────────────────────
+   Comfort-blanket flyover triggered by Ctrl/Cmd+S. Files are
+   already autosaved on every keystroke; this just confirms it
+   so muscle-memory savers feel at ease. */
+
+/* ── Welcome gateway ─────────────────────────────────────────── */
+/* One-time first-run callout floated over the welcome doc's Play
+   view. Names the mode the user landed in and offers a one-click
+   path into the editor. Dismissed forever via localStorage. */
+
+.db-welcome-gateway {
+  position: absolute;
+  bottom: 56px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: min(640px, calc(100% - 32px));
+  padding: 10px 10px 10px 16px;
+  background: var(--db-bg);
+  border: 1px solid var(--db-border-strong);
+  border-radius: 10px;
+  box-shadow: 0 10px 32px var(--db-shadow);
+  color: var(--db-text);
+  font-size: 13px;
+  line-height: 1.45;
+  animation: db-welcome-gateway-in 0.4s ease-out;
+}
+
+.db-welcome-gateway-cta {
+  flex-shrink: 0;
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--db-accent);
+  color: var(--db-bg);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.db-welcome-gateway-cta:hover {
+  background: var(--db-accent-hover);
+}
+
+.db-welcome-gateway-dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  font-size: 16px;
+  line-height: 1;
+  background: transparent;
+  color: var(--db-text-muted);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.db-welcome-gateway-dismiss:hover {
+  background: var(--db-bg-hover);
+  color: var(--db-text);
+}
+
+@keyframes db-welcome-gateway-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 8px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+.db-save-toast {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 200;
+  padding: 8px 16px;
+  font-size: 13px;
+  line-height: 1.4;
+  color: #fff;
+  background: rgba(31, 41, 55, 0.92);
+  border-radius: 6px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+  animation: db-save-toast-fade 1.8s ease-out forwards;
+}
+
+.db-shell[data-theme='light'] .db-save-toast {
+  background: rgba(17, 24, 39, 0.88);
+}
+
+@keyframes db-save-toast-fade {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, 6px);
+  }
+  10% {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+  80% {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -4px);
+  }
 }