@bendyline/docblocks-react 2.7.7 → 2.7.8

package/dist/{run-export-SPNNH32M.js → run-export-C3PLLWLS.js}

@@ -1,10 +1,10 @@
 import {
   exporterThemeId,
   runExport
-} from "./chunk-7CSBRAMT.js";
+} from "./chunk-F7TR5EKX.js";
 import {
   buildExportFilename
-} from "./chunk-5O5YTOXG.js";
+} from "./chunk-5YMULR6A.js";
 import "./chunk-6MSHXQNB.js";
 export {
   buildExportFilename,

package/dist/settings/index.d.ts

@@ -1,4 +1,4 @@
-export { A as AccentColor, a as AccentColorSettings, b as AccentColorSettingsProps, c as AiSettingsControls, d as AiSettingsControlsProps, D as DEFAULT_INTERFACE_FONT, e as DEFAULT_PROOFING_PREFERENCES, f as DEFAULT_WRITE_CANVAS_FONT_SCHEME, I as InterfaceFontPreference, g as InterfaceFontSettings, h as InterfaceFontSettingsProps, P as ProofingPreferences, i as ProofingSettingsControls, j as ProofingSettingsControlsProps, S as SettingsDialog, k as SettingsDialogProps, T as ThemePreference, l as ThemeSettings, m as ThemeSettingsProps, W as WRITE_CANVAS_FONT_SCHEMES, n as WriteCanvasFontScheme, o as WriteCanvasFontSchemeGroup, p as WriteCanvasFontSchemeOption, q as WriteCanvasPreferences, r as WriteCanvasSettingsControls, s as WriteCanvasSettingsControlsProps, t as loadInterfaceFont, u as loadProofingPreferences, v as resolveWriteCanvasFonts, w as saveInterfaceFont, x as saveProofingPreferences } from '../Settings-CfhY489G.js';
+export { A as AccentColor, a as AccentColorSettings, b as AccentColorSettingsProps, c as AiSettingsControls, d as AiSettingsControlsProps, D as DEFAULT_INTERFACE_FONT, e as DEFAULT_PROOFING_PREFERENCES, f as DEFAULT_WRITE_CANVAS_FONT_SCHEME, I as InterfaceFontPreference, g as InterfaceFontSettings, h as InterfaceFontSettingsProps, P as ProofingPreferences, i as ProofingSettingsControls, j as ProofingSettingsControlsProps, S as SettingsDialog, k as SettingsDialogProps, l as SettingsSection, T as ThemePreference, m as ThemeSettings, n as ThemeSettingsProps, o as WRITE_CANVAS_FONT_SCHEMES, p as WriteCanvasFontScheme, q as WriteCanvasFontSchemeGroup, r as WriteCanvasFontSchemeOption, W as WriteCanvasPreferences, s as WriteCanvasSettingsControls, t as WriteCanvasSettingsControlsProps, u as loadInterfaceFont, v as loadProofingPreferences, w as resolveWriteCanvasFonts, x as saveInterfaceFont, y as saveProofingPreferences } from '../Settings-ButIB78y.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { WorkspaceSettings } from '@bendyline/docblocks/workspace-settings';
 import '@bendyline/docblocks/host';

package/dist/settings/index.js

@@ -16,9 +16,10 @@ import {
   resolveWriteCanvasFonts,
   saveInterfaceFont,
   saveProofingPreferences
-} from "../chunk-7HBKKXRV.js";
+} from "../chunk-TN7BY5N3.js";
+import "../chunk-OW6JWRAA.js";
 import "../chunk-TBLZBNQF.js";
