@bendyline/docblocks-react 2.1.1 → 2.2.0

package/dist/{ExportToolbarControls-5HUE3LSX.js → ExportToolbarControls-C46GMPKC.js}

@@ -409,7 +409,7 @@ function ExportToolbarControls({
               role: "menuitem",
               className: "db-toolbar-menu-item",
               onClick: () => void handleOpenVideoModal("mp4"),
-              children: "Export Video..."
+              children: "Export video..."
             }
           ),
           showAnimatedGifExport && /* @__PURE__ */ jsx(
@@ -419,7 +419,7 @@ function ExportToolbarControls({
               role: "menuitem",
               className: "db-toolbar-menu-item",
               onClick: () => void handleOpenVideoModal("gif"),
-              children: "Export Animated GIF..."
+              children: "Export animated gif..."
             }
           )
         ] })

package/dist/{LazyEditorShell-RF54B5UD.js → LazyEditorShell-LU4QFPDX.js}

@@ -1,5 +1,5 @@
 // src/DocBlocksShell/LazyEditorShell.ts
-import { EditorShell } from "@bendyline/squisq-editor-react";
+import { EditorShell } from "@bendyline/squisq-editor-react/shell";
 export {
   EditorShell as default
 };

package/dist/index.js

@@ -221,13 +221,19 @@ function useFileTree(provider) {
         }
       })();
     };
