@bendyline/docblocks-react 2.7.7 → 2.7.8

package/dist/AiImagePanel-OXWEFOBC.js

@@ -0,0 +1,314 @@
+import {
+  imageAltText,
+  imageMarkdown,
+  saveGeneratedImage
+} from "./chunk-HIKMOKBQ.js";
+import {
+  imageAccessSentence,
+  imageProgressFraction,
+  imageProgressText,
+  useImageAccess
+} from "./chunk-OW6JWRAA.js";
+
+// src/Ai/AiImagePanel.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useEditorContext } from "@bendyline/squisq-editor-react";
+import { AI_IMAGE_ASPECTS } from "@bendyline/docblocks/host";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ASPECT_LABELS = {
+  "1:1": "Square",
+  "4:3": "Landscape",
+  "3:4": "Portrait",
+  "16:9": "Wide",
+  "9:16": "Tall"
+};
+var PREFILL_CHARACTERS = 600;
+function imagesOf(ai) {
+  return ai.images;
+}
+function AiImagePanel({ ai, onClose }) {
+  const images = imagesOf(ai);
+  const access = useImageAccess(images);
+  const { getSelection, insertBlockAfterCursor, mediaProvider, bumpMediaRevision } = useEditorContext();
+  const [prompt, setPrompt] = useState(() => {
+    const selection = getSelection();
+    const text = selection && !selection.empty ? selection.text.trim() : "";
+    return text.slice(0, PREFILL_CHARACTERS);
+  });
+  const [aspect, setAspect] = useState("1:1");
+  const [model, setModel] = useState(null);
+  const [models, setModels] = useState(null);
+  const [modelsError, setModelsError] = useState(null);
+  const [results, setResults] = useState([]);
+  const [notice, setNotice] = useState(null);
+  const [allowing, setAllowing] = useState(false);
+  const handle = useRef(null);
+  const urls = useRef(/* @__PURE__ */ new Set());
+  const counter = useRef(0);
+  const ready = access?.kind === "ready";
+  useEffect(() => {
+    if (!images) return;
+    let live = true;
+    void images.getPreferences().then((preferences) => {
+      if (!live) return;
+      setAspect(preferences.aspect);
+      setModel(preferences.model);
+    }).catch(() => void 0);
+    return () => {
+      live = false;
+    };
+  }, [images]);
+  useEffect(() => {
+    if (!images || !ready) return;
+    let live = true;
+    void images.models().then((result) => {
+      if (!live) return;
+      if (result.ok) {
+        setModels(result.value);
+        setModelsError(null);
+      } else {
+        setModelsError(result.error.message);
+      }
+    });
+    return () => {
+      live = false;
+    };
+  }, [images, ready]);
+  useEffect(() => {
+    const owned = urls.current;
+    return () => {
+      handle.current?.cancel();
+      for (const url of owned) URL.revokeObjectURL(url);
+      owned.clear();
+    };
+  }, []);
+  const installed = (models ?? []).filter((entry) => entry.state === "installed");
+  const chosen = installed.find((entry) => entry.id === model) ?? installed[0] ?? null;
+  const rendering = results.some((result) => result.status === "rendering");
+  const update = useCallback((key, change) => {
+    setResults(
+      (current) => current.map((result) => result.key === key ? { ...result, ...change } : result)
+    );
+  }, []);
+  const render = (text, shape) => {
+    if (!images || !chosen || !text.trim() || handle.current) return;
+    counter.current += 1;
+    const key = `image-${String(counter.current)}`;
+    setNotice(null);
+    setResults((current) => [
+      {
+        key,
+        prompt: text.trim(),
+        aspect: shape,
+        model: chosen.id,
+        status: "rendering",
+        progress: null,
+        image: null,
+        url: null,
+        alt: imageAltText(text),
+        error: null,
+        inserted: false
+      },
+      ...current
+    ]);
+    const started = images.generate(
+      { prompt: text.trim(), aspect: shape, model: chosen.id },
+      (event) => {
+        if (event.kind === "progress") update(key, { progress: event.progress });
+      }
+    );
+    handle.current = started;
+    void started.done.then((outcome) => {
+      if (handle.current === started) handle.current = null;
+      if (outcome.ok) {
+        const url = URL.createObjectURL(new Blob([outcome.value.data], { type: "image/png" }));
+        urls.current.add(url);
+        update(key, { status: "done", image: outcome.value, url, progress: null });
+      } else {
+        update(key, {
+          status: outcome.error.code === "cancelled" ? "stopped" : "failed",
+          error: outcome.error.code === "cancelled" ? null : outcome.error.message,
+          progress: null
+        });
+      }
+    });
+  };
+  const chooseAspect = (next) => {
+    setAspect(next);
+    void images?.setPreferences({ aspect: next }).catch(() => void 0);
+  };
+  const chooseModel = (next) => {
+    setModel(next);
+    void images?.setPreferences({ model: next }).catch(() => void 0);
+  };
+  const insert = async (result) => {
+    if (!result.image) return;
+    if (!mediaProvider) {
+      setNotice("Save the document in a folder to insert images.");
+      return;
+    }
+    try {
+      const path = await saveGeneratedImage(mediaProvider, result.image, result.prompt);
+      bumpMediaRevision?.();
+      if (!insertBlockAfterCursor(imageMarkdown(path, result.alt || result.prompt))) {
+        setNotice("Switch to Write or Source view, place the cursor, then insert again.");
+        return;
+      }
+      update(result.key, { inserted: true });
+    } catch (error) {
+      setNotice(
+        `DocBlocks could not save the image beside the document. ${error instanceof Error ? error.message : ""}`.trim()
+      );
+    }
+  };
+  const discard = (result) => {
+    if (result.url) {
+      URL.revokeObjectURL(result.url);
+      urls.current.delete(result.url);
+    }
+    setResults((current) => current.filter((entry) => entry.key !== result.key));
+  };
+  const allow = async () => {
+    if (!images) return;
+    setAllowing(true);
+    const outcome = await images.requestAccess();
+    setAllowing(false);
+    if (!outcome.ok) setNotice(outcome.error.message);
+  };
+  const blocked = imageAccessSentence(access);
+  const modelLabel = (id) => (models ?? []).find((entry) => entry.id === id)?.label ?? "the image model";
+  return /* @__PURE__ */ jsxs("aside", { className: "db-ai-review-panel db-ai-image-panel", "aria-label": "Generate image", children: [
+    /* @__PURE__ */ jsxs("div", { className: "db-ai-review-header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { children: "Generate image" }),
+        chosen && /* @__PURE__ */ jsx("span", { className: "db-ai-review-count", children: chosen.label })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "db-ai-review-close",
+          onClick: onClose,
+          "aria-label": "Close Generate image",
+          children: "\xD7"
+        }
+      )
+    ] }),
+    blocked && /* @__PURE__ */ jsxs("div", { className: "db-ai-review-empty", role: "status", children: [
+      access?.kind === "awaiting-approval" && access.verificationCode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "In Gezel, approve DocBlocks and enter this code:",
+        /* @__PURE__ */ jsx("span", { className: "db-ai-image-code", children: access.verificationCode })
+      ] }) : blocked,
+      access?.kind === "needs-approval" && /* @__PURE__ */ jsx("div", { className: "db-ai-illustrate-bar db-ai-image-allow", children: /* @__PURE__ */ jsx("button", { type: "button", disabled: allowing, onClick: () => void allow(), children: "Allow image generation\u2026" }) })
+    ] }),
+    ready && models !== null && installed.length === 0 && /* @__PURE__ */ jsx("div", { className: "db-ai-review-empty", role: "status", children: "No image model is installed yet. Download one under Settings, AI assistance." }),
+    ready && modelsError && /* @__PURE__ */ jsx("div", { className: "db-ai-review-empty db-ai-error", role: "alert", children: modelsError }),
+    ready && installed.length > 0 && /* @__PURE__ */ jsxs("section", { className: "db-ai-image-form", "aria-label": "Describe the image", children: [
+      /* @__PURE__ */ jsxs("label", { className: "db-ai-field", children: [
+        "Description",
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            value: prompt,
+            onChange: (event) => setPrompt(event.target.value),
+            placeholder: "A watercolor lighthouse on a cliff at dusk",
+            maxLength: 4e3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "db-ai-image-aspects", role: "radiogroup", "aria-label": "Shape", children: AI_IMAGE_ASPECTS.map((shape) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": aspect === shape,
+          onClick: () => chooseAspect(shape),
+          children: ASPECT_LABELS[shape]
+        },
+        shape
+      )) }),
+      installed.length > 1 && /* @__PURE__ */ jsxs("label", { className: "db-ai-field db-ai-field--inline", children: [
+        "Model",
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: chosen?.id ?? "",
+            onChange: (event) => chooseModel(event.target.value),
+            children: installed.map((entry) => /* @__PURE__ */ jsx("option", { value: entry.id, children: entry.label }, entry.id))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "db-ai-illustrate-bar db-ai-image-actions", children: rendering ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => handle.current?.cancel(), children: "Stop" }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "db-ai-image-generate",
+          disabled: !prompt.trim(),
+          onClick: () => render(prompt, aspect),
+          children: "Generate"
+        }
+      ) })
+    ] }),
+    notice && /* @__PURE__ */ jsx("div", { className: "db-ai-review-empty db-ai-error", role: "alert", children: notice }),
+    results.length > 0 && /* @__PURE__ */ jsx("ol", { className: "db-ai-review-list db-ai-image-results", children: results.map((result) => {
+      const fraction = imageProgressFraction(result.progress);
+      return /* @__PURE__ */ jsxs("li", { className: "db-ai-review-finding db-ai-image-result", children: [
+        /* @__PURE__ */ jsx("p", { className: "db-ai-image-prompt", children: result.prompt }),
+        result.status === "rendering" && /* @__PURE__ */ jsxs("div", { className: "db-ai-illustrate-progress", role: "status", children: [
+          /* @__PURE__ */ jsx("span", { className: "db-ai-spinner", "aria-hidden": "true" }),
+          imageProgressText(result.progress, modelLabel(result.model)),
+          fraction !== null && /* @__PURE__ */ jsx("progress", { max: 1, value: fraction })
+        ] }),
+        result.status === "failed" && /* @__PURE__ */ jsx("p", { className: "db-ai-error", role: "alert", children: result.error }),
+        result.status === "stopped" && /* @__PURE__ */ jsx("p", { className: "db-ai-note", children: "Stopped." }),
+        result.status === "done" && result.url && result.image && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: "db-ai-image-preview",
+              src: result.url,
+              alt: result.alt,
+              width: result.image.width,
+              height: result.image.height
+            }
+          ),
+          /* @__PURE__ */ jsxs("label", { className: "db-ai-field db-ai-image-alt", children: [
+            "Description for readers",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: result.alt,
+                onChange: (event) => update(result.key, { alt: event.target.value }),
+                maxLength: 160
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "db-ai-illustrate-bar db-ai-image-result-actions", children: [
+          result.status === "done" && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: result.inserted,
+              onClick: () => void insert(result),
+              children: result.inserted ? "Inserted" : "Insert"
+            }
+          ),
+          result.status !== "rendering" && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: rendering || !chosen,
+              onClick: () => render(result.prompt, result.aspect),
+              children: result.status === "done" ? "Regenerate" : "Try again"
+            }
+          ),
+          result.status !== "rendering" && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => discard(result), children: "Discard" })
+        ] })
+      ] }, result.key);
+    }) })
+  ] });
+}
+export {
+  AiImagePanel
+};

