@bendyline/docblocks-react 2.2.2 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/docblocks-react",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "React components for DocBlocks — file explorer, workspace picker, and editor shell",
   "license": "MIT",
   "author": "Bendyline",
@@ -20,6 +20,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+  },
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -62,17 +65,23 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@bendyline/docblocks": "2.2.2",
-    "@bendyline/squisq": "2.4.1",
-    "@bendyline/squisq-editor-react": "2.4.1",
-    "@bendyline/squisq-formats": "2.3.5",
-    "@bendyline/squisq-react": "2.4.1",
-    "@bendyline/squisq-video": "2.2.5",
-    "@bendyline/squisq-video-react": "2.2.5"
+    "@bendyline/docblocks": "2.3.0",
+    "@bendyline/squisq": "2.4.3",
+    "@bendyline/squisq-editor-react": "2.4.5",
+    "@bendyline/squisq-formats": "2.3.7",
+    "@bendyline/squisq-react": "2.4.5",
+    "@bendyline/squisq-video": "2.2.7",
+    "@bendyline/squisq-video-react": "2.2.9"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "20.9.0",

package/src/styles/docblocks.css

@@ -194,10 +194,23 @@
 }
 
 .db-explorer-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.db-explorer-sort-actions {
   display: flex;
   gap: 2px;
 }
 
+.db-explorer-action-divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: var(--db-border-strong);
+}
+
 .db-pinned-documents {
   display: flex;
   flex-direction: column;
@@ -350,6 +363,23 @@
   color: var(--db-text-secondary);
 }
 
+.db-explorer-btn[aria-pressed='true'] {
+  background: var(--db-bg-selected);
+  border-color: var(--db-bg-selected);
+  color: var(--db-text-on-selected);
+}
+
+.db-explorer-btn[aria-pressed='true']:hover:not(:disabled) {
+  background: var(--db-bg-selected-hover);
+  border-color: var(--db-bg-selected-hover);
+  color: var(--db-text-on-selected);
+}
+
+.db-explorer-btn:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: 1px;
+}
+
 .db-explorer-btn:disabled {
   cursor: default;
   opacity: 0.55;
@@ -676,6 +706,23 @@
   text-overflow: ellipsis;
 }
 
+.db-tree-last-modified {
+  width: 72px;
+  flex-shrink: 0;
+  margin-left: 8px;
+  overflow: hidden;
+  color: var(--db-text-secondary);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  text-overflow: ellipsis;
+}
+
+.db-tree-row--selected .db-tree-last-modified,
+.db-tree-row--drop-target .db-tree-last-modified {
+  color: inherit;
+}
+
 .db-tree-rename-input {
   flex: 1;
   padding: 1px 4px;
@@ -2773,6 +2820,41 @@ body.db-resizing-sidebar * {
   --squisq-editor-foreground: #1f2937;
 }
 
+/* Squisq's segmented mode controls otherwise retain their standalone
+   slate/blue palette. Bind the control surface and every interaction state
+   to the active DocBlocks appearance and accent. */
+.db-shell .squisq-editor-shell .squisq-preview-seg {
+  background: var(--db-bg);
+  border-color: var(--db-border);
+}
+
+.db-shell .squisq-editor-shell .squisq-preview-seg-btn {
+  border-left-color: var(--db-border);
+  color: var(--db-text-secondary);
+}
+
+.db-shell .squisq-editor-shell .squisq-preview-seg-btn:hover {
+  background: var(--db-bg-hover);
+  color: var(--db-text);
+}
+
+.db-shell .squisq-editor-shell .squisq-preview-seg-btn--active {
+  background: var(--db-accent);
+  color: var(--db-text-on-accent);
+}
+
+.db-shell .squisq-editor-shell .squisq-preview-seg-btn--active:hover {
+  background: var(--db-accent-hover);
+  color: var(--db-text-on-accent);
+}
+
+.db-shell .squisq-editor-shell .squisq-preview-seg-btn:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--db-focus, var(--db-accent));
+  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. */