-    const subscription = providerV2.watch(requestRefresh, {
-      onError: (caught) => {
-        if (disposed) return;
-        reportError(caught);
+    const subscription = providerV2.watch(
+      (event) => {
+        if (event.type === "modified") return;
         requestRefresh();
+      },
+      {
+        onError: (caught) => {
+          if (disposed) return;
+          reportError(caught);
+          requestRefresh();
+        }
       }
-    });
+    );
     void subscription.ready.catch((caught) => {
       if (!disposed) reportError(caught);
     });
@@ -2254,7 +2260,7 @@ function useDocumentSession(autoSaveDelayMs = 500) {
 import { lazy, Suspense } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var ExportToolbarControlsImplementation = lazy(
-  () => import("./ExportToolbarControls-5HUE3LSX.js").then((module) => ({
+  () => import("./ExportToolbarControls-C46GMPKC.js").then((module) => ({
     default: module.ExportToolbarControls
   }))
 );
@@ -3549,8 +3555,9 @@ var editorShellModulePromise = null;
 function loadEditorShell() {
   editorShellModulePromise ?? (editorShellModulePromise = (async () => {
     const workersReady = globalThis.docBlocksMonacoWorkersReady;
-    await workersReady?.catch(() => void 0);
-    return import("./LazyEditorShell-RF54B5UD.js");
+    const editorReady = import("./LazyEditorShell-LU4QFPDX.js");
+    const [editorModule] = await Promise.all([editorReady, workersReady?.catch(() => void 0)]);
+    return editorModule;
   })());
   return editorShellModulePromise;
 }
@@ -6136,6 +6143,14 @@ function DocBlocksShell({
                       title: "Restore split view",
                       children: /* @__PURE__ */ jsx12(SplitViewIcon, {})
                     }
+                  ),
+                  /* @__PURE__ */ jsx12(
+                    "span",
+                    {
+                      className: "db-window-drag-grip",
+                      "data-tooltip": "Click and drag here to move your window around.",
+                      "aria-hidden": true
+                    }
                   )
                 ] }),
                 git.available && /* @__PURE__ */ jsx12(Suspense2, { fallback: null, children: /* @__PURE__ */ jsx12(
@@ -6199,7 +6214,7 @@ function DocBlocksShell({
                   /* @__PURE__ */ jsx12("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
                   /* @__PURE__ */ jsx12("a", { href: "https://docblocks.com/terms/", target: "_blank", rel: "noopener noreferrer", children: "Terms" }),
                   /* @__PURE__ */ jsx12("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
-                  /* @__PURE__ */ jsx12("a", { href: issueReportUrl, target: "_blank", rel: "noopener noreferrer", children: "Issues" }),
+                  /* @__PURE__ */ jsx12("a", { href: issueReportUrl, target: "_blank", rel: "noopener noreferrer", children: "Report issue" }),
                   showBrowserStorageWarning && /* @__PURE__ */ jsxs11(Fragment7, { children: [
                     /* @__PURE__ */ jsx12("span", { className: "db-shell-sidebar-footer-separator", "aria-hidden": "true", children: "\u2022" }),
                     /* @__PURE__ */ jsx12(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/docblocks-react",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "React components for DocBlocks — file explorer, workspace picker, and editor shell",
   "license": "MIT",
   "author": "Bendyline",
@@ -65,13 +65,13 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/docblocks": "2.1.1",
-    "@bendyline/squisq": "2.3.1",
-    "@bendyline/squisq-editor-react": "2.3.2",
-    "@bendyline/squisq-formats": "2.3.1",
-    "@bendyline/squisq-react": "2.3.1",
-    "@bendyline/squisq-video": "2.2.1",
-    "@bendyline/squisq-video-react": "2.2.1"
+    "@bendyline/docblocks": "2.2.0",
+    "@bendyline/squisq": "2.3.2",
+    "@bendyline/squisq-editor-react": "2.3.3",
+    "@bendyline/squisq-formats": "2.3.2",
+    "@bendyline/squisq-react": "2.3.2",
+    "@bendyline/squisq-video": "2.2.2",
+    "@bendyline/squisq-video-react": "2.2.2"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "20.9.0",

package/src/styles/docblocks.css

@@ -1138,6 +1138,7 @@ body.db-resizing-sidebar * {
   display: flex;
   align-items: center;
   gap: 6px;
+  /* Match Squisq's rendered line box + 4px vertical padding + 1px border. */
   height: 23px;
   padding: 0 12px 0 18px;
   border-top: 1px solid var(--db-border-strong);
@@ -2808,9 +2809,11 @@ html:has(.db-shell[data-theme='dark']) {
   --db-shadow: rgba(0, 0, 0, 0.4);
   --db-accent: #c8b48f;
   --db-accent-hover: #dec79d;
+  --db-text-on-accent: #1a1812;
   --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-accent-deep: #e6dcc0;
   --db-gutter-bg: #4a4538;
 }
 
@@ -2829,9 +2832,11 @@ html:has(.db-shell[data-theme='light']) {
   --db-shadow: rgba(40, 30, 15, 0.12);
   --db-accent: #7d6948;
   --db-accent-hover: #5e4f37;
+  --db-text-on-accent: #ffffff;
   --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-accent-deep: #3d3220;
   --db-gutter-bg: #efe8d4;
 }
 
@@ -3163,6 +3168,82 @@ html:has(.db-shell[data-theme='dark'][data-accent='gray']) {
   --db-badge-text-hover: #ffffff;
 }
 
+/* The Use mode menu is portaled to document.body, outside both the DocBlocks
+   shell and the Squisq editor shell. Consume the palette hoisted to `html`
+   above so its surface, states, icons, and text follow every DocBlocks theme
+   and accent instead of falling back to Squisq's standalone blue/slate UI. */
+html:has(.db-shell) .squisq-use-mode-menu {
+  background: var(--db-bg);
+  border-color: var(--db-border);
+  box-shadow:
+    0 12px 32px var(--db-shadow),
+    0 2px 6px var(--db-shadow);
+}
+
+html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-item {
+  color: var(--db-text-secondary);
+}
+
+html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-item:hover,
+html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-item:focus-visible {
+  background: var(--db-bg-hover);
+  color: var(--db-text);
+}
+
+html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-item--selected {
+  background: var(--db-accent-tint-strong);
+  color: var(--db-accent-deep);
+}
+
+html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-icon {
+  background: var(--db-bg-hover);
+  color: var(--db-text-muted);
+}
+
+html:has(.db-shell)
+  .squisq-use-mode-menu
+  .squisq-use-mode-menu-item--selected
+  .squisq-use-mode-menu-icon {
+  background: var(--db-accent-soft-25);
+  color: var(--db-accent-hover);
+}
+
+html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-summary {
+  color: var(--db-text-muted);
+}
+
+html:has(.db-shell) .squisq-use-mode-menu .squisq-use-mode-menu-check {
+  color: var(--db-accent-hover);
+}
+
+/* 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) {
+  --squisq-layout-accent-text: var(--db-accent-hover);
+  --squisq-layout-accent-bg: var(--db-accent);
+  --squisq-layout-accent-bg-hover: var(--db-accent-hover);
+  --squisq-layout-accent-border: var(--db-accent);
+  --squisq-layout-accent-soft: var(--db-accent-tint-strong);
+  --squisq-layout-accent-soft-hover: var(--db-bg-hover);
+  --squisq-layout-accent-soft-border: var(--db-accent);
+  --squisq-layout-accent-hover-border: var(--db-accent-hover);
+}
+
+html:has(.db-shell)
+  :is(.squisq-template-designer-overlay, .squisq-layout-manager-overlay)
+  .squisq-template-designer-btn--primary {
+  color: var(--db-text-on-accent);
+}
+
+html:has(.db-shell)
+  :is(.squisq-template-designer-overlay, .squisq-layout-manager-overlay)
+  .squisq-template-designer-field
+  input:focus {
+  box-shadow: 0 0 0 3px var(--db-accent-soft-25);
+}
+
 /* 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
@@ -4952,6 +5033,13 @@ button.db-git-file-row:hover {
     padding-bottom: 2px;
   }
 
+  /* The native 32px caption band leaves the labels slightly above its visual
+     center. Move only the text down; the tab hit area and active underline
+     stay anchored to the titlebar edges. */
+  .db-shell .squisq-toolbar-view-tab-label {
+    transform: translateY(4px);
+  }
+
   .db-shell .squisq-use-mode-trigger {
     padding-bottom: 7px;
   }
@@ -4980,18 +5068,20 @@ button.db-git-file-row:hover {
   }
 
   /* 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 {
-    content: '';
-    width: 12px;
+     matching the Electron titlebar without introducing another control. The
+     12px dotted content and its 8px right padding form one drag region. */
+  .db-shell .db-window-drag-grip {
+    box-sizing: border-box;
+    width: 20px;
     height: 20px;
-    flex: 0 0 12px;
-    margin-right: 3px;
+    flex: 0 0 20px;
+    padding-right: 8px;
     background-image: radial-gradient(circle, var(--db-text-muted) 1px, transparent 1.25px);
+    background-clip: content-box;
+    background-origin: content-box;
     background-position: center;
     background-size: 4px 4px;
     opacity: 0.72;
-    pointer-events: none;
     app-region: drag;
     -webkit-app-region: drag;
   }