-import "../chunk-VJPGZCFS.js";
+import "../chunk-UYJCL6OW.js";
 export {
   AccentColorSettings,
   AiSettingsControls,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/docblocks-react",
-  "version": "2.7.7",
+  "version": "2.7.8",
   "description": "React components for DocBlocks — file explorer, workspace picker, and editor shell",
   "license": "MIT",
   "author": "Bendyline",
@@ -85,14 +85,14 @@
     }
   },
   "dependencies": {
-    "@bendyline/docblocks": "2.7.7",
-    "@bendyline/squisq": "2.13.3",
+    "@bendyline/docblocks": "2.7.8",
+    "@bendyline/squisq": "2.13.6",
     "@bendyline/squisq-calc": "2.11.2",
-    "@bendyline/squisq-editor-react": "2.13.5",
-    "@bendyline/squisq-formats": "2.8.4",
-    "@bendyline/squisq-react": "2.12.12",
-    "@bendyline/squisq-video": "2.4.9",
-    "@bendyline/squisq-video-react": "2.5.13",
+    "@bendyline/squisq-editor-react": "2.13.11",
+    "@bendyline/squisq-formats": "2.8.7",
+    "@bendyline/squisq-react": "2.12.18",
+    "@bendyline/squisq-video": "2.4.12",
+    "@bendyline/squisq-video-react": "2.5.19",
     "lucide-react": "1.52.0",
     "qrcode": "1.5.4"
   },

package/src/styles/docblocks.css

@@ -1631,12 +1631,11 @@
   visibility: visible;
   transition-delay: 0s;
   /* `transform: none`, not `translateX(0)`. ANY non-none transform makes this
-     element the containing block for `position: fixed` descendants, and the
-     modal overlay (.db-dialog-overlay, `position: fixed; inset: 0`) is rendered
-     inside the sidebar rather than portalled to <body>. With a transform here
-     every dialog opened from the app menu is sized and clipped to the drawer
-     instead of the viewport. Removing it once the drawer is open is visually
-     identical, because progress is 1 and translateX(0) moves nothing. */
+     element the containing block for `position: fixed` descendants, which
+     sizes and clips anything fixed inside the drawer to the drawer instead of
+     the viewport. (Dialogs portal to <body> and are immune.) Removing it once
+     the drawer is open is visually identical, because progress is 1 and
+     translateX(0) moves nothing. */
   transform: none;
 }
 
@@ -2355,9 +2354,12 @@ html:has(.db-shell--mobile) .squisq-toolbar-overflow-menu {
   margin-bottom: 0;
 }
 
