npm - @bendyline/docblocks-react - Versions diffs - 2.5.0 → 2.6.0 - Mend

@bendyline/docblocks-react 2.5.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +18 -0
package/THIRD_PARTY_NOTICES.txt +154 -55
package/dist/{ExportDialog-VBWHFJ2R.js → ExportDialog-Q4VWI43H.js} +2 -2
package/dist/{ExportToolbarControls-BUVJCSMV.js → ExportToolbarControls-QYLBRWM7.js} +7 -7
package/dist/GitGrantNotice-I2VNKPLH.js +29 -0
package/dist/{GitToolbarControl-VJVK2B4X.js → GitToolbarControl-O5AXBC6T.js} +5 -3
package/dist/{GitUI-CAKFVKWY.js → GitUI-L5T3XHZG.js} +68 -14
package/dist/calculation/index.d.ts +27 -0
package/dist/calculation/index.js +16 -0
package/dist/chunk-6E635KCJ.js +11 -0
package/dist/chunk-DUKTAKB4.js +83 -0
package/dist/{chunk-VRRL6VTD.js → chunk-Q6XNIKDG.js} +63 -0
package/dist/{chunk-HFYPTTCH.js → chunk-V2ENBGUA.js} +0 -9
package/dist/export/index.js +5 -5
package/dist/index.d.ts +42 -7
package/dist/index.js +881 -509
package/dist/proofing/index.d.ts +112 -0
package/dist/proofing/index.js +50 -0
package/dist/settings/index.d.ts +37 -1
package/dist/settings/index.js +11 -3
package/package.json +20 -9
package/src/styles/docblocks.css +364 -96
package/dist/{chunk-SIIEGOHY.js → chunk-FMDLZ4ZG.js} +3 -3

package/src/styles/docblocks.css CHANGED Viewed

@@ -13,6 +13,12 @@
    `--db-accent-tint-strong`, `--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. */
+/* The palette binds on the document root as well as on the shell. Squisq
+   mounts its menus, dialogs and flyouts in PORTALS on <body>, outside the
+   shell — without a root binding they cannot see --db-*, which is why the
+   editor chrome used to need per-menu patches further down. The root
+   follows whichever appearance the shell in the page resolved to. */
+:root,
 .db-shell {
   --db-bg: #ffffff;
   --db-bg-subtle: #f3eede;
@@ -45,9 +51,16 @@
   --db-badge-bg: #f3eede;
   --db-badge-text: #3d3220;
   --db-badge-text-hover: #2a2419;
-  /* 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. */
+  /* The editor "desk": every chrome surface the page floats on — the
+     outline pane, the inline-preview gutter, the Monaco line-number
+     margin, and (via `--squisq-desk-bg`) the field behind the WYSIWYG
+     page in light mode. Squisq's own default for that field is a cool
+     `#dcd8d0`, which read as a grey slab against this cream palette;
+     binding it here keeps the whole editor area one continuous tone.
+     Dark mode re-points that one field at `--db-editor-canvas` so the
+     page still sits lighter than what it floats on.
+     Sits one step lighter than the toolbar (`--db-accent-tint-strong`)
+     so the chrome still reads as distinct from the action bar. */
   --db-gutter-bg: #efe8d4;
   --db-input-border: #c4b693;
   --db-danger: #b22b1b;
@@ -64,6 +77,7 @@
   --db-git-conflicted: #b22b1b;
 }