package/dist/{AiStudyDialog-JPVFFZBB.js → AiStudyDialog-T3FY74HY.js}

@@ -30,14 +30,14 @@ import {
   extractNumbers,
   sanitizeGeneratedMarkdown,
   stripReasoning
-} from "./chunk-N7AKLJPY.js";
+} from "./chunk-CXLXGFG2.js";
 import {
   unavailableSentence,
   useAiStatus
 } from "./chunk-K4I3NJFL.js";
 import {
   Dialog
-} from "./chunk-VJPGZCFS.js";
+} from "./chunk-UYJCL6OW.js";
 
 // src/Ai/AiStudyDialog.tsx
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

package/dist/{AudioExportDialog-EICCBSSE.js → AudioExportDialog-CBMSLQBS.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-RP3DVNTI.js";
 import {
   Dialog
-} from "./chunk-VJPGZCFS.js";
+} from "./chunk-UYJCL6OW.js";
 
 // src/Speech/AudioExportDialog.tsx
 import { useEffect, useId, useRef, useState } from "react";

package/dist/DocumentConflictDialog-4R4QMKBT.js

@@ -0,0 +1,217 @@
+import {
+  GitDiffView
+} from "./chunk-27E2OON2.js";
+import {
+  Dialog
+} from "./chunk-UYJCL6OW.js";
+
+// src/DocBlocksShell/DocumentConflictDialog.tsx
+import { Component, useEffect, useMemo, useState } from "react";
+import { resolveFileKind } from "@bendyline/squisq-editor-react";
+import { MediaContext } from "@bendyline/squisq-react";
+import { LinearDocView } from "@bendyline/squisq-react/page";
+import { markdownToDoc, resolveThemeForDoc } from "@bendyline/squisq/doc";
+import { parseMarkdown } from "@bendyline/squisq/markdown";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIFF_VIEWS = [
+  { value: "inline", label: "Inline" },
+  { value: "side-by-side", label: "Side by side" },
+  { value: "changes", label: "Changes only" }
+];
+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 VersionText({ label, content }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: "db-conflict-preview",
+      "aria-label": `${label} preview`,
+      value: content,
+      readOnly: true,
+      spellCheck: false
+    }
+  );
+}
+var RenderBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false, resetKey: this.props.resetKey };
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.resetKey === state.resetKey ? null : { failed: false, resetKey: props.resetKey };
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+};
+function RenderedVersion({
+  label,
+  content,
+  defaultThemeId
+}) {
+  const rendered = useMemo(() => {
+    try {
+      const doc = markdownToDoc(parseMarkdown(content));
+      return { doc, theme: resolveThemeForDoc(doc, doc.themeId ? void 0 : defaultThemeId) };
+    } catch {
+      return null;
+    }
+  }, [content, defaultThemeId]);
+  const text = /* @__PURE__ */ jsx(VersionText, { label, content });
+  if (!rendered) return text;
+  return /* @__PURE__ */ jsx(RenderBoundary, { resetKey: content, fallback: text, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "db-conflict-preview db-conflict-preview--rendered",
+      role: "region",
+      "aria-label": `${label} preview`,
+      tabIndex: 0,
+      style: { background: rendered.theme.colors.background },
+      children: /* @__PURE__ */ jsx(
+        LinearDocView,
+        {
+          doc: rendered.doc,
+          theme: rendered.theme,
+          variant: "document",
+          showCover: false,
+          thinMargins: true,
+          animationsEnabled: false
+        }
+      )
+    }
+  ) });
+}
+function DocumentConflictDialog({
+  conflict,
+  fileName,
+  theme,
+  defaultThemeId,
+  mediaProvider,
+  readSavedFile,
+  onUseLocal,
+  onUseSaved,
+  onClose
+}) {
+  const [savedFile, setSavedFile] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [diffView, setDiffView] = useState("inline");
+  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 fileKind = resolveFileKind(fileName);
+  const version = (label, content) => fileKind.mode === "markdown" ? /* @__PURE__ */ jsx(RenderedVersion, { label, content, defaultThemeId }) : /* @__PURE__ */ jsx(VersionText, { label, content });
+  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 two versions before choosing. Neither version changes until you choose."
+        ] }),
+        /* @__PURE__ */ jsx(MediaContext.Provider, { value: mediaProvider ?? null, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: diffView === "side-by-side" ? "db-conflict-columns db-conflict-columns--wide-diff" : "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" }),
+                version(localLabel, conflict.localContent),
+                /* @__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-diff", "aria-label": "Differences", children: [
+                /* @__PURE__ */ jsxs("div", { className: "db-conflict-diff-header", children: [
+                  /* @__PURE__ */ jsx("h3", { children: "Differences" }),
+                  /* @__PURE__ */ jsxs("label", { className: "db-conflict-diff-view", children: [
+                    /* @__PURE__ */ jsx("span", { children: "View" }),
+                    /* @__PURE__ */ jsx(
+                      "select",
+                      {
+                        value: diffView,
+                        onChange: (event) => setDiffView(event.currentTarget.value),
+                        children: DIFF_VIEWS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "db-conflict-metadata", children: [
+                  "\u2212 Only in ",
+                  localLabel.toLowerCase(),
+                  " \xB7 + Only in the saved file"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  GitDiffView,
+                  {
+                    original: conflict.localContent,
+                    modified: conflict.externalContent ?? "",
+                    fileName,
+                    language: fileKind.language,
+                    theme,
+                    layout: diffView === "side-by-side" ? "side-by-side" : "inline",
+                    changesOnly: diffView === "changes"
+                  }
+                )
+              ] }),
+              /* @__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." }) : version("Saved file", conflict.externalContent),
+                /* @__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
+};

package/dist/{ExportDialog-EYDGTJ3S.js → ExportDialog-FNFD53SY.js}

@@ -1,9 +1,9 @@
 import {
   ExportDialog
-} from "./chunk-G63YXKBC.js";
+} from "./chunk-WDNE5TI3.js";
 import "./chunk-H3BK5MK6.js";
 import "./chunk-6MSHXQNB.js";
-import "./chunk-VJPGZCFS.js";
+import "./chunk-UYJCL6OW.js";
 export {
   ExportDialog
 };