@bendyline/docblocks-react 2.0.0 → 2.1.1

package/src/styles/docblocks.css

@@ -1,3 +1,5 @@
+@import '@bendyline/squisq-editor-react/styles';
+
 /* ── DocBlocks Styles ─────────────────────────────────────────── */
 
 /* ── Theme Tokens ────────────────────────────────────────────── */
@@ -27,6 +29,11 @@
   --db-accent-hover: #5e4f37;
   --db-text-on-accent: #ffffff;
   --db-text-on-selected: #ffffff;
+  /* Keyboard focus ring. Deliberately darker than --db-accent: the accent
+     is also the *selected row* fill, so an accent ring vanished against
+     it. Any surface that paints itself --db-bg-selected re-points this
+     token at a contrasting value (see .db-tree-row--selected). */
+  --db-focus: #3d3220;
   --db-accent-soft-08: rgba(125, 105, 72, 0.08);
   --db-accent-soft-10: rgba(125, 105, 72, 0.1);
   --db-accent-soft-12: rgba(125, 105, 72, 0.12);
@@ -45,6 +52,7 @@
   --db-input-border: #c4b693;
   --db-danger: #b22b1b;
   --db-danger-bg: #fdf0ee;
+  --db-text-on-danger: #ffffff;
   --db-shadow: rgba(40, 30, 15, 0.12);
   /* Git status colors — file badges, sync chips. Deleted/conflicted reuse
      the danger hue on purpose; renamed gets the one cool accent. */
@@ -72,6 +80,7 @@
   --db-accent-hover: #dec79d;
   --db-text-on-accent: #1a1812;
   --db-text-on-selected: #e8e2d0;
+  --db-focus: #e8e2d0;
   --db-accent-soft-08: rgba(200, 180, 143, 0.08);
   --db-accent-soft-10: rgba(200, 180, 143, 0.1);
   --db-accent-soft-12: rgba(200, 180, 143, 0.12);
@@ -86,6 +95,7 @@
   --db-input-border: #c8b48f;
   --db-danger: #f87171;
   --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
@@ -116,6 +126,7 @@
     --db-accent-hover: #dec79d;
     --db-text-on-accent: #1a1812;
     --db-text-on-selected: #e8e2d0;
+    --db-focus: #e8e2d0;
     --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);
@@ -125,6 +136,7 @@
     --db-input-border: #c8b48f;
     --db-danger: #f87171;
     --db-danger-bg: #1c1917;
+    --db-text-on-danger: #1c1917;
     --db-shadow: rgba(0, 0, 0, 0.4);
     --db-gutter-bg: #4a4538;
     --db-git-modified: #e5b567;
@@ -202,12 +214,125 @@
   justify-content: center;
 }
 
