@bendyline/docblocks-react 2.2.1 → 2.2.2

package/dist/settings/index.d.ts

@@ -7,7 +7,39 @@ type ThemePreference = 'auto' | 'light' | 'dark';
 declare const ACCENT_COLORS: readonly ["brown", "green", "blue", "purple", "maroon", "orange", "gray"];
 type AccentColor = (typeof ACCENT_COLORS)[number];
 
-type WriteCanvasPreferences = Required<WriteCanvasSettings>;
+/**
+ * Stable ids for the Write-canvas font schemes offered in Settings. This list
+ * mirrors `DOCBLOCKS_WRITE_CANVAS_FONT_SCHEMES` in `@bendyline/docblocks/vscode`
+ * (the wire/persisted contract) and the `docblocks.writeCanvasFontScheme` enum
+ * in the VS Code `package.json`; a guard test keeps the three in sync.
+ */
+type WriteCanvasFontScheme = 'theme' | 'serif-sans' | 'sans-sans' | 'serif-serif' | 'pt-serif' | 'hanken' | 'playfair-pt-serif' | 'hanken-lora' | 'dm-serif-dm-sans' | 'inter';
+type WriteCanvasFontSchemeGroup = 'theme' | 'system' | 'curated';
+interface WriteCanvasFontSchemeOption {
+    id: WriteCanvasFontScheme;
+    label: string;
+    group: WriteCanvasFontSchemeGroup;
+    /** CSS font-family for headings. Omitted for `'theme'` (inherit). */
+    headerFont?: string;
+    /** CSS font-family for body text. Omitted for `'theme'` (inherit). */
+    bodyFont?: string;
+}
+/**
+ * Curated Write-canvas font schemes, in picker order. A named scheme is an
+ * explicit user preference and overrides the active theme in Write mode through
+ * the DocBlocks host stylesheet. `'theme'` sets no fonts, i.e. inherits the
+ * active theme / host as before.
+ */
+declare const WRITE_CANVAS_FONT_SCHEMES: readonly WriteCanvasFontSchemeOption[];
+declare const DEFAULT_WRITE_CANVAS_FONT_SCHEME: WriteCanvasFontScheme;
+/** Resolve a scheme id to the header/body CSS font-family strings (empty for `'theme'`). */
+declare function resolveWriteCanvasFonts(scheme: WriteCanvasFontScheme): Pick<WriteCanvasSettings, 'headerFont' | 'bodyFont'>;
+/** Persisted Write-canvas preferences. Stores the font scheme id, not resolved fonts. */
+interface WriteCanvasPreferences {
+    textSize: number;
+    lineSpacing: number;
+    fontScheme: WriteCanvasFontScheme;
+}
 
 interface SettingsDialogProps {
     title?: string;
@@ -33,4 +65,4 @@ interface WriteCanvasSettingsControlsProps {
 }
 declare function WriteCanvasSettingsControls({ value, onChange }: WriteCanvasSettingsControlsProps): react_jsx_runtime.JSX.Element;
 
-export { type AccentColor, AccentColorSettings, type AccentColorSettingsProps, SettingsDialog, type SettingsDialogProps, type ThemePreference, ThemeSettings, type ThemeSettingsProps, type WriteCanvasPreferences, WriteCanvasSettingsControls, type WriteCanvasSettingsControlsProps };
+export { type AccentColor, AccentColorSettings, type AccentColorSettingsProps, DEFAULT_WRITE_CANVAS_FONT_SCHEME, SettingsDialog, type SettingsDialogProps, type ThemePreference, ThemeSettings, type ThemeSettingsProps, WRITE_CANVAS_FONT_SCHEMES, type WriteCanvasFontScheme, type WriteCanvasFontSchemeGroup, type WriteCanvasFontSchemeOption, type WriteCanvasPreferences, WriteCanvasSettingsControls, type WriteCanvasSettingsControlsProps, resolveWriteCanvasFonts };

package/dist/settings/index.js

@@ -1,13 +1,19 @@
 import {
   AccentColorSettings,
+  DEFAULT_WRITE_CANVAS_FONT_SCHEME,
   SettingsDialog,
   ThemeSettings,
-  WriteCanvasSettingsControls
-} from "../chunk-3QSZY74C.js";
+  WRITE_CANVAS_FONT_SCHEMES,
+  WriteCanvasSettingsControls,
+  resolveWriteCanvasFonts
+} from "../chunk-VRRL6VTD.js";
 import "../chunk-LG6HAWCK.js";
 export {
   AccentColorSettings,
+  DEFAULT_WRITE_CANVAS_FONT_SCHEME,
   SettingsDialog,
   ThemeSettings,
-  WriteCanvasSettingsControls
+  WRITE_CANVAS_FONT_SCHEMES,
+  WriteCanvasSettingsControls,
+  resolveWriteCanvasFonts
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/docblocks-react",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "React components for DocBlocks — file explorer, workspace picker, and editor shell",
   "license": "MIT",
   "author": "Bendyline",
@@ -30,7 +30,8 @@
   ],
   "files": [
     "dist",
-    "src/styles"
+    "src/styles",
+    "THIRD_PARTY_NOTICES.txt"
   ],
   "exports": {
     ".": {
@@ -65,13 +66,13 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/docblocks": "2.2.1",
-    "@bendyline/squisq": "2.3.3",
-    "@bendyline/squisq-editor-react": "2.3.4",
-    "@bendyline/squisq-formats": "2.3.3",
-    "@bendyline/squisq-react": "2.3.3",
-    "@bendyline/squisq-video": "2.2.3",
-    "@bendyline/squisq-video-react": "2.2.3"
+    "@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"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "20.9.0",

package/src/styles/docblocks.css

@@ -198,6 +198,136 @@
   gap: 2px;
 }
 
+.db-pinned-documents {
+  display: flex;
+  flex-direction: column;
+  flex: 0 1 auto;
+  min-height: 0;
+  max-height: 38%;
+  overflow: hidden;
+  border-bottom: 1px solid var(--db-border-strong);
+  background: var(--db-bg-subtle);
+}
+
+.db-pinned-documents-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 8px 10px 5px;
+}
+
+.db-pinned-documents-title i {
+  font-size: 10px;
+}
+
+.db-pinned-document-list {
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 0 4px;
+  scrollbar-color: var(--db-accent) var(--db-bg-subtle);
+  scrollbar-width: thin;
+}
+
+.db-pinned-document-row {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.db-pinned-document {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 7px;
+  min-width: 0;
+  padding: 6px 4px 6px 10px;
+  border: 0;
+  background: transparent;
+  color: var(--db-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.db-pinned-document-row:hover,
+.db-pinned-document-row:has(:focus-visible) {
+  background: var(--db-bg-hover);
+}
+
+.db-pinned-document:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
+.db-pinned-document-row--selected,
+.db-pinned-document-row--selected:hover,
+.db-pinned-document-row--selected:has(:focus-visible) {
+  --db-focus: #ffffff;
+  background: var(--db-bg-selected);
+  color: var(--db-text-on-selected);
+}
+
+.db-pinned-document-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 30px;
+  min-width: 30px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.72;
+}
+
+.db-pinned-document-more:hover,
+.db-pinned-document-more--active {
+  opacity: 1;
+}
+
+.db-pinned-document-more:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
+.db-pinned-document-heading {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.db-pinned-document-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.db-pinned-document-missing {
+  flex: 0 0 auto;
+  color: var(--db-danger);
+  font-size: 11px;
+}
+
+.db-pinned-document-row--selected .db-pinned-document-missing {
+  color: inherit;
+  opacity: 0.82;
+}
+
+.db-pinned-document-error {
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  right: 4px;
+  left: 4px;
+  margin: 0;
+  background: var(--db-bg);
+}
+
 .db-explorer-btn {
   width: 24px;
   height: 24px;
@@ -411,6 +541,34 @@
   flex: 1;
   overflow-y: auto;
   padding: 2px 0;
+  scrollbar-color: var(--db-accent) var(--db-bg);
+  scrollbar-width: thin;
+}
+
+.db-tree::-webkit-scrollbar {
+  width: 12px;
+}
+
+.db-tree::-webkit-scrollbar-track,
+.db-tree::-webkit-scrollbar-corner {
+  background: var(--db-bg);
+}
+
+.db-tree::-webkit-scrollbar-thumb {
+  min-height: 32px;
+  background: var(--db-accent);
+  border: 3px solid var(--db-bg);
+  border-radius: 999px;
+}
+
+.db-tree::-webkit-scrollbar-thumb:hover {
+  background: var(--db-accent-hover);
+}
+
+.db-tree::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
 }
 
 .db-tree-loading,
@@ -429,6 +587,10 @@
   font-size: 12px;
 }
 
+.db-tree-error--child {
+  margin-left: 24px;
+}
+
 .db-tree-error-retry {
   border: 0;
   padding: 0;
@@ -555,11 +717,18 @@
 
 .db-tree-row:hover .db-tree-more,
 .db-tree-row:focus-within .db-tree-more,
+.db-tree-row--selected .db-tree-more,
 .db-tree-more:focus-visible,
 .db-tree-more--active {
   visibility: visible;
 }
 
+@media (hover: none), (pointer: coarse) {
+  .db-tree-more {
+    visibility: visible;
+  }
+}
+
 .db-tree-more:hover {
   background: var(--db-bg-hover);
   color: var(--db-text);
@@ -1173,15 +1342,13 @@ body.db-resizing-sidebar * {
 }
 
 .db-shell-sidebar-footer-action {
-  min-width: 0;
+  flex-shrink: 0;
   padding: 0;
-  overflow: hidden;
   border: 0;
   background: transparent;
   font: inherit;
   line-height: inherit;
   text-decoration: underline;
-  text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
 }
@@ -1652,7 +1819,7 @@ body.db-resizing-sidebar * {
 }
 
 .db-settings-fieldset + .db-settings-fieldset {
-  margin-top: 20px;
+  margin-top: 16px;
 }
 
 .db-settings-legend {
@@ -1694,6 +1861,16 @@ body.db-resizing-sidebar * {
   accent-color: var(--db-accent);
 }
 
+.db-settings-radio-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+}
+
+.db-settings-radio--inline {
+  padding: 2px 0;
+}
+
 .db-settings-checkbox {
   display: flex;
   align-items: center;
@@ -1741,6 +1918,188 @@ body.db-resizing-sidebar * {
   cursor: pointer;
 }
 
+.db-settings-select {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 14px;
+  color: var(--db-text);
+  font-size: 13px;
+}
+
+.db-settings-select-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.db-settings-select-input {
+  width: 100%;
+  padding: 6px 8px;
+  font: inherit;
+  font-size: 13px;
+  background: var(--db-bg-subtle);
+  color: var(--db-text);
+  border: 1px solid var(--db-input-border);
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+  appearance: auto;
+}
+
+.db-settings-select-input:focus-visible {
+  border-color: var(--db-accent);
+}
+
+.db-font-picker {
+  position: relative;
+}
+
+.db-font-picker-trigger {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 54px;
+  padding: 7px 10px 7px 12px;
+  overflow: hidden;
+  border: 1px solid var(--db-input-border);
+  border-radius: 5px;
+  outline: none;
+  background: var(--db-bg-subtle);
+  color: var(--db-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.db-font-picker-trigger:hover,
+.db-font-picker-trigger[aria-expanded='true'] {
+  background: var(--db-bg-hover);
+}
+
+.db-font-picker-trigger:focus-visible {
+  border-color: var(--db-accent);
+  box-shadow: 0 0 0 1px var(--db-accent);
+}
+
+.db-font-picker-caret {
+  flex: 0 0 auto;
+  width: 7px;
+  height: 7px;
+  margin: 0 3px 3px 0;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  color: var(--db-text-muted);
+  transform: rotate(45deg);
+  transition: transform 120ms ease;
+}
+
+.db-font-picker-caret--open {
+  margin-top: 5px;
+  transform: rotate(225deg);
+}
+
+.db-font-picker-menu {
+  position: fixed;
+  z-index: 3100;
+  box-sizing: border-box;
+  padding: 5px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--db-border-strong);
+  border-radius: 6px;
+  outline: none;
+  background: var(--db-bg);
+  color: var(--db-text);
+  box-shadow: 0 10px 28px var(--db-shadow);
+}
+
+.db-font-picker-group {
+  padding: 10px 10px 4px;
+  color: var(--db-text-muted);
+  font:
+    600 10px/1.2 system-ui,
+    -apple-system,
+    'Segoe UI',
+    sans-serif;
+  letter-spacing: 0.065em;
+  text-transform: uppercase;
+}
+
+.db-font-picker-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 50px;
+  padding: 6px 9px 6px 11px;
+  border-radius: 4px;
+  color: var(--db-text);
+  cursor: pointer;
+  user-select: none;
+}
+
+.db-font-picker-option--active {
+  background: var(--db-bg-hover);
+}
+
+.db-font-picker-option--selected {
+  background: var(--db-accent-soft-12);
+}
+
+.db-font-picker-option--selected.db-font-picker-option--active {
+  background: var(--db-accent-soft-25);
+}
+
+.db-font-picker-preview {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.2;
+}
+
+.db-font-picker-heading,
+.db-font-picker-body {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.db-font-picker-heading {
+  color: var(--db-text);
+  font-size: 16px;
+  font-weight: 650;
+}
+
+.db-font-picker-body {
+  margin-top: 3px;
+  color: var(--db-text-secondary);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.db-font-picker-preview--compact .db-font-picker-heading {
+  font-size: 15px;
+}
+
+.db-font-picker-preview--compact .db-font-picker-body {
+  color: var(--db-text-muted);
+  font-size: 11px;
+}
+
+.db-font-picker-check {
+  flex: 0 0 18px;
+  color: var(--db-accent-deep);
+  font:
+    700 14px/1 system-ui,
+    -apple-system,
+    'Segoe UI',
+    sans-serif;
+  text-align: center;
+}
+
 .db-settings-accent-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
@@ -2058,6 +2417,15 @@ body.db-resizing-sidebar * {
   padding: 4px 0;
 }
 
+.db-export-toolbar-menu-dropdown {
+  max-width: min(720px, calc(100vw - 16px));
+}
+
+.db-export-toolbar-menu-dropdown .db-toolbar-menu-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .db-toolbar-menu-item {
   display: block;
   width: 100%;
@@ -2392,11 +2760,55 @@ body.db-resizing-sidebar * {
   background: var(--db-editor-canvas);
 }
 
-/* Bind Squisq's host-facing accent to the active DocBlocks appearance. */
+/* 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-accent: var(--db-accent);
   --squisq-accent-hover: var(--db-accent-hover);
   --squisq-text-on-accent: var(--db-text-on-accent);
+  --squisq-editor-background: #ffffff;
+  --squisq-editor-foreground: #1f2937;
+}
+
+.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
+   inside the DocBlocks shell. When "Inherit from theme" is selected the Write
+   variables are absent, and these declarations fall straight through to the
+   same theme title/body fonts as before. */
+.db-shell .squisq-editor-shell .squisq-wysiwyg-editor {
+  font-family: var(--squisq-write-body-font, var(--squisq-theme-body-font, inherit));
+}
+
+.db-shell .squisq-editor-shell .squisq-wysiwyg-editor h1,
+.db-shell .squisq-editor-shell .squisq-wysiwyg-editor h2,
+.db-shell .squisq-editor-shell .squisq-wysiwyg-editor h3,
+.db-shell .squisq-editor-shell .squisq-wysiwyg-editor h4,
+.db-shell .squisq-editor-shell .squisq-wysiwyg-editor h5,
+.db-shell .squisq-editor-shell .squisq-wysiwyg-editor h6 {
+  font-family: var(
+    --squisq-write-header-font,
+    var(
+      --squisq-write-body-font,
+      var(--squisq-theme-title-font, var(--squisq-theme-body-font, inherit))
+    )
+  );
+}
+
+/* Squisq's default horizontal rule uses a fixed slate border in both
+   appearances. Keep document rules aligned with the selected host accent. */
+.db-shell .squisq-editor-shell .squisq-wysiwyg-editor hr {
+  border-top-color: var(--db-accent);
 }
 
 /* Simple diagrams, drawings, and layout canvases share Squisq's Scene
@@ -4064,6 +4476,46 @@ html:has(.db-shell[data-theme='dark'])
   border-color: var(--db-border);
 }
 
+/* View menu. Squisq's dark appearance otherwise replaces its generic
+   variables with a fixed slate-blue palette. Keep the popover and its
+   controls on the same host palette as the DocBlocks app and overflow
+   menus, including the native radio/checkbox selection color. */
+.db-shell .squisq-editor-shell .squisq-view-menu-popover {
+  background: var(--db-bg);
+  border-color: var(--db-border);
+  box-shadow: 0 4px 12px var(--db-shadow);
+  color: var(--db-text-secondary);
+}
+
+.db-shell .squisq-editor-shell .squisq-view-menu-row:hover,
+.db-shell .squisq-editor-shell .squisq-view-menu-radio-row:hover {
+  background: var(--db-bg-hover);
+}
+
+.db-shell .squisq-editor-shell .squisq-view-menu-row--select:hover,
+.db-shell .squisq-editor-shell .squisq-view-menu-row--radios:hover {
+  background: transparent;
+}
+
+.db-shell .squisq-editor-shell .squisq-view-menu-row--select .squisq-view-menu-label,
+.db-shell .squisq-editor-shell .squisq-view-menu-row--radios > .squisq-view-menu-label {
+  color: var(--db-text-muted);
+}
+
+.db-shell .squisq-editor-shell .squisq-view-menu-select {
+  background: var(--db-bg-subtle);
+  border-color: var(--db-border);
+  color: var(--db-text-secondary);
+}
+
+.db-shell .squisq-editor-shell .squisq-view-menu-separator {
+  background: var(--db-border);
+}
+
+.db-shell .squisq-editor-shell :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
+  accent-color: var(--db-accent);
+}
+
 /* 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
@@ -4457,6 +4909,7 @@ html:has(.db-shell[data-theme='dark'])
 .db-dialog--wide {
   width: 560px;
   max-width: 100%;
+  max-height: min(calc(100dvh - 32px), 660px);
 }
 
 .db-dialog--full {