+:root:has(.db-shell[data-theme='dark']),
 .db-shell[data-theme='dark'] {
   --db-bg: #1a1812;
   --db-bg-subtle: #262219;
@@ -97,10 +111,12 @@
   --db-danger-bg: #1c1917;
   --db-text-on-danger: #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;
+  /* Dark mode reads contrast the other way round: a pane lighter than
+     the toolbar becomes a lit slab beside a near-black canvas. So the
+     desk recedes to the same tone as `--db-editor-canvas` — the field
+     the page already floats on — and the panes flanking that field
+     match it instead of bracketing it in a brighter frame. */
+  --db-gutter-bg: #16110b;
   --db-git-modified: #e5b567;
   --db-git-added: #81c784;
   --db-git-untracked: #81c784;
@@ -110,6 +126,7 @@
 }
 @media (prefers-color-scheme: dark) {
+  :root:has(.db-shell:not([data-theme='light'])),
   .db-shell:not([data-theme='light']) {
     --db-bg: #1a1812;
     --db-bg-subtle: #262219;
@@ -138,7 +155,7 @@
     --db-danger-bg: #1c1917;
     --db-text-on-danger: #1c1917;
     --db-shadow: rgba(0, 0, 0, 0.4);
-    --db-gutter-bg: #4a4538;
+    --db-gutter-bg: #16110b;
     --db-git-modified: #e5b567;
     --db-git-added: #81c784;
     --db-git-untracked: #81c784;
@@ -496,14 +513,25 @@
 /* ── New Item Input ──────────────────────────────────────────── */
 .db-new-item {
-  padding: 4px 8px;
+  padding: 8px;
   border-bottom: 1px solid var(--db-border);
 }
 .db-new-item-row {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
+}
+.db-new-item-row--file {
+  display: grid;
+  align-items: stretch;
+}
+.db-new-item-file-controls {
+  display: flex;
+  align-items: stretch;
+  gap: 6px;
 }
 .db-new-item-input {
@@ -533,15 +561,23 @@
   border-color: var(--db-danger);
 }
-.db-new-item-add:focus-visible {
+.db-new-item-add:focus-visible,
+.db-new-item-format:focus-visible {
   outline: 2px solid var(--db-focus);
   outline-offset: 1px;
 }
-.db-new-item-suffix {
+.db-new-item-format {
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 4px 24px 4px 7px;
+  font: inherit;
   font-size: 12px;
-  color: var(--db-text-muted);
-  flex-shrink: 0;
+  background: var(--db-bg);
+  color: var(--db-text);
+  border: 1px solid var(--db-input-border);
+  border-radius: 3px;
 }
 .db-new-item-add {
@@ -560,6 +596,7 @@
 }
 .db-new-item-input:disabled,
+.db-new-item-format:disabled,
 .db-new-item-add:disabled {
   cursor: default;
   opacity: 0.65;
@@ -1262,6 +1299,62 @@
   flex-direction: column;
   overflow: hidden;
   flex-shrink: 0;
+  position: relative;
+}
+.db-sidebar-collapse-preview {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  background: color-mix(in srgb, var(--db-bg) 78%, transparent);
+  color: var(--db-text);
+  backdrop-filter: blur(1px) grayscale(0.3);
+  transition:
+    opacity 120ms ease,
+    visibility 0s linear 120ms;
+}
+.db-shell-sidebar--collapse-preview .db-sidebar-collapse-preview {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+.db-sidebar-collapse-preview-icon {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 88px;
+  height: 88px;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 22px;
+  background: var(--db-bg-subtle);
+  color: var(--db-accent);
+  box-shadow: 0 10px 30px var(--db-shadow);
+}
+.db-sidebar-collapse-preview-icon svg {
+  width: 64px;
+  height: 64px;
+}
+.db-sidebar-collapse-preview-label {
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: var(--db-bg-subtle);
+  box-shadow: 0 4px 14px var(--db-shadow);
+  color: var(--db-text-secondary);
+  font-size: 13px;
+  font-weight: 600;
 }
 /* Drag handle between sidebar and editor. The visible line is the
@@ -1511,10 +1604,10 @@ body.db-resizing-sidebar * {
 }
 /* The compact editor uses two deliberate toolbar rows: navigation/views on
-   top and actions below. Squisq's formatting actions remain available through
-   its measured More menu; hiding their inline copies removes clipped,
-   keyboard-focusable controls while leaving room for versioning, document
-   settings, Files, and DocBlocks' Export and share control. */
+   top and actions below. The second row keeps versioning, document settings,
+   Files, and DocBlocks' Export and share control at its right; Squisq's
+   formatting actions fill whatever width is left over and spill the remainder
+   into its measured More menu. */
 .db-shell--mobile .squisq-toolbar {
   min-height: 88px;
   flex-wrap: wrap;
@@ -1538,25 +1631,26 @@ body.db-resizing-sidebar * {
   height: 44px;
 }
+/* A zero flex basis keeps the actions row out of flex line-breaking — its
+   intrinsic width is far wider than the row, and breaking uses the base size,
+   so any other basis would push the right-side controls onto a third row.
+   Growing from zero then hands it every pixel the fixed controls leave. */
 .db-shell--mobile .squisq-toolbar-actions {
-  flex: 0 1 0;
-  width: 0;
+  flex: 1 1 0;
+  min-width: 0;
   height: 44px;
 }
-.db-shell--mobile .squisq-toolbar-actions > * {
-  visibility: hidden;
-}
 .db-shell--mobile .squisq-toolbar-overflow,
 .db-shell--mobile .squisq-toolbar > .squisq-toolbar-button,
 .db-shell--mobile .squisq-toolbar > .db-toolbar-menu {
   flex: 0 0 auto;
 }
-/* The compact layout moves Squisq's overflow trigger to the left edge of
-   the second row. Its desktop right-aligned placement can consequently put
-   the menu off-canvas, so anchor the mobile popover to the viewport instead. */
+/* The compact layout puts Squisq's overflow trigger part-way along the second
+   row, wherever the formatting buttons stop. Its desktop right-aligned
+   placement would hang the menu off-canvas from there, so anchor the mobile
+   popover to the viewport instead. */
 .db-shell--mobile .squisq-editor-shell .squisq-toolbar-overflow-menu {
   right: auto !important;
   left: max(4px, env(safe-area-inset-left)) !important;
@@ -1565,6 +1659,32 @@ body.db-resizing-sidebar * {
   overflow-y: auto;
 }
+/* A wide sidebar or a narrow window can leave the editor pane too small for
+   the view tabs, formatting controls, and host controls to share one row —
+   the actions lane is the only flexible item, so it is what gets squeezed to
+   nothing. Past the measured pane width the view tabs take a row of their own
+   and everything else drops below them: the same two-row shape the compact
+   layout uses, without giving up the split view. The shell class comes from a
+   ResizeObserver on the editor pane, so dragging the sidebar is handled too.
+   Electron overrides the row height to line these rows up with its native
+   caption buttons; see packages/desktop/renderer/titlebar.css. */
+.db-shell--desktop-toolbar-wrapped:not(.db-shell--mobile) {
+  --db-toolbar-wrapped-row: 44px;
+}
+.db-shell--desktop-toolbar-wrapped:not(.db-shell--mobile) .squisq-toolbar {
+  min-height: calc(var(--db-toolbar-wrapped-row) * 2);
+  flex-wrap: wrap;
+  align-content: stretch;
+}
+.db-shell--desktop-toolbar-wrapped:not(.db-shell--mobile) .squisq-toolbar-view-tabs {
+  box-sizing: border-box;
+  flex: 0 0 100%;
+  width: 100%;
+  height: var(--db-toolbar-wrapped-row);
+}
 .db-mobile-back {
   display: flex;
   align-items: center;
@@ -2894,21 +3014,95 @@ body.db-resizing-sidebar * {
   background: var(--db-editor-canvas);
 }
-/* Bind Squisq's host-facing accent to the active DocBlocks appearance.
-   RawEditor uses the editor background/foreground variables for its
-   textarea while Monaco's first lazy load is in flight. Define them here so
-   Source view never paints Squisq's light fallback before the requested
-   Monaco theme is ready. */
-.db-shell .squisq-editor-shell {
+/* ── Squisq chrome palette → DocBlocks ────────────────────────── */
+/* Squisq declares its whole editor-chrome palette as `--squisq-*` tokens
+   (see squisq's docs/theming.md), inside `:where()` at zero specificity so
+   a host can rebind it. This block is that rebinding, and it is the seam the
+   older per-selector patches below were standing in for — bind a token here
+   rather than adding another `.db-shell .squisq-thing` rule.
+   The selector list mirrors squisq's own. `:root` covers the app; the bare
+   `[data-theme]` covers the editor shell AND the menus, dialogs and flyouts
+   that portal to <body>. Those stamp their own `data-theme`, which is what
+   squisq keys its dark values off — and a declaration ON an element beats
+   one inherited from an ancestor, so a `:root`-only binding would leave
+   squisq's slate/blue winning inside the shell. */
+:root,
+[data-theme] {
+  /* Ink. DocBlocks has four ink steps to squisq's five. */
+  --squisq-text-strong: var(--db-text);
+  --squisq-text: var(--db-text);
+  --squisq-text-soft: var(--db-text-secondary);
+  --squisq-text-muted: var(--db-text-muted);
+  --squisq-text-faint: var(--db-text-placeholder);
+  /* Surfaces. */
+  --squisq-bg: var(--db-bg-subtle);
+  --squisq-surface: var(--db-bg);
+  --squisq-surface-subtle: var(--db-bg-subtle);
+  --squisq-surface-sunken: var(--db-bg-subtle);
+  --squisq-surface-hover: var(--db-bg-hover);
+  --squisq-surface-raised: var(--db-bg-hover);
+  --squisq-input-bg: var(--db-bg);
+  --squisq-row-hover: var(--db-bg-hover);
+  --squisq-hover-bg: var(--db-bg-hover);
+  --squisq-panel-bg: var(--db-bg);
+  /* The desk the editing page floats on — the WYSIWYG backing, the block
+     card and its preview panel, the outline pane, the Monaco margin. */
+  --squisq-desk-bg: var(--db-gutter-bg);
+  --squisq-desk-rail: var(--db-bg-subtle);
+  --squisq-desk-border: var(--db-border);
+  --squisq-border-subtle: var(--db-border);
+  --squisq-border: var(--db-border-strong);
+  --squisq-border-strong: var(--db-border-strong);
+  /* Accent. `--db-accent` is also the selected-row fill, so the focus ring
+     deliberately points at `--db-focus` — a ring the same color as the fill
+     it sits on is invisible. */
   --squisq-accent: var(--db-accent);
   --squisq-accent-hover: var(--db-accent-hover);
+  --squisq-accent-strong: var(--db-accent-deep);
+  --squisq-accent-soft: var(--db-accent-tint-strong);
+  --squisq-accent-subtle: var(--db-accent-soft-12);
+  --squisq-accent-border: var(--db-accent-soft-25);
   --squisq-text-on-accent: var(--db-text-on-accent);
-  /* Hover/open surface for toolbar dropdown triggers (e.g. the cover-slide
-     control). Squisq leaves this token undefined and falls back to its own
-     palette; bind it so the open trigger keeps DocBlocks hover contrast. */
-  --squisq-hover-bg: var(--db-bg-hover);
-  --squisq-editor-background: #ffffff;
-  --squisq-editor-foreground: #1f2937;
+  --squisq-focus-ring: var(--db-focus);
+  --squisq-danger: var(--db-danger);
+  --squisq-danger-hover: var(--db-danger);
+  --squisq-danger-strong: var(--db-danger);
+  --squisq-danger-soft: var(--db-danger-bg);
+  --squisq-danger-border: var(--db-danger);
+  --squisq-text-on-danger: var(--db-text-on-danger);
+  /* Advisory and success reuse the git-status hues, which are already the
+     app's vocabulary for "changed" and "added". */
+  --squisq-warning: var(--db-git-modified);
+  --squisq-warning-hover: var(--db-git-modified);
+  --squisq-warning-strong: var(--db-git-modified);
+  --squisq-warning-soft: var(--db-bg-subtle);
+  --squisq-warning-border: var(--db-git-modified);
+  --squisq-success: var(--db-git-added);
+  --squisq-success-border: var(--db-git-added);
+  --squisq-shadow-rgb: 40 30 15;
+  /* Monaco's canvas while its lazy load is in flight — without these,
+     Source view paints squisq's white fallback before the requested Monaco
+     theme is ready, which reads as a flash. */
+  --squisq-editor-background: var(--db-editor-canvas);
+  --squisq-editor-foreground: var(--db-text);
+}
+/* Match Monaco's built-in vs-dark canvas exactly so replacing the loading
+   textarea with Monaco does not introduce a second, subtler color flash. */
+:root:has(.db-shell[data-theme='dark']),
+.db-shell[data-theme='dark'],
+.squisq-editor-shell[data-theme='dark'] {
+  --squisq-editor-background: #1e1e1e;
+  --squisq-editor-foreground: #d4d4d4;
 }
 /* Squisq's segmented mode controls otherwise retain their standalone
@@ -2946,13 +3140,6 @@ body.db-resizing-sidebar * {
   outline-offset: -2px;
 }
-.db-shell .squisq-editor-shell[data-theme='dark'] {
-  /* Match Monaco's built-in vs-dark canvas exactly so replacing the loading
-     textarea with Monaco does not introduce a second, subtler color flash. */
-  --squisq-editor-background: #1e1e1e;
-  --squisq-editor-foreground: #d4d4d4;
-}
 /* The Write-canvas font picker is an explicit host preference, so its
    variables must beat the active document theme in Write mode. Squisq's base
    stylesheet intentionally puts theme fonts first; reverse that order only
@@ -2996,6 +3183,27 @@ body.db-resizing-sidebar * {
   --squisq-text-muted: var(--db-text-muted);
 }
+/* ── Editor desk ─────────────────────────────────────────────── */
+/* Squisq paints its outline pane, block card, block-preview panel, and the
+   field behind the WYSIWYG page from one `--squisq-desk-bg` token — the
+   "desk" the page floats on. Bind it to the DocBlocks desk tone once, and
+   paint those surfaces from it here as well so the pairing also holds
+   against a published squisq predating the token. Anything that wants to
+   sit apart from the desk shades from `--db-gutter-bg`; it should not pick
+   a tone of its own, which is how the panes drifted into slabs that read
+   as brighter chrome rather than as the surface under the page.
+   (The inline-preview gutter is left to `--squisq-preview-gutter-bg`,
+   bound to the same value below, so hosts can still peel it off.) */
+.db-shell .squisq-editor-shell {
+  --squisq-desk-bg: var(--db-gutter-bg);
+}
+.db-shell
+  .squisq-editor-shell
+  :is(.squisq-wysiwyg-container, .squisq-block-card, .squisq-block-preview-panel, .squisq-outline) {
+  background: var(--squisq-desk-bg);
+}
 /* ── Inline preview gutter: thematic green ──────────────────── */
 /* Rebind squisq's `--squisq-preview-*` custom properties so the
    gutter chrome (vertical bracket, diagonal connector + dots,
@@ -3055,10 +3263,6 @@ body.db-resizing-sidebar * {
   background: var(--db-bg);
 }
-.db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-container {
-  background: var(--db-editor-canvas);
-}
 .db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor {
   background: var(--db-bg);
 }
@@ -3414,7 +3618,7 @@ html:has(.db-shell[data-theme='dark']) {
   --db-accent-soft-25: rgba(200, 180, 143, 0.28);
   --db-accent-tint-strong: #3a382e;
   --db-accent-deep: #e6dcc0;
-  --db-gutter-bg: #4a4538;
+  --db-gutter-bg: #16110b;
 }
 html:has(.db-shell[data-theme='light']) {
@@ -3515,7 +3719,7 @@ html:has(.db-shell[data-theme='dark'][data-accent='green']) {
   --db-text-on-selected: #e2ebe4;
   --db-accent-tint-strong: #2f4034;
   --db-accent-deep: #d4e8d9;
-  --db-gutter-bg: #3b4d40;
+  --db-gutter-bg: #0e1510;
   --db-input-border: #9ec2a8;
   --db-editor-canvas: #0e1510;
   --db-badge-bg: #294031;
@@ -3564,7 +3768,7 @@ html:has(.db-shell[data-theme='dark'][data-accent='blue']) {
   --db-text-on-selected: #e2e8ef;
   --db-accent-tint-strong: #2e3b49;
   --db-accent-deep: #d8e5f2;
-  --db-gutter-bg: #394858;
+  --db-gutter-bg: #0f1318;
   --db-input-border: #a7bdd8;
   --db-editor-canvas: #0f1318;
   --db-badge-bg: #28394a;
@@ -3613,7 +3817,7 @@ html:has(.db-shell[data-theme='dark'][data-accent='purple']) {
   --db-text-on-selected: #ece3ef;
   --db-accent-tint-strong: #413348;
   --db-accent-deep: #eadcf1;
-  --db-gutter-bg: #493b50;
+  --db-gutter-bg: #120f15;
   --db-input-border: #c2a9d4;
   --db-editor-canvas: #120f15;
   --db-badge-bg: #3b2a44;
@@ -3662,7 +3866,7 @@ html:has(.db-shell[data-theme='dark'][data-accent='maroon']) {
   --db-text-on-selected: #f0e3e7;
   --db-accent-tint-strong: #473139;
   --db-accent-deep: #f0d8e0;
-  --db-gutter-bg: #503b42;
+  --db-gutter-bg: #150e11;
   --db-input-border: #d0a5b4;
   --db-editor-canvas: #150e11;
   --db-badge-bg: #442832;
@@ -3711,7 +3915,7 @@ html:has(.db-shell[data-theme='dark'][data-accent='orange']) {
   --db-text-on-selected: #f0e7dc;
   --db-accent-tint-strong: #493a2a;
   --db-accent-deep: #f1dbc4;
-  --db-gutter-bg: #514333;
+  --db-gutter-bg: #15100c;
   --db-input-border: #d7b08a;
   --db-editor-canvas: #15100c;
   --db-badge-bg: #44301f;
@@ -3760,7 +3964,7 @@ html:has(.db-shell[data-theme='dark'][data-accent='gray']) {
   --db-text-on-selected: #e8e8e8;
   --db-accent-tint-strong: #383838;
   --db-accent-deep: #e2e2e2;
-  --db-gutter-bg: #444444;
+  --db-gutter-bg: #111111;
   --db-input-border: #b8b8b8;
   --db-editor-canvas: #111111;
   --db-badge-bg: #333333;
@@ -3839,8 +4043,14 @@ html:has(.db-shell) .squisq-cover-slide-menu {
 /* Custom layout authoring is portaled to document.body. Bind its host-facing
    accent tokens at that portal boundary so selected layouts, palette states,
    primary actions, and focus rings follow the active DocBlocks accent instead
-   of Squisq's standalone indigo defaults. */
-html:has(.db-shell) :is(.squisq-template-designer-overlay, .squisq-layout-manager-overlay) {
+   of Squisq's standalone indigo defaults. Squisq repeats `data-theme` on the
+   nested layout-manager panel, so that second theme root needs the same bridge. */
+html:has(.db-shell)
+  :is(
+    .squisq-template-designer-overlay,
+    .squisq-layout-manager-overlay,
+    .squisq-layout-manager-panel
+  ) {
   --squisq-layout-accent-text: var(--db-accent-hover);
   --squisq-layout-accent-bg: var(--db-accent);
   --squisq-layout-accent-bg-hover: var(--db-accent-hover);
@@ -3852,13 +4062,21 @@ html:has(.db-shell) :is(.squisq-template-designer-overlay, .squisq-layout-manage
 }
 html:has(.db-shell)
-  :is(.squisq-template-designer-overlay, .squisq-layout-manager-overlay)
+  :is(
+    .squisq-template-designer-overlay,
+    .squisq-layout-manager-overlay,
+    .squisq-layout-manager-panel
+  )
   .squisq-template-designer-btn--primary {
   color: var(--db-text-on-accent);
 }
 html:has(.db-shell)
-  :is(.squisq-template-designer-overlay, .squisq-layout-manager-overlay)
+  :is(
+    .squisq-template-designer-overlay,
+    .squisq-layout-manager-overlay,
+    .squisq-layout-manager-panel
+  )
   .squisq-template-designer-field
   input:focus {
   box-shadow: 0 0 0 3px var(--db-accent-soft-25);
@@ -4200,7 +4418,7 @@ html:has(.db-shell)
   color: var(--squisq-template-gallery-section-title);
 }
-html:has(.db-shell[data-theme='dark']) #squisq-template-gallery-portal {
+html:has(.db-shell[data-theme='dark']) [data-squisq-template-gallery-portal] {
   background: var(--db-bg-subtle);
   border-color: var(--db-border);
   box-shadow:
@@ -4209,46 +4427,46 @@ html:has(.db-shell[data-theme='dark']) #squisq-template-gallery-portal {
 }
 html:has(.db-shell[data-theme='dark'])
-  #squisq-template-gallery-portal
+  [data-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
+  [data-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
+  [data-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
+  [data-squisq-template-gallery-portal]
   .squisq-template-gallery-none-label {
   color: var(--db-text);
 }
 html:has(.db-shell[data-theme='dark'])
-  #squisq-template-gallery-portal
+  [data-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
+  [data-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
+  [data-squisq-template-gallery-portal]
   .squisq-template-gallery-card:hover {
   background: var(--db-bg-hover);
   border-color: var(--db-accent);
@@ -4256,7 +4474,7 @@ html:has(.db-shell[data-theme='dark'])
 }
 html:has(.db-shell[data-theme='dark'])
-  #squisq-template-gallery-portal
+  [data-squisq-template-gallery-portal]
   .squisq-template-gallery-card--selected {
   background: var(--db-accent-tint-strong);
   border-color: var(--db-accent-hover);
@@ -4264,27 +4482,27 @@ html:has(.db-shell[data-theme='dark'])
 }
 html:has(.db-shell[data-theme='dark'])
-  #squisq-template-gallery-portal
+  [data-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
+  [data-squisq-template-gallery-portal]
   .squisq-template-gallery-card-name {
   color: var(--db-text);
 }
 html:has(.db-shell[data-theme='dark'])
-  #squisq-template-gallery-portal
+  [data-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
+  [data-squisq-template-gallery-portal]
   .squisq-template-picker-icon
   [fill='#818cf8'] {
   fill: var(--db-accent-hover);
@@ -4546,38 +4764,28 @@ html:has(.db-shell[data-theme='dark'])
   opacity: 0.62;
 }
-/* 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);
+/* Outline pane (left of the editor). Its background comes from
+   `--squisq-desk-bg` above, same as every other desk surface — only the
+   text and hover tint need binding to the DocBlocks palette. */
+.db-shell .squisq-outline {
   color: var(--db-text);
 }
-.db-shell[data-theme='dark'] .squisq-outline-row:hover {
+.db-shell .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. */
+/* Hairlines on the canvas side of each chrome pane. The desk is one
+   continuous tone across the panes and the field behind the page, so
+   these mark where the panes end without the --db-border-strong stripe
+   that used to divide two different surfaces — the page's own shadow
+   does the heavier separating. */
 .db-shell .squisq-outline {
-  border-right: 1px solid var(--db-border-strong);
+  border-right: 1px solid var(--db-border);
 }
 .db-shell .squisq-inline-preview-gutter {
-  border-left: 1px solid var(--db-border-strong);
+  border-left: 1px solid var(--db-border);
 }
 /* Toolbar overflow menu. Squisq intentionally ships a neutral slate
@@ -5241,6 +5449,55 @@ html:has(.db-shell[data-theme='dark'])
   flex-shrink: 0;
 }
+/* The offer to turn Git on for a folder inside a larger repository. It sits
+   directly above the sidebar footer and borrows its voice: muted, 11px, no
+   icon and no accent — this is a default the user may change, not a fault. */
+.db-git-grant-notice {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 6px 12px 6px 18px;
+  border-top: 1px solid var(--db-border);
+  color: var(--db-text-muted);
+  font-size: 11px;
+  line-height: 1.3;
+}
+.db-git-grant-notice-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.db-git-grant-notice-action {
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  text-decoration: underline;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.db-git-grant-notice-action:hover {
+  color: var(--db-text-secondary);
+}
+.db-git-grant-remember {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 12px 0;
+  font-size: 13px;
+  color: var(--db-text);
+  cursor: pointer;
+}
 /* Actions dropdown (mirrors db-ws-settings-dropdown) */
 .db-git-menu {
   position: absolute;
@@ -5604,6 +5861,7 @@ button.db-git-file-row:hover {
   .db-app-menu-caret,
   .db-ws-settings-btn,
   .db-shell-sidebar-resizer,
+  .db-sidebar-collapse-preview,
   .db-export-chip,
   .db-git-progress-bar > span {
     transition: none;
@@ -5684,6 +5942,16 @@ button.db-git-file-row:hover {
     min-height: 0;
   }
+  /* The flexible actions lane owns the otherwise-empty gap between Squisq's
+     formatting controls and the fixed document controls. Mark the child
+     explicitly because its overflow clipping can prevent the toolbar's drag
+     region from reaching those pixels. Controls opt out below. */
+  .db-shell .squisq-toolbar-actions {
+    app-region: drag;
+    -webkit-app-region: drag;
+    cursor: grab;
+  }
   .db-shell .db-shell-sidebar-header {
     padding-block: 0;
     padding-left: max(4px, calc(env(titlebar-area-x, 0px) + 4px));