-.db-explorer-btn:hover {
+.db-explorer-btn:hover:not(:disabled) {
   background: var(--db-bg-hover);
   border-color: var(--db-border);
   color: var(--db-text-secondary);
 }
 
+.db-explorer-btn:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+/* ── Transient workspace move ────────────────────────────────── */
+
+.db-transient-move {
+  flex-shrink: 0;
+  padding: 8px;
+  border-bottom: 1px solid var(--db-border);
+  background: var(--db-accent-soft-08);
+}
+
+.db-transient-move-trigger {
+  width: 100%;
+  padding: 7px 9px;
+  border: 1px solid var(--db-accent);
+  border-radius: 5px;
+  background: var(--db-bg);
+  color: var(--db-accent-deep);
+  font: inherit;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+
+.db-transient-move-trigger:hover {
+  background: var(--db-bg-hover);
+}
+
+.db-transient-move-trigger:focus-visible,
+.db-transient-move-select:focus-visible,
+.db-transient-move-actions button:focus-visible {
+  outline: 2px solid var(--db-focus, var(--db-accent));
+  outline-offset: 2px;
+}
+
+.db-transient-move-form {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.db-transient-move-label {
+  color: var(--db-text);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.db-transient-move-select {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 6px 28px 6px 8px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 4px;
+  background: var(--db-bg);
+  color: var(--db-text);
+  font: inherit;
+}
+
+.db-transient-move-hint,
+.db-transient-move-error {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.db-transient-move-hint {
+  color: var(--db-text-muted);
+}
+
+.db-transient-move-error {
+  color: var(--db-danger);
+}
+
+.db-transient-move-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.db-transient-move-actions button {
+  padding: 5px 10px;
+  border-radius: 4px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.db-transient-move-actions button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.db-transient-move-cancel {
+  border: 1px solid var(--db-border-strong);
+  background: var(--db-bg);
+  color: var(--db-text-secondary);
+}
+
+.db-transient-move-submit {
+  border: 1px solid var(--db-accent);
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
+}
+
+.db-transient-move-submit:hover:not(:disabled) {
+  border-color: var(--db-accent-hover);
+  background: var(--db-accent-hover);
+}
+
 /* ── New Item Input ──────────────────────────────────────────── */
 
 .db-new-item {
@@ -234,6 +359,25 @@
   outline: none;
 }
 
+/* The UA outline is suppressed above, so this is the *only* focus
+   indicator on an input a keyboard user has to type into (WCAG 2.4.7).
+   :focus-visible rather than :focus so a pointer user placing a caret
+   doesn't get a ring. */
+.db-new-item-input:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 1px;
+  border-color: var(--db-accent);
+}
+
+.db-new-item-input[aria-invalid='true'] {
+  border-color: var(--db-danger);
+}
+
+.db-new-item-add:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 1px;
+}
+
 .db-new-item-suffix {
   font-size: 12px;
   color: var(--db-text-muted);
@@ -251,10 +395,16 @@
   cursor: pointer;
 }
 
-.db-new-item-add:hover {
+.db-new-item-add:hover:not(:disabled) {
   background: var(--db-accent-hover);
 }
 
+.db-new-item-input:disabled,
+.db-new-item-add:disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+
 /* ── Tree ────────────────────────────────────────────────────── */
 
 .db-tree {
@@ -279,6 +429,17 @@
   font-size: 12px;
 }
 
+.db-tree-error-retry {
+  border: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .db-tree--drop-target {
   box-shadow: inset 0 0 0 2px var(--db-accent);
   background: var(--db-accent-soft-08);
@@ -298,6 +459,22 @@
   background: var(--db-bg-hover);
 }
 
+/* The roving-tabindex row is the tree's single tab stop, so its focus ring
+   is the only thing telling a keyboard user where they are. Inset offset
+   keeps the ring inside the scroll container instead of being clipped. */
+.db-tree-row:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
+/* A selected/drop-target row is filled with --db-bg-selected, which in
+   light mode *is* the accent brown — the default ring would disappear
+   into it. Re-point the token rather than duplicating the rule. */
+.db-tree-row--selected,
+.db-tree-row--drop-target {
+  --db-focus: #ffffff;
+}
+
 .db-tree-row--dragging {
   opacity: 0.45;
 }
@@ -348,6 +525,15 @@
   outline: none;
 }
 
+/* Same WCAG 2.4.7 gap as .db-new-item-input: the rename input is focused
+   programmatically the moment it appears, so with `outline: none` and no
+   replacement a keyboard user had no idea where they were typing. */
+.db-tree-rename-input:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 1px;
+  border-color: var(--db-accent);
+}
+
 .db-tree-more {
   flex-shrink: 0;
   display: inline-flex;
@@ -379,6 +565,11 @@
   color: var(--db-text);
 }
 
+.db-tree-more:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
 .db-tree-more--active {
   background: var(--db-bg-selected);
   color: var(--db-text-on-selected);
@@ -413,10 +604,18 @@
   color: var(--db-text-secondary);
 }
 
-.db-tree-context-item:hover {
+.db-tree-context-item:hover,
+.db-tree-context-item:focus-visible {
   background: var(--db-bg-hover);
 }
 
+/* Menu items are reached with Arrow keys (they are not tab stops), so the
+   ring is the only cue to which item Enter will fire. */
+.db-tree-context-item:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
 .db-tree-context-item--danger {
   color: var(--db-danger);
 }
@@ -566,6 +765,83 @@
   margin: 4px 0;
 }
 
+.db-workspace-create {
+  box-sizing: border-box;
+  width: min(300px, calc(100vw - 24px));
+  padding: 10px;
+}
+
+.db-workspace-create-label {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--db-text-secondary);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.db-workspace-create-input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 4px;
+  outline: none;
+  background: var(--db-bg);
+  color: var(--db-text);
+  font: inherit;
+}
+
+.db-workspace-create-input:focus-visible {
+  border-color: var(--db-accent);
+  outline: 2px solid var(--db-focus);
+  outline-offset: 1px;
+}
+
+.db-workspace-create-input[aria-invalid='true'] {
+  border-color: var(--db-danger);
+}
+
+.db-workspace-create-error {
+  margin: 6px 0 0;
+  color: var(--db-danger);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.db-workspace-create-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 9px;
+}
+
+.db-workspace-create-actions button {
+  padding: 5px 10px;
+  border: 1px solid var(--db-accent);
+  border-radius: 4px;
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.db-workspace-create-actions button:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 1px;
+}
+
+.db-workspace-create-actions button:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.db-workspace-create-actions .db-workspace-create-cancel {
+  border-color: var(--db-border-strong);
+  background: var(--db-bg);
+  color: var(--db-text-secondary);
+}
+
 /* ── App Menu ────────────────────────────────────────────────── */
 
 .db-app-menu {
@@ -929,6 +1205,142 @@ body.db-resizing-sidebar * {
   border-right: none;
 }
 
+.db-shell--mobile:has(.db-mobile-first-run) .db-file-explorer {
+  flex: 0 0 170px;
+  height: 170px;
+  min-height: 170px;
+}
+
+.db-mobile-first-run {
+  flex: 0 0 auto;
+  margin: 12px 12px auto;
+  padding: 20px;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 14px;
+  background:
+    radial-gradient(circle at 92% 4%, var(--db-accent-soft-15), transparent 42%),
+    var(--db-bg-subtle);
+  box-shadow: 0 12px 30px var(--db-shadow);
+}
+
+.db-mobile-first-run-eyebrow {
+  margin: 0 0 7px;
+  color: var(--db-accent);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.db-mobile-first-run h1 {
+  margin: 0;
+  color: var(--db-text);
+  font-size: 23px;
+  line-height: 1.2;
+}
+
+.db-mobile-first-run > p:not(.db-mobile-first-run-eyebrow) {
+  margin: 10px 0 0;
+  color: var(--db-text-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.db-mobile-first-run-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 17px;
+}
+
+.db-mobile-first-run-actions button {
+  min-height: 42px;
+  padding: 8px 12px;
+  border: 1px solid var(--db-accent);
+  border-radius: 7px;
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.db-mobile-first-run-actions button:hover {
+  border-color: var(--db-accent-hover);
+  background: var(--db-accent-hover);
+}
+
+.db-mobile-first-run-actions .db-mobile-first-run-secondary {
+  border-color: var(--db-border-strong);
+  background: var(--db-bg);
+  color: var(--db-text-secondary);
+}
+
+.db-mobile-first-run-actions .db-mobile-first-run-secondary:hover {
+  border-color: var(--db-accent);
+  background: var(--db-bg-hover);
+}
+
+.db-mobile-first-run-actions button:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 2px;
+}
+
+/* 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. */
+.db-shell--mobile .squisq-toolbar {
+  min-height: 88px;
+  flex-wrap: wrap;
+  align-content: stretch;
+  padding-right: 0;
+}
+
+.db-shell--mobile .squisq-toolbar > .db-mobile-back {
+  box-sizing: border-box;
+  flex: 0 0 44px;
+  height: 44px;
+  justify-content: center;
+  padding: 6px 10px;
+}
+
+.db-shell--mobile .squisq-toolbar-view-tabs {
+  box-sizing: border-box;
+  flex: 1 0 calc(100% - 45px);
+  width: calc(100% - 45px);
+  min-width: 0;
+  height: 44px;
+}
+
+.db-shell--mobile .squisq-toolbar-actions {
+  flex: 0 1 0;
+  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. */
+.db-shell--mobile .squisq-editor-shell .squisq-toolbar-overflow-menu {
+  right: auto !important;
+  left: max(4px, env(safe-area-inset-left)) !important;
+  max-width: calc(100vw - 8px);
+  max-height: calc(100dvh - 96px);
+  overflow-y: auto;
+}
+
 .db-mobile-back {
   display: flex;
   align-items: center;
@@ -947,9 +1359,122 @@ body.db-resizing-sidebar * {
   background: var(--db-bg-hover);
 }
 
-.db-mobile-back-arrow {
-  font-size: 18px;
-  line-height: 1;
+.db-mobile-files-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.db-mobile-files-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.db-shell-empty--workspace {
+  position: relative;
+  box-sizing: border-box;
+  flex-direction: column;
+  padding: 32px;
+  background:
+    radial-gradient(circle at 50% 38%, var(--db-accent-soft-08), transparent 44%), var(--db-bg);
+}
+
+.db-shell-empty--workspace > .db-mobile-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  justify-content: flex-start;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--db-border);
+  border-radius: 0;
+  background: var(--db-bg-subtle);
+}
+
+.db-workspace-empty-content {
+  display: flex;
+  width: min(460px, 100%);
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.db-workspace-empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  margin-bottom: 14px;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 14px;
+  background: var(--db-bg-subtle);
+  color: var(--db-accent-deep);
+}
+
+.db-workspace-empty-icon svg {
+  width: 26px;
+  height: 26px;
+}
+
+.db-workspace-empty-content h1 {
+  margin: 0;
+  color: var(--db-text);
+  font-size: 21px;
+  line-height: 1.25;
+}
+
+.db-workspace-empty-content > p {
+  max-width: 390px;
+  margin: 9px 0 0;
+  color: var(--db-text-muted);
+  line-height: 1.5;
+}
+
+.db-workspace-empty-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+.db-workspace-empty-actions button {
+  padding: 8px 13px;
+  border: 1px solid var(--db-accent);
+  border-radius: 5px;
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.db-workspace-empty-actions button:hover {
+  border-color: var(--db-accent-hover);
+  background: var(--db-accent-hover);
+}
+
+.db-workspace-empty-actions button:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 2px;
+}
+
+.db-workspace-empty-actions .db-workspace-empty-secondary {
+  border-color: var(--db-border-strong);
+  background: var(--db-bg);
+  color: var(--db-text-secondary);
+}
+
+.db-workspace-empty-actions .db-workspace-empty-secondary:hover {
+  border-color: var(--db-accent);
+  background: var(--db-bg-hover);
+}
+
+.db-workspace-empty-content .db-workspace-empty-hint {
+  margin-top: 18px;
+  font-size: 12px;
 }
 
 /* In folder/empty views, the back button sits as a standalone bar */
@@ -991,16 +1516,23 @@ body.db-resizing-sidebar * {
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  padding: 16px;
   background: rgba(0, 0, 0, 0.4);
 }
 
 .db-dialog {
+  box-sizing: border-box;
   background: var(--db-bg);
   border: 1px solid var(--db-border);
   border-radius: 8px;
   box-shadow: 0 8px 32px var(--db-shadow);
   width: 380px;
-  max-width: 90vw;
+  max-width: 100%;
+  max-height: calc(100vh - 32px);
+  max-height: calc(100dvh - 32px);
+  display: flex;
+  flex-direction: column;
 }
 
 .db-dialog-header {
@@ -1035,6 +1567,8 @@ body.db-resizing-sidebar * {
 }
 
 .db-dialog-body {
+  min-height: 0;
+  overflow-y: auto;
   padding: 16px 20px 20px;
   font-size: 13px;
   line-height: 1.6;
@@ -1058,10 +1592,35 @@ body.db-resizing-sidebar * {
   text-decoration: underline;
 }
 
-.db-dialog-links {
+.db-dialog-links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.db-about-version {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--db-border);
+  border-radius: 5px;
+  background: var(--db-bg-subtle);
+}
+
+.db-about-version span {
+  color: var(--db-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.db-about-version code {
+  color: var(--db-text);
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  user-select: all;
 }
 
 .db-dialog-sep {
@@ -1135,12 +1694,70 @@ body.db-resizing-sidebar * {
   accent-color: var(--db-accent);
 }
 
+.db-settings-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--db-text);
+  font-size: 13px;
+}
+
+.db-settings-slider + .db-settings-slider {
+  margin-top: 14px;
+}
+
+.db-settings-slider-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.db-settings-slider-value {
+  color: var(--db-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.db-settings-slider input[type='range'] {
+  width: 100%;
+  margin: 0;
+  accent-color: var(--db-accent);
+  cursor: pointer;
+}
+
 .db-settings-accent-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
   gap: 6px;
 }
 
+.db-settings-action {
+  margin-top: 4px;
+  padding: 7px 12px;
+  border: 1px solid var(--db-accent);
+  border-radius: 5px;
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.db-settings-action:hover:not(:disabled) {
+  border-color: var(--db-accent-hover);
+  background: var(--db-accent-hover);
+}
+
+.db-settings-action:focus-visible {
+  outline: 2px solid var(--db-focus, var(--db-accent));
+  outline-offset: 2px;
+}
+
+.db-settings-action:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
 .db-settings-accent {
   position: relative;
   display: flex;
@@ -1340,18 +1957,20 @@ body.db-resizing-sidebar * {
 
 .db-toolbar-menu {
   position: relative;
+  margin-left: 6px;
+  padding-left: 7px;
+  border-left: 1px solid var(--db-border);
 }
 
 .db-toolbar-menu-trigger {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
+  gap: 5px;
+  width: auto;
+  min-width: 28px;
   height: 28px;
-  padding: 0;
-  font-size: 16px;
-  font-weight: 700;
-  letter-spacing: 1px;
+  padding: 0 8px;
   line-height: 1;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -1360,6 +1979,31 @@ body.db-resizing-sidebar * {
   color: var(--db-text-muted);
 }
 
+.db-toolbar-menu-trigger svg {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+}
+
+.db-toolbar-menu-trigger-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.db-shell--mobile .db-toolbar-menu {
+  margin-left: 2px;
+  padding-left: 3px;
+}
+
+.db-shell--mobile .db-toolbar-menu-trigger {
+  width: 28px;
+  padding: 0;
+}
+
+.db-shell--mobile .db-toolbar-menu-trigger-label {
+  display: none;
+}
+
 .db-toolbar-menu-trigger:hover {
   background: var(--db-bg-hover);
   border-color: var(--db-border);
@@ -1411,10 +2055,17 @@ body.db-resizing-sidebar * {
   white-space: nowrap;
 }
 
-.db-toolbar-menu-item:hover {
+.db-toolbar-menu-item:hover,
+.db-toolbar-menu-item:focus-visible {
   background: var(--db-bg-hover);
 }
 
+/* Arrow-reachable, not a tab stop — see .db-git-menu-item:focus-visible. */
+.db-toolbar-menu-item:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
 .db-toolbar-menu-item:disabled {
   opacity: 0.5;
   cursor: default;
@@ -1491,6 +2142,10 @@ body.db-resizing-sidebar * {
   border-color: var(--db-accent);
 }
 
+.db-export-path-input[aria-invalid='true'] {
+  border-color: var(--db-danger);
+}
+
 .db-export-path-pick {
   flex: 0 0 auto;
   height: 30px;
@@ -1522,6 +2177,10 @@ body.db-resizing-sidebar * {
   color: var(--db-text-placeholder);
 }
 
+.db-export-hint--error {
+  color: var(--db-danger);
+}
+
 .db-export-checkbox {
   display: inline-flex;
   align-items: center;
@@ -1591,6 +2250,20 @@ body.db-resizing-sidebar * {
   border-top: 1px solid var(--db-border);
 }
 
+.db-export-more-formats {
+  margin: 4px 0 0;
+  padding-top: 12px;
+  border-top: 1px solid var(--db-border);
+  color: var(--db-text-muted);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.db-export-more-formats a {
+  color: var(--db-accent);
+  font-weight: 600;
+}
+
 .db-export-btn {
   padding: 6px 16px;
   font-size: 13px;
@@ -1627,6 +2300,53 @@ body.db-resizing-sidebar * {
   color: var(--db-text-on-accent);
 }
 
+/* Shared-document links intentionally resemble export because they package a
+   bounded Markdown-only DBK; the warning is the critical distinction. */
+.db-share-dialog {
+  width: 480px;
+}
+
+.db-share-warning {
+  margin-bottom: 16px;
+  padding: 10px 12px;
+  color: var(--db-text);
+  background: color-mix(in srgb, var(--db-accent) 12%, var(--db-bg-subtle));
+  border: 1px solid var(--db-accent);
+  border-radius: 5px;
+}
+
+.db-share-link {
+  display: block;
+  width: 100%;
+  min-height: 72px;
+  box-sizing: border-box;
+  resize: vertical;
+  padding: 8px;
+  font:
+    11px/1.45 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  color: var(--db-text);
+  background: var(--db-bg-subtle);
+  border: 1px solid var(--db-border);
+  border-radius: 4px;
+  outline: none;
+  overflow-wrap: anywhere;
+}
+
+.db-share-link:focus {
+  border-color: var(--db-accent);
+}
+
+.db-share-length-warning {
+  color: var(--db-danger, #a33a35);
+}
+
+.db-share-temporary-note {
+  color: var(--db-text-muted);
+}
+
 /* ── Squisq editor chrome separators ─────────────────────────── */
 /* Strengthen the dividers so the toolbar, tabs, and editor body
    read as three distinct zones instead of near-identical whites.  */
@@ -1656,6 +2376,25 @@ body.db-resizing-sidebar * {
   background: var(--db-editor-canvas);
 }
 
+/* Bind Squisq's host-facing accent to the active DocBlocks appearance. */
+.db-shell .squisq-editor-shell {
+  --squisq-accent: var(--db-accent);
+  --squisq-accent-hover: var(--db-accent-hover);
+  --squisq-text-on-accent: var(--db-text-on-accent);
+}
+
+/* Simple diagrams, drawings, and layout canvases share Squisq's Scene
+   engine. Keep canvas and raised-control surfaces on the same DocBlocks
+   palette instead of falling back to slate. */
+.db-shell .squisq-editor-shell .squisq-scene-shell {
+  --squisq-surface: var(--db-editor-canvas);
+  --squisq-surface-raised: var(--db-bg-subtle);
+  --squisq-surface-hover: var(--db-bg-hover);
+  --squisq-border: var(--db-border-strong);
+  --squisq-text: var(--db-text);
+  --squisq-text-muted: var(--db-text-muted);
+}
+
 /* ── Inline preview gutter: thematic green ──────────────────── */
 /* Rebind squisq's `--squisq-preview-*` custom properties so the
    gutter chrome (vertical bracket, diagonal connector + dots,
@@ -1792,6 +2531,102 @@ body.db-resizing-sidebar * {
   background: var(--db-bg);
 }
 
+/* Squisq's media bin ships with a fixed blue-slate palette. Bind the full
+   pane to DocBlocks' appearance tokens so its surface and controls follow
+   the selected accent in both light and dark themes. */
+.db-shell .squisq-editor-shell .squisq-media-bin {
+  background: var(--db-bg-subtle);
+  border-left-color: var(--db-border);
+  color: var(--db-text);
+  scrollbar-color: var(--db-border-strong) var(--db-bg-subtle);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-header {
+  border-bottom-color: var(--db-border);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-title {
+  color: var(--db-text-secondary);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-upload {
+  background: var(--db-accent-tint-strong);
+  border-color: var(--db-border);
+  color: var(--db-text-secondary);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-upload:hover {
+  background: var(--db-bg-hover);
+  border-color: var(--db-border-strong);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-empty,
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-size {
+  color: var(--db-text-muted);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-item {
+  border-bottom-color: var(--db-border);
+  color: var(--db-text-secondary);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-item:hover,
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-item:focus-visible {
+  background: var(--db-bg-hover);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-item:focus-visible {
+  outline-color: var(--db-accent);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-thumb,
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-icon {
+  background: var(--db-accent-tint-strong);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-drop-target {
+  background: color-mix(in srgb, var(--db-bg-subtle) 92%, var(--db-accent));
+  border-color: var(--db-accent);
+  color: var(--db-accent-deep);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-drop-target-icon {
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-drop-target span:last-child {
+  color: var(--db-text-muted);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-context-menu {
+  background: var(--db-bg);
+  border-color: var(--db-border);
+  box-shadow: 0 12px 28px var(--db-shadow);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-context-menu-item {
+  color: var(--db-text-secondary);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-context-menu-item:hover,
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-context-menu-item:focus-visible {
+  background: var(--db-bg-hover);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-context-menu-item--danger {
+  color: var(--db-danger);
+}
+
+.db-shell .squisq-editor-shell .squisq-media-bin .squisq-media-bin-context-menu-item--danger:hover,
+.db-shell
+  .squisq-editor-shell
+  .squisq-media-bin
+  .squisq-media-bin-context-menu-item--danger:focus-visible {
+  background: var(--db-danger-bg);
+  color: var(--db-danger);
+}
+
 /* ── Squisq accent override (blue → thematic green) ──────────── */
 
 .db-shell[data-theme='dark'] .squisq-editor-shell[data-theme='dark'] .squisq-view-tab--active {
@@ -1943,8 +2778,9 @@ html:has(.db-shell[data-theme='dark']) .squisq-tooltip {
 /* 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"). */
+   theme from outside the shell, then bind the portaled dialog through
+   Squisq's stable `data-squisq-template-gallery-portal` marker. Dialog
+   and gallery ids are intentionally instance-specific. */
 
 .db-shell[data-theme='dark']
   .squisq-editor-shell[data-theme='dark']
@@ -1968,6 +2804,7 @@ html:has(.db-shell[data-theme='dark']) {
   --db-text-muted: #a89a7c;
   --db-danger: #f87171;
   --db-danger-bg: #1c1917;
+  --db-text-on-danger: #1c1917;
   --db-shadow: rgba(0, 0, 0, 0.4);
   --db-accent: #c8b48f;
   --db-accent-hover: #dec79d;
@@ -1988,6 +2825,7 @@ html:has(.db-shell[data-theme='light']) {
   --db-text-muted: #6b614a;
   --db-danger: #b22b1b;
   --db-danger-bg: #fdf0ee;
+  --db-text-on-danger: #ffffff;
   --db-shadow: rgba(40, 30, 15, 0.12);
   --db-accent: #7d6948;
   --db-accent-hover: #5e4f37;
@@ -2325,6 +3163,35 @@ html:has(.db-shell[data-theme='dark'][data-accent='gray']) {
   --db-badge-text-hover: #ffffff;
 }
 
+/* Convert/Insert is portaled to document.body, so the editor shell's Squisq
+   overrides cannot reach it. The active DocBlocks palette is already hoisted
+   to html above; consume it here so every accent and appearance produces the
+   same menu surfaces as the rest of the shell. The selector also covers the
+   nested Mermaid and code-snippet menus, which share this portal class. */
+html:has(.db-shell) .squisq-insert-menu {
+  background: var(--db-bg);
+  border-color: var(--db-border);
+  color: var(--db-text-secondary);
+  box-shadow: 0 4px 12px var(--db-shadow);
+}
+
+html:has(.db-shell) .squisq-insert-menu .squisq-toolbar-overflow-item {
+  color: var(--db-text-secondary);
+}
+
+html:has(.db-shell) .squisq-insert-menu .squisq-toolbar-overflow-item:hover,
+html:has(.db-shell) .squisq-insert-menu .squisq-toolbar-overflow-item:focus-visible {
+  background: var(--db-bg-hover);
+}
+
+html:has(.db-shell) .squisq-insert-menu .squisq-insert-menu-header {
+  color: var(--db-text-muted);
+}
+
+html:has(.db-shell) .squisq-insert-menu .squisq-insert-menu-header--separated {
+  border-top-color: var(--db-border);
+}
+
 html:has(.db-shell[data-theme='light']:not([data-accent='brown'])) .squisq-tooltip {
   background: var(--db-accent-deep);
   color: var(--db-bg-subtle);
@@ -2336,7 +3203,7 @@ html:has(.db-shell[data-theme='dark']:not([data-accent='brown'])) .squisq-toolti
 }
 
 html:has(.db-shell[data-theme='dark'])
-  #squisq-template-gallery-dialog.squisq-template-gallery-dialog[data-theme='dark'] {
+  .squisq-template-gallery-dialog[data-theme='dark']:has([data-squisq-template-gallery-portal]) {
   --squisq-template-gallery-backdrop: var(--db-gallery-backdrop, rgba(18, 14, 9, 0.58));
   --squisq-template-gallery-panel-bg: var(--db-gallery-panel-bg, var(--db-bg));
   --squisq-template-gallery-panel-border: var(--db-border);
@@ -2390,7 +3257,7 @@ html:has(.db-shell[data-theme='dark'])
 }
 
 html:has(.db-shell[data-theme='light'])
-  #squisq-template-gallery-dialog.squisq-template-gallery-dialog[data-theme='light'] {
+  .squisq-template-gallery-dialog[data-theme='light']:has([data-squisq-template-gallery-portal]) {
   --squisq-template-gallery-backdrop: var(--db-gallery-backdrop, rgba(42, 36, 25, 0.24));
   --squisq-template-gallery-panel-bg: var(--db-gallery-panel-bg, #fffdf7);
   --squisq-template-gallery-panel-border: var(--db-border);
@@ -2769,7 +3636,7 @@ html:has(.db-shell[data-theme='dark'])
 }
 
 .db-shell .squisq-props-badge {
-  transform: translateY(1px);
+  transform: none;
 }
 
 .db-shell .squisq-template-badge-core::after {
@@ -2965,7 +3832,7 @@ html:has(.db-shell[data-theme='dark'])
 
 /* 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. */
+   status indicator harmonizes with the rest of the chrome. */
 .db-shell .squisq-status-ok {
   color: var(--db-accent);
 }
@@ -2974,6 +3841,10 @@ html:has(.db-shell[data-theme='dark'])
   color: var(--db-accent-hover);
 }
 
+.db-autosave-pending {
+  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
@@ -3232,7 +4103,7 @@ html:has(.db-shell[data-theme='dark'])
   font-size: 13px;
   font-weight: 600;
   background: var(--db-accent);
-  color: var(--db-bg);
+  color: var(--db-text-on-accent);
   border: none;
   border-radius: 6px;
   cursor: pointer;
@@ -3266,11 +4137,9 @@ html:has(.db-shell[data-theme='dark'])
 
 @keyframes db-welcome-gateway-in {
   from {
-    opacity: 0;
     transform: translate(-50%, 8px);
   }
   to {
-    opacity: 1;
     transform: translate(-50%, 0);
   }
 }
@@ -3336,7 +4205,7 @@ html:has(.db-shell[data-theme='dark'])
 }
 
 /* Browser PWA update notice. It is docked over the right side of Squisq's
-   status bar, while extra status-bar padding keeps the parse result visible.
+   status bar, while extra status-bar padding keeps its contents visible.
    If the status bar is hidden, it becomes a compact floating badge so the
    waiting update remains reachable. */
 .db-shell-editor-area--has-update .squisq-status-bar {
@@ -3489,7 +4358,7 @@ html:has(.db-shell[data-theme='dark'])
 /* Dialog size modifiers (shared Dialog component) */
 .db-dialog--wide {
   width: 560px;
-  max-width: 94vw;
+  max-width: 100%;
 }
 
 .db-dialog--full {
@@ -3536,6 +4405,19 @@ html:has(.db-shell[data-theme='dark'])
   cursor: default;
 }
 
+/* Destructive confirmation (delete, remove workspace). The foreground comes
+   from a token rather than a literal because the two themes need opposite ink:
+   light's danger is deep red and carries white at ~6.5:1, while dark's is a
+   light red where white would fall to ~2.8:1 and fail WCAG AA. */
+.db-git-primary-btn--danger {
+  background: var(--db-danger);
+  color: var(--db-text-on-danger);
+}
+
+.db-git-primary-btn--danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--db-danger) 85%, black);
+}
+
 .db-git-secondary-btn {
   padding: 6px 14px;
   border: 1px solid var(--db-border-strong);
@@ -3642,10 +4524,18 @@ html:has(.db-shell[data-theme='dark'])
   cursor: pointer;
 }
 
-.db-git-menu-item:hover:not(:disabled) {
+.db-git-menu-item:hover:not(:disabled),
+.db-git-menu-item:focus-visible {
   background: var(--db-bg-hover);
 }
 
+/* Items are arrow-reachable rather than tab stops, so the ring is the only
+   cue to which one Enter will fire. */
+.db-git-menu-item:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
 .db-git-menu-item:disabled {
   color: var(--db-text-placeholder);
   cursor: default;
@@ -3814,7 +4704,8 @@ button.db-git-file-row:hover {
   box-sizing: border-box;
 }
 
-.db-git-form-error {
+.db-git-form-error,
+.db-export-error {
   margin: 8px 0 0;
   color: var(--db-danger);
   font-size: 12.5px;
@@ -3964,6 +4855,22 @@ button.db-git-file-row:hover {
   color: var(--db-text-muted);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .db-workspace-picker-caret,
+  .db-app-menu-caret,
+  .db-ws-settings-btn,
+  .db-shell-sidebar-resizer,
+  .db-export-chip,
+  .db-git-progress-bar > span {
+    transition: none;
+  }
+
+  .db-welcome-gateway,
+  .db-save-toast {
+    animation: none;
+  }
+}
+
 /* History dialog internals added by the expanded-row layout */
 .db-git-history-toggle {
   display: block;
@@ -4002,14 +4909,16 @@ button.db-git-file-row:hover {
    block turns that row into the titlebar: draggable empty space, insets for
    the caption buttons, and every interactive descendant opted back out.
 
-   Ported 1:1 from the Electron build — keep in sync with
-   packages/desktop/renderer/titlebar.css (which is scoped under
-   `.db-desktop-root`; Electron windows report `display-mode: browser`, so
-   this media query can never double-apply there). The media query is live:
-   toggling the overlay chevron flips it with no JS. */
+   Shares its drag/inset structure with the Electron build in
+   packages/desktop/renderer/titlebar.css. Its compact vertical metrics are
+   intentionally PWA-specific because Electron uses a 42px overlay while this
+   mode follows the OS-provided caption height (32px on Windows). Electron is
+   scoped under `.db-desktop-root` and reports `display-mode: browser`, so this
+   media query can never double-apply there. The media query is live: toggling
+   the overlay chevron flips it with no JS. */
 @media (display-mode: window-controls-overlay) {
   .db-shell {
-    --db-wco-titlebar-height: 48px;
+    --db-wco-titlebar-height: env(titlebar-area-height, 32px);
   }
 
   /* The first shell row replaces the native titlebar. Empty space can drag
@@ -4025,10 +4934,51 @@ button.db-git-file-row:hover {
   }
 
   .db-shell .db-shell-sidebar-header {
+    padding-block: 0;
     padding-left: max(4px, calc(env(titlebar-area-x, 0px) + 4px));
     cursor: grab;
   }
 
+  /* Keep the shell controls inside the compact native caption band. These
+     overrides apply only to an installed app using Window Controls Overlay;
+     the regular browser toolbar keeps its roomier metrics. */
+  .db-shell .db-app-menu-btn,
+  .db-shell .db-workspace-picker-btn {
+    padding-block: 3px;
+  }
+
+  .db-shell .squisq-toolbar-view-tab {
+    padding-top: 4px;
+    padding-bottom: 2px;
+  }
+
+  .db-shell .squisq-use-mode-trigger {
+    padding-bottom: 7px;
+  }
+
+  /* The 32px caption row leaves little room around Squisq's 28px action
+     buttons. Keep the selected background clear of the header's 1px bottom
+     divider without moving the glyphs off their shared center line. */
+  .db-shell .squisq-toolbar-actions .squisq-toolbar-button {
+    box-sizing: border-box;
+    height: 26px;
+  }
+
+  /* Squisq's overflow measurement deliberately tolerates a 2px overhang.
+     Reserve one pixel beyond that tolerance so the final Insert control
+     moves into More actions instead of being clipped by the caption inset. */
+  .db-shell .squisq-toolbar-actions {
+    margin-right: 3px;
+  }
+
+  .db-shell .squisq-toolbar-button[aria-label='Insert image'] {
+    height: 28px;
+  }
+
+  .db-shell .squisq-editor-header--image {
+    padding-block: 0;
+  }
+
   /* Make the draggable header space beside the workspace gear discoverable,
      matching the Electron titlebar without introducing another control. */
   .db-shell .db-shell-sidebar-header::after {