+/* A link inside running text is underlined: the accent alone sits under the
+   3:1 against the surrounding text that WCAG 1.4.1 asks for. */
 .db-dialog-body a {
   color: var(--db-accent);
-  text-decoration: none;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
 }
 
 .db-dialog-body a:hover {
@@ -2373,6 +2375,11 @@ html:has(.db-shell--mobile) .squisq-toolbar-overflow-menu {
   gap: 6px 16px;
 }
 
+/* The row holds nothing but links, so color alone marks them here. */
+.db-dialog-links a {
+  text-decoration: none;
+}
+
 .db-about-version {
   display: flex;
   align-items: center;
@@ -2400,6 +2407,113 @@ html:has(.db-shell--mobile) .squisq-toolbar-overflow-menu {
 
 /* ── Settings Dialog ─────────────────────────────────────────── */
 
+/* Sectioned Settings: a tab rail beside the open section, or a dropdown above
+   it on phones and portrait tablets. The dialog keeps one height, so changing
+   sections never resizes it under the pointer, and each section scrolls on
+   its own, so returning to one finds it where it was left. The panel keeps
+   the 520px measure the single-column dialog had. */
+.db-dialog.db-settings-dialog--sectioned {
+  width: 740px;
+  height: min(660px, calc(100vh - 32px));
+  height: min(660px, calc(100dvh - 32px));
+}
+
+.db-dialog-body.db-settings-dialog-body--sectioned {
+  flex: 1;
+  display: flex;
+  padding: 0;
+  overflow: hidden;
+}
+
+.db-settings-sections {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.db-settings-sections--dropdown {
+  flex-direction: column;
+}
+
+.db-settings-tabs {
+  flex: 0 0 180px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-sizing: border-box;
+  padding: 12px 8px;
+  border-right: 1px solid var(--db-border);
+  overflow-y: auto;
+}
+
+.db-settings-tab {
+  position: relative;
+  min-height: var(--db-row-min-height);
+  padding: 7px 12px;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--db-text-secondary);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.db-settings-tab:hover {
+  background: var(--db-bg-hover);
+  color: var(--db-text);
+}
+
+/* The accent bar is the vertical counterpart of the underline the editor's
+   Write/Source tabs carry. */
+.db-settings-tab--selected,
+.db-settings-tab--selected:hover {
+  background: var(--db-bg-selected);
+  color: var(--db-text-on-selected);
+  font-weight: 600;
+}
+
+.db-settings-tab--selected::before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  bottom: 7px;
+  left: 0;
+  width: 3px;
+  border-radius: 2px;
+  background: var(--db-accent);
+}
+
+.db-settings-tab:focus-visible,
+.db-settings-panel:focus-visible {
+  outline: 2px solid var(--db-focus);
+  outline-offset: -2px;
+}
+
+.db-settings-section-picker {
+  flex: none;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--db-border);
+}
+
+.db-settings-section-select {
+  font-weight: 600;
+}
+
+.db-settings-panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 20px 20px;
+}
+
+.db-settings-panel[hidden] {
+  display: none;
+}
+
 .db-settings-fieldset {
   border: none;
   margin: 0;
@@ -6159,6 +6273,18 @@ html:has(.db-shell) :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
   transform: translateX(-50%);
 }
 
+.db-document-conflict-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.db-document-conflict-details {
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
 .db-document-conflict-actions {
   display: flex;
   flex: none;
@@ -6179,15 +6305,23 @@ html:has(.db-shell) :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
   outline-offset: 2px;
 }
 
+/* Three panes need more than the standard full dialog's 1100px. */
+.db-conflict-dialog.db-dialog--full {
+  width: min(1600px, 96vw);
+}
+
+/* Each version as a page, with the source diff between them. Monaco drops
+   to its inline diff by itself when the middle pane is too narrow for two. */
 .db-conflict-columns {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
   gap: 16px;
   flex: 1;
   min-height: 300px;
 }
 
-.db-conflict-version {
+.db-conflict-version,
+.db-conflict-diff {
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -6196,7 +6330,48 @@ html:has(.db-shell) :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
   border-radius: 8px;
 }
 
-.db-conflict-version h3 {
+/* Two source columns need more of the width than one. */
+.db-conflict-columns--wide-diff {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+}
+
+.db-conflict-diff .db-git-diff-host {
+  min-height: 160px;
+}
+
+.db-conflict-diff-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px 12px;
+}
+
+.db-conflict-diff-view {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--db-text-muted);
+  font-size: 12px;
+}
+
+.db-conflict-diff-view select {
+  min-height: var(--db-target-min, 32px);
+  padding: 0 6px;
+  color: var(--db-text);
+  background: var(--db-bg);
+  border: 1px solid var(--db-border-strong);
+  border-radius: 5px;
+  font: inherit;
+}
+
+.db-conflict-diff-view select:focus-visible {
+  outline: 2px solid var(--db-accent);
+  outline-offset: 2px;
+}
+
+.db-conflict-version h3,
+.db-conflict-diff h3 {
   margin: 0;
   color: var(--db-text);
   font-size: 15px;
@@ -6225,6 +6400,13 @@ html:has(.db-shell) :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
   resize: none;
 }
 
+/* The page brings its own type and (inline) theme background; thin page
+   margins hug the content, so the frame supplies the inset. */
+.db-conflict-preview--rendered {
+  padding: 12px 16px;
+  font: inherit;
+}
+
 .db-conflict-consequence {
   margin: 12px 0;
   font-size: 12px;
@@ -6870,7 +7052,12 @@ html:has(.db-shell) :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
   background: var(--db-bg-raised);
 }
 
+/* As tall as the close button so the title centers on the same line as the
+   ×, while the findings count still stacks underneath. */
 .db-ai-review-header h2 {
+  display: flex;
+  align-items: center;
+  min-height: var(--db-target-min);
   margin: 0;
   color: var(--db-text);
   font-size: 15px;
@@ -7410,6 +7597,107 @@ html:has(.db-shell) :is(.squisq-view-menu-checkbox, .squisq-view-menu-radio) {
   max-height: 420px;
 }
 
+/* ── AI image generation: the Generate image panel ── */
+.db-ai-image-form {
+  padding: 12px 14px 0;
+}
+
+.db-ai-image-aspects {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.db-ai-review-panel .db-ai-image-aspects button[aria-checked='true'] {
+  border-color: var(--db-bg-selected);
+  background: var(--db-bg-selected);
+  color: var(--db-text-on-selected);
+}
+
+.db-ai-image-actions,
+.db-ai-image-allow {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.db-ai-image-code {
+  display: block;
+  margin-top: 8px;
+  color: var(--db-text);
+  font:
+    600 20px/1.2 ui-monospace,
+    SFMono-Regular,
+    Consolas,
+    monospace;
+  letter-spacing: 0.08em;
+}
+
+.db-ai-image-results {
+  margin-bottom: 14px;
+}
+
+.db-ai-image-prompt {
+  margin: 0 0 8px;
+  color: var(--db-text);
+  overflow-wrap: anywhere;
+}
+
+/* A raster image ignores the dark theme, so it sits on a light frame. */
+.db-ai-image-preview {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 4px 0 10px;
+  border: 1px solid var(--db-border);
+  border-radius: 6px;
+  background: #fff;
+}
+
+.db-ai-image-alt {
+  margin-bottom: 6px;
+  font-weight: 400;
+}
+
+.db-ai-image-alt input {
+  min-height: var(--db-target-min);
+  padding: 0 8px;
+  border: 1px solid var(--db-input-border);
+  border-radius: 5px;
+  background: var(--db-bg-subtle);
+  color: var(--db-text);
+  font: 400 var(--db-input-font-size) / 1.4 var(--db-ui-font);
+}
+
+.db-ai-image-result-actions {
+  padding: 6px 0 0;
+}
+
+/*
+ * Illustrate's design graphics: raster pictures, so a light frame in dark mode
+ * too. A picture scales to fit the preview's height rather than scrolling in
+ * it the way a tall diagram does, so a portrait poster is seen whole.
+ */
+.db-ai-design-preview {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  background: #fff;
+}
+
+.db-ai-design-preview img {
+  display: block;
+  max-width: 100%;
+  /* The preview's max-height, less its border. */
+  max-height: 338px;
+  width: auto;
+  height: auto;
+}
+
+.db-ai-diagram-dialog .db-ai-design-preview img {
+  max-height: 418px;
+}
+
 .db-ai-diagram-source {
   max-height: 220px;
   overflow: auto;
@@ -8079,6 +8367,10 @@ button.db-git-file-row:hover {
   font-size: 12.5px;
 }
 
+.db-export-error-action {
+  margin-top: 8px;
+}
+
 .db-git-hint {
   color: var(--db-text-muted);
   font-size: 12px;

package/dist/DocumentConflictDialog-DZ2BV2IH.js

@@ -1,111 +0,0 @@
-import {
-  Dialog
-} from "./chunk-VJPGZCFS.js";
-
-// src/DocBlocksShell/DocumentConflictDialog.tsx
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function formattedTime(value) {
-  if (value === null || value === void 0) return null;
-  const date = new Date(value);
-  return Number.isFinite(date.getTime()) ? date.toLocaleString() : null;
-}
-function DocumentConflictDialog({
-  conflict,
-  readSavedFile,
-  onUseLocal,
-  onUseSaved,
-  onClose
-}) {
-  const [savedFile, setSavedFile] = useState(null);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    let disposed = false;
-    void readSavedFile().then(
-      (file) => {
-        if (!disposed) setSavedFile(file);
-      },
-      () => {
-        if (!disposed) setSavedFile(null);
-      }
-    );
-    return () => {
-      disposed = true;
-    };
-  }, [readSavedFile, conflict.targetKey, conflict.externalContent, conflict.externalVersion]);
-  const capturedAt = formattedTime(conflict.recoveredDraftCapturedAt);
-  const savedAt = savedFile?.content === conflict.externalContent ? formattedTime(savedFile?.lastModified) : null;
-  const localLabel = conflict.recoveredDraft ? "Recovery draft" : "Your unsaved version";
-  const choose = async (resolve) => {
-    if (busy) return;
-    setBusy(true);
-    setError(null);
-    try {
-      if (await resolve()) onClose();
-      else setError("Could not resolve this conflict. Both versions are still available.");
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : "Could not resolve this conflict.");
-    } finally {
-      setBusy(false);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      title: "Compare document versions",
-      size: "full",
-      className: "db-conflict-dialog",
-      onClose: () => {
-        if (!busy) onClose();
-      },
-      closeOnBackdrop: !busy,
-      footer: /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, onClick: onClose, children: "Decide later" }),
-      children: [
-        /* @__PURE__ */ jsxs("p", { children: [
-          conflict.recoveredDraft ? "This draft was recovered from a previous session. The saved file may contain newer edits." : "The saved file changed while you had unsaved edits.",
-          " ",
-          "Compare the document text before choosing. Neither version changes until you choose."
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "db-conflict-columns", "aria-busy": busy, children: [
-          /* @__PURE__ */ jsxs("section", { className: "db-conflict-version", "aria-label": localLabel, children: [
-            /* @__PURE__ */ jsx("h3", { children: localLabel }),
-            /* @__PURE__ */ jsx("p", { className: "db-conflict-metadata", children: conflict.recoveredDraft ? capturedAt ? `Recovery copy captured: ${capturedAt}` : "Recovery capture time unavailable" : "Not saved in this session" }),
-            /* @__PURE__ */ jsx(
-              "textarea",
-              {
-                className: "db-conflict-preview",
-                "aria-label": `${localLabel} preview`,
-                value: conflict.localContent,
-                readOnly: true,
-                spellCheck: false
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "db-conflict-consequence", children: "Replaces the saved file with the draft shown above." }),
-            /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, onClick: () => void choose(onUseLocal), children: conflict.recoveredDraft ? "Replace file with draft" : "Keep mine" })
-          ] }),
-          /* @__PURE__ */ jsxs("section", { className: "db-conflict-version", "aria-label": "Saved file", children: [
-            /* @__PURE__ */ jsx("h3", { children: "Saved file" }),
-            /* @__PURE__ */ jsx("p", { className: "db-conflict-metadata", children: conflict.externalContent === null ? "File was deleted outside DocBlocks" : savedAt ? `File last modified: ${savedAt}` : "File modification time unavailable" }),
-            conflict.externalContent === null ? /* @__PURE__ */ jsx("div", { className: "db-conflict-preview", children: "The saved file no longer exists." }) : /* @__PURE__ */ jsx(
-              "textarea",
-              {
-                className: "db-conflict-preview",
-                "aria-label": "Saved file preview",
-                value: conflict.externalContent,
-                readOnly: true,
-                spellCheck: false
-              }
-            ),
-            /* @__PURE__ */ jsx("p", { className: "db-conflict-consequence", children: conflict.externalContent === null ? "Discards the draft and closes this document." : "Discards the draft and opens the saved file shown above." }),
-            /* @__PURE__ */ jsx("button", { type: "button", disabled: busy, onClick: () => void choose(onUseSaved), children: conflict.externalContent === null ? "Accept deletion" : "Use saved file" })
-          ] })
-        ] }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", children: error })
-      ]
-    }
-  );
-}
-export {
-  DocumentConflictDialog as default
-};