@bendyline/docblocks-react 2.7.7 → 2.7.8

package/dist/{chunk-7HBKKXRV.js → chunk-TN7BY5N3.js}

@@ -1,17 +1,221 @@
+import {
+  imageAccessSentence,
+  useImageAccess
+} from "./chunk-OW6JWRAA.js";
 import {
   HighlightedText
 } from "./chunk-TBLZBNQF.js";
 import {
   Dialog
-} from "./chunk-VJPGZCFS.js";
+} from "./chunk-UYJCL6OW.js";
 
 // src/Settings/AiSettings.tsx
-import { useCallback, useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useId as useId2, useRef as useRef3, useState as useState3 } from "react";
+
+// src/Settings/AiImageSettings.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/Speech/format.ts
+function formatModelSize(bytes) {
+  const gigabytes = bytes / 1024 ** 3;
+  if (gigabytes >= 0.95) return `${gigabytes.toFixed(1)} GB`;
+  return `${Math.max(1, Math.round(bytes / 1024 ** 2))} MB`;
+}
+
+// src/Settings/image-model-facts.ts
+function imageModelFacts(model) {
+  const facts = [];
+  if (model.downloadBytes !== null) facts.push(formatModelSize(model.downloadBytes));
+  if (model.license) facts.push(model.license);
+  if (model.commercialUse === false) facts.push("Not for commercial use");
+  if (model.rendersText) facts.push("Draws legible text");
+  if (model.hardwareTier === "workstation") {
+    facts.push(
+      model.minRamGb !== null ? `Workstation \xB7 ${String(model.minRamGb)} GB+ memory` : "Workstation"
+    );
+  }
+  if (model.shared) facts.push("Shared with Gezel, no download needed");
+  if (model.fit && model.fit.verdict !== "fits" && model.fit.reason) facts.push(model.fit.reason);
+  return facts;
+}
+
+// src/Settings/AiImageSettings.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function AiImageSettings({ images }) {
+  const access = useImageAccess(images);
+  const [models, setModels] = useState(null);
+  const [preferences, setPreferences] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const [installing, setInstalling] = useState(
+    null
+  );
+  const [allowing, setAllowing] = useState(false);
+  const installHandle = useRef(null);
+  const mounted = useRef(true);
+  const ready = access?.kind === "ready";
+  const refresh = useCallback(async () => {
+    const result = await images.models();
+    if (!mounted.current) return;
+    if (result.ok) setModels(result.value);
+    else setFailure(result.error.message);
+  }, [images]);
+  useEffect(() => {
+    mounted.current = true;
+    void images.getPreferences().then(
+      (initial) => {
+        if (mounted.current) setPreferences(initial);
+      },
+      () => void 0
+    );
+    return () => {
+      mounted.current = false;
+      installHandle.current?.cancel();
+    };
+  }, [images]);
+  useEffect(() => {
+    if (ready) void refresh();
+  }, [ready, refresh]);
+  const install = async (model) => {
+    setFailure(null);
+    setInstalling({ id: model.id, progress: null });
+    const handle = images.installModel(model.id, (progress) => {
+      if (mounted.current) setInstalling({ id: model.id, progress });
+    });
+    installHandle.current = handle;
+    try {
+      const result = await handle.done;
+      if (!mounted.current) return;
+      if (!result.ok && result.error.code !== "cancelled") setFailure(result.error.message);
+      await refresh();
+    } finally {
+      if (installHandle.current === handle) installHandle.current = null;
+      if (mounted.current) setInstalling(null);
+    }
+  };
+  const remove = async (model) => {
+    setFailure(null);
+    const result = await images.removeModel(model.id);
+    if (!mounted.current) return;
+    if (!result.ok) setFailure(result.error.message);
+    else setPreferences(await images.getPreferences());
+    await refresh();
+  };
+  const choose = async (patch) => {
+    setPreferences(await images.setPreferences(patch));
+  };
+  const allow = async () => {
+    setAllowing(true);
+    setFailure(null);
+    const result = await images.requestAccess();
+    if (!mounted.current) return;
+    setAllowing(false);
+    if (!result.ok) setFailure(result.error.message);
+  };
+  const installed = (models ?? []).filter((model) => model.state === "installed");
+  const designModels = installed.filter((model) => model.rendersText);
+  const blocked = imageAccessSentence(access);
+  const modelRow = (model) => {
+    const busy = installing?.id === model.id;
+    const percent = busy && installing.progress ? installing.progress.percent : null;
+    const wontRun = model.fit?.verdict === "wont-run";
+    return /* @__PURE__ */ jsxs("li", { className: "db-settings-speech-model", children: [
+      /* @__PURE__ */ jsxs("div", { className: "db-settings-speech-model-text", children: [
+        /* @__PURE__ */ jsx("span", { className: "db-settings-speech-model-name", children: model.label }),
+        /* @__PURE__ */ jsx("span", { className: "db-settings-hint", children: imageModelFacts(model).join(" \xB7 ") })
+      ] }),
+      busy ? /* @__PURE__ */ jsxs("div", { className: "db-settings-ai-download-progress", role: "status", children: [
+        /* @__PURE__ */ jsx(
+          "progress",
+          {
+            max: 100,
+            value: percent ?? void 0,
+            "aria-label": `${model.label} download progress`
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: installing.progress?.phase === "verifying" ? "Verifying\u2026" : percent === null ? "Starting\u2026" : `${String(Math.round(percent))}%` }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "db-settings-action db-settings-action--secondary",
+            onClick: () => installHandle.current?.cancel(),
+            children: "Cancel"
+          }
+        )
+      ] }) : model.state === "installed" ? model.shared ? null : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "db-settings-action db-settings-action--secondary",
+          disabled: installing !== null,
+          onClick: () => void remove(model),
+          children: "Remove"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "db-settings-action",
+          disabled: installing !== null || wontRun,
+          title: wontRun ? model.fit?.reason ?? void 0 : void 0,
+          onClick: () => void install(model),
+          children: model.state === "downloading" ? "Show download" : "Download"
+        }
+      )
+    ] }, model.id);
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "db-settings-ai-knowledge", "aria-label": "Image generation", children: [
+    /* @__PURE__ */ jsx("h3", { className: "db-settings-select-header", children: "Image generation" }),
+    blocked ? /* @__PURE__ */ jsx("p", { className: "db-settings-hint", role: "status", "aria-live": "polite", children: access?.kind === "awaiting-approval" && access.verificationCode ? `In Gezel, approve DocBlocks and enter the code ${access.verificationCode}.` : blocked }) : /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: "Images are generated on this computer. Models download only when you choose, and some are large." }),
+    access?.kind === "needs-approval" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "db-settings-action",
+        disabled: allowing,
+        onClick: () => void allow(),
+        children: "Allow image generation\u2026"
+      }
+    ),
+    failure && /* @__PURE__ */ jsx("p", { className: "db-settings-hint db-settings-ai-error", role: "alert", children: failure }),
+    ready && preferences && installed.length > 0 && /* @__PURE__ */ jsxs("label", { className: "db-settings-select", children: [
+      /* @__PURE__ */ jsx("span", { className: "db-settings-select-header", children: "Model for Generate image" }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "db-settings-select-input",
+          value: preferences.model ?? "",
+          onChange: (event) => void choose({ model: event.currentTarget.value || null }),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "First installed" }),
+            installed.map((model) => /* @__PURE__ */ jsx("option", { value: model.id, children: model.label }, model.id))
+          ]
+        }
+      )
+    ] }),
+    ready && preferences && designModels.length > 0 && /* @__PURE__ */ jsxs("label", { className: "db-settings-select", children: [
+      /* @__PURE__ */ jsx("span", { className: "db-settings-select-header", children: "Model for design graphics" }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          className: "db-settings-select-input",
+          value: preferences.designModel ?? "",
+          onChange: (event) => void choose({ designModel: event.currentTarget.value || null }),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "None" }),
+            designModels.map((model) => /* @__PURE__ */ jsx("option", { value: model.id, children: model.label }, model.id))
+          ]
+        }
+      )
+    ] }),
+    ready && models && /* @__PURE__ */ jsx("ul", { className: "db-settings-speech-models", children: models.map(modelRow) })
+  ] });
+}
 
 // src/Settings/AiKnowledgeSettings.tsx
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect as useEffect2, useId, useRef as useRef2, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function sizedArticle(bytes) {
   const megabytes = String(Math.max(1, Math.round(bytes / 1024 ** 2)));
   const an = megabytes.startsWith("8") || megabytes.length % 3 === 2 && (megabytes.startsWith("11") || megabytes.startsWith("18"));
@@ -40,24 +244,24 @@ function matchRanges(text, query) {
   return ranges;
 }
 function AiKnowledgeSettings({ knowledge }) {
-  const [state, setState] = useState(null);
-  const [error, setError] = useState(null);
-  const [loadError, setLoadError] = useState(null);
-  const [unsupported, setUnsupported] = useState(null);
-  const [busy, setBusy] = useState(false);
-  const [revision, setRevision] = useState(0);
-  const [adding, setAdding] = useState(false);
-  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
-  const [removing, setRemoving] = useState(null);
+  const [state, setState] = useState2(null);
+  const [error, setError] = useState2(null);
+  const [loadError, setLoadError] = useState2(null);
+  const [unsupported, setUnsupported] = useState2(null);
+  const [busy, setBusy] = useState2(false);
+  const [revision, setRevision] = useState2(0);
+  const [adding, setAdding] = useState2(false);
+  const [expanded, setExpanded] = useState2(() => /* @__PURE__ */ new Set());
+  const [removing, setRemoving] = useState2(null);
   const binHeadingId = useId();
-  const generation = useRef(0);
-  useEffect(
+  const generation = useRef2(0);
+  useEffect2(
     () => () => {
       generation.current++;
     },
     [knowledge]
   );
-  useEffect(() => {
+  useEffect2(() => {
     let live = true;
     let timer;
     const refresh2 = async () => {
@@ -119,16 +323,16 @@ function AiKnowledgeSettings({ knowledge }) {
   ) ?? [];
   const problem = error ?? loadError;
   if (unsupported)
-    return /* @__PURE__ */ jsxs("section", { className: "db-settings-ai-knowledge", "aria-label": "Knowledge catalogs", children: [
-      /* @__PURE__ */ jsx("h3", { className: "db-settings-select-header", children: "Knowledge catalogs" }),
-      /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: unsupported })
+    return /* @__PURE__ */ jsxs2("section", { className: "db-settings-ai-knowledge", "aria-label": "Knowledge catalogs", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "db-settings-select-header", children: "Knowledge catalogs" }),
+      /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: unsupported })
     ] });
-  return /* @__PURE__ */ jsxs("section", { className: "db-settings-ai-knowledge", "aria-label": "Knowledge catalogs", children: [
-    /* @__PURE__ */ jsx("h3", { className: "db-settings-select-header", children: "Knowledge catalogs" }),
-    /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: "Add reference material for AI writing, review, and chat. Relevant passages from enabled catalogs are included in each request." }),
-    problem && !adding && /* @__PURE__ */ jsx("p", { className: "db-settings-hint db-settings-ai-error", role: "alert", children: problem }),
-    !state && !loadError && /* @__PURE__ */ jsx("p", { className: "db-settings-hint", role: "status", children: "Loading knowledge catalogs\u2026" }),
-    !state && loadError && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("section", { className: "db-settings-ai-knowledge", "aria-label": "Knowledge catalogs", children: [
+    /* @__PURE__ */ jsx2("h3", { className: "db-settings-select-header", children: "Knowledge catalogs" }),
+    /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: "Add reference material for AI writing, review, and chat. Relevant passages from enabled catalogs are included in each request." }),
+    problem && !adding && /* @__PURE__ */ jsx2("p", { className: "db-settings-hint db-settings-ai-error", role: "alert", children: problem }),
+    !state && !loadError && /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", role: "status", children: "Loading knowledge catalogs\u2026" }),
+    !state && loadError && /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -137,7 +341,7 @@ function AiKnowledgeSettings({ knowledge }) {
         children: "Try again"
       }
     ),
-    state?.improvement && !state.improvement.downloading && /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: /* @__PURE__ */ jsxs(
+    state?.improvement && !state.improvement.downloading && /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
@@ -151,11 +355,11 @@ function AiKnowledgeSettings({ knowledge }) {
         ]
       }
     ) }),
-    state && /* @__PURE__ */ jsxs("div", { className: "db-knowledge-bin", children: [
-      /* @__PURE__ */ jsxs("div", { className: "db-knowledge-bin-header", children: [
-        /* @__PURE__ */ jsx("h4", { id: binHeadingId, className: "db-knowledge-bin-title", children: "Downloaded catalogs" }),
-        /* @__PURE__ */ jsx("span", { className: "db-knowledge-bin-count", "aria-hidden": "true", children: downloaded.length }),
-        /* @__PURE__ */ jsx(
+    state && /* @__PURE__ */ jsxs2("div", { className: "db-knowledge-bin", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "db-knowledge-bin-header", children: [
+        /* @__PURE__ */ jsx2("h4", { id: binHeadingId, className: "db-knowledge-bin-title", children: "Downloaded catalogs" }),
+        /* @__PURE__ */ jsx2("span", { className: "db-knowledge-bin-count", "aria-hidden": "true", children: downloaded.length }),
+        /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
@@ -165,7 +369,7 @@ function AiKnowledgeSettings({ knowledge }) {
           }
         )
       ] }),
-      downloaded.length === 0 ? /* @__PURE__ */ jsx("p", { className: "db-settings-hint db-knowledge-bin-empty", children: "No catalogs downloaded yet. Add a catalog to give AI writing, review, and chat reference material." }) : /* @__PURE__ */ jsx("ul", { className: "db-knowledge-bin-list", "aria-labelledby": binHeadingId, children: downloaded.map((catalog) => /* @__PURE__ */ jsx(
+      downloaded.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "db-settings-hint db-knowledge-bin-empty", children: "No catalogs downloaded yet. Add a catalog to give AI writing, review, and chat reference material." }) : /* @__PURE__ */ jsx2("ul", { className: "db-knowledge-bin-list", "aria-labelledby": binHeadingId, children: downloaded.map((catalog) => /* @__PURE__ */ jsx2(
         DownloadedCatalog,
         {
           catalog,
@@ -179,7 +383,7 @@ function AiKnowledgeSettings({ knowledge }) {
         catalog.id
       )) })
     ] }),
-    adding && state && /* @__PURE__ */ jsx(
+    adding && state && /* @__PURE__ */ jsx2(
       AddCatalogDialog,
       {
         catalogs: state.catalogs,
@@ -202,8 +406,8 @@ function DownloadedCatalog({
   onAction
 }) {
   const bodyId = useId();
-  return /* @__PURE__ */ jsxs("li", { className: "db-knowledge-item", children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("li", { className: "db-knowledge-item", children: [
+    /* @__PURE__ */ jsxs2(
       "button",
       {
         type: "button",
@@ -212,15 +416,15 @@ function DownloadedCatalog({
         "aria-controls": expanded ? bodyId : void 0,
         onClick: onToggle,
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "span",
             {
               className: `db-knowledge-item-caret${expanded ? " db-knowledge-item-caret--open" : ""}`,
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "db-knowledge-item-name", children: catalog.name }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2("span", { className: "db-knowledge-item-name", children: catalog.name }),
+          /* @__PURE__ */ jsx2(
             "span",
             {
               className: `db-knowledge-item-summary${catalog.state === "error" ? " db-knowledge-item-summary--error" : ""}`,
@@ -230,12 +434,12 @@ function DownloadedCatalog({
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxs("div", { id: bodyId, className: "db-knowledge-item-body", children: [
-      /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: catalog.description }),
-      /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: catalogFacts(catalog, catalog.installedVersion ?? catalog.version) }),
-      catalog.message && /* @__PURE__ */ jsx("p", { className: "db-settings-hint", role: catalog.state === "error" ? "alert" : "status", children: catalog.message }),
-      catalog.state === "downloading" ? /* @__PURE__ */ jsxs("div", { className: "db-settings-ai-knowledge-actions", children: [
-        /* @__PURE__ */ jsx(
+    expanded && /* @__PURE__ */ jsxs2("div", { id: bodyId, className: "db-knowledge-item-body", children: [
+      /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: catalog.description }),
+      /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: catalogFacts(catalog, catalog.installedVersion ?? catalog.version) }),
+      catalog.message && /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", role: catalog.state === "error" ? "alert" : "status", children: catalog.message }),
+      catalog.state === "downloading" ? /* @__PURE__ */ jsxs2("div", { className: "db-settings-ai-knowledge-actions", children: [
+        /* @__PURE__ */ jsx2(
           "progress",
           {
             max: 100,
@@ -243,7 +447,7 @@ function DownloadedCatalog({
             "aria-label": `${catalog.name} download progress`
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
@@ -253,9 +457,9 @@ function DownloadedCatalog({
             children: "Cancel download"
           }
         )
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "db-settings-ai-knowledge-actions", children: [
-        /* @__PURE__ */ jsxs("label", { className: "db-settings-checkbox", children: [
-          /* @__PURE__ */ jsx(
+      ] }) : /* @__PURE__ */ jsxs2("div", { className: "db-settings-ai-knowledge-actions", children: [
+        /* @__PURE__ */ jsxs2("label", { className: "db-settings-checkbox", children: [
+          /* @__PURE__ */ jsx2(
             "input",
             {
               type: "checkbox",
@@ -270,7 +474,7 @@ function DownloadedCatalog({
           "Use ",
           catalog.name
         ] }),
-        catalog.updateAvailable && /* @__PURE__ */ jsxs(
+        catalog.updateAvailable && /* @__PURE__ */ jsxs2(
           "button",
           {
             type: "button",
@@ -283,7 +487,7 @@ function DownloadedCatalog({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           "button",
           {
             type: "button",
@@ -298,14 +502,14 @@ function DownloadedCatalog({
           }
         )
       ] }),
-      removing && /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": `Confirm removal of ${catalog.name}`, children: [
-        /* @__PURE__ */ jsxs("p", { className: "db-settings-hint", children: [
+      removing && /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": `Confirm removal of ${catalog.name}`, children: [
+        /* @__PURE__ */ jsxs2("p", { className: "db-settings-hint", children: [
           "Remove ",
           catalog.name,
           " from the connected AI service? Other apps using that service will also lose access to this catalog."
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "db-settings-ai-knowledge-actions", children: [
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs2("div", { className: "db-settings-ai-knowledge-actions", children: [
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -315,7 +519,7 @@ function DownloadedCatalog({
               children: "Confirm removal"
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -337,9 +541,9 @@ function AddCatalogDialog({
   onRefresh,
   onClose
 }) {
-  const [query, setQuery] = useState("");
-  const searchRef = useRef(null);
-  const [order] = useState(
+  const [query, setQuery] = useState2("");
+  const searchRef = useRef2(null);
+  const [order] = useState2(
     () => [...catalogs].sort((a, b) => Number(a.installedVersion !== null) - Number(b.installedVersion !== null)).map((catalog) => catalog.id)
   );
   const rank = (catalog) => {
@@ -348,7 +552,7 @@ function AddCatalogDialog({
   };
   const needle = query.trim().toLowerCase();
   const matches = catalogs.filter((catalog) => `${catalog.name} ${catalog.description}`.toLowerCase().includes(needle)).sort((a, b) => rank(a) - rank(b));
-  const dialog = /* @__PURE__ */ jsxs(
+  const dialog = /* @__PURE__ */ jsxs2(
     Dialog,
     {
       title: "Add knowledge catalog",
@@ -357,8 +561,8 @@ function AddCatalogDialog({
       initialFocusRef: searchRef,
       className: "db-knowledge-add-dialog",
       bodyClassName: "db-knowledge-add-body",
-      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
+      footer: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
@@ -368,14 +572,14 @@ function AddCatalogDialog({
             children: "Refresh catalogs"
           }
         ),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "db-settings-action", onClick: onClose, children: "Done" })
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "db-settings-action", onClick: onClose, children: "Done" })
       ] }),
       children: [
-        /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: "Catalogs come from the connected AI service. Once one is downloaded, relevant passages from it are included in AI writing, review, and chat." }),
-        problem && /* @__PURE__ */ jsx("p", { className: "db-settings-hint db-settings-ai-error", role: "alert", children: problem }),
-        /* @__PURE__ */ jsxs("label", { className: "db-settings-text db-knowledge-search", children: [
+        /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: "Catalogs come from the connected AI service. Once one is downloaded, relevant passages from it are included in AI writing, review, and chat." }),
+        problem && /* @__PURE__ */ jsx2("p", { className: "db-settings-hint db-settings-ai-error", role: "alert", children: problem }),
+        /* @__PURE__ */ jsxs2("label", { className: "db-settings-text db-knowledge-search", children: [
           "Search catalogs",
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "input",
             {
               ref: searchRef,
@@ -386,19 +590,19 @@ function AddCatalogDialog({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "db-settings-hint", role: "status", children: matches.length > 0 ? "" : catalogs.length === 0 ? "The connected AI service doesn\u2019t offer any catalogs right now." : `No catalogs match \u201C${query.trim()}\u201D.` }),
-        matches.length > 0 && /* @__PURE__ */ jsx("ul", { className: "db-knowledge-catalog-list", "aria-label": "Catalogs", children: matches.map((catalog) => /* @__PURE__ */ jsxs("li", { className: "db-knowledge-catalog", children: [
-          /* @__PURE__ */ jsxs("div", { className: "db-knowledge-catalog-text", children: [
-            /* @__PURE__ */ jsx("strong", { className: "db-knowledge-catalog-name", children: /* @__PURE__ */ jsx(HighlightedText, { text: catalog.name, ranges: matchRanges(catalog.name, needle) }) }),
-            /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", role: "status", children: matches.length > 0 ? "" : catalogs.length === 0 ? "The connected AI service doesn\u2019t offer any catalogs right now." : `No catalogs match \u201C${query.trim()}\u201D.` }),
+        matches.length > 0 && /* @__PURE__ */ jsx2("ul", { className: "db-knowledge-catalog-list", "aria-label": "Catalogs", children: matches.map((catalog) => /* @__PURE__ */ jsxs2("li", { className: "db-knowledge-catalog", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "db-knowledge-catalog-text", children: [
+            /* @__PURE__ */ jsx2("strong", { className: "db-knowledge-catalog-name", children: /* @__PURE__ */ jsx2(HighlightedText, { text: catalog.name, ranges: matchRanges(catalog.name, needle) }) }),
+            /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: /* @__PURE__ */ jsx2(
               HighlightedText,
               {
                 text: catalog.description,
                 ranges: matchRanges(catalog.description, needle)
               }
             ) }),
-            /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: catalogFacts(catalog, catalog.version) }),
-            catalog.message && /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: catalogFacts(catalog, catalog.version) }),
+            catalog.message && /* @__PURE__ */ jsx2(
               "p",
               {
                 className: "db-settings-hint",
@@ -407,8 +611,8 @@ function AddCatalogDialog({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "db-knowledge-catalog-action", children: catalog.state === "downloading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2("div", { className: "db-knowledge-catalog-action", children: catalog.state === "downloading" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
               "progress",
               {
                 max: 100,
@@ -416,7 +620,7 @@ function AddCatalogDialog({
                 "aria-label": `${catalog.name} download progress`
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -427,10 +631,10 @@ function AddCatalogDialog({
                 children: "Cancel"
               }
             )
-          ] }) : catalog.installedVersion !== null ? /* @__PURE__ */ jsxs("span", { className: "db-knowledge-catalog-added", children: [
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713 " }),
+          ] }) : catalog.installedVersion !== null ? /* @__PURE__ */ jsxs2("span", { className: "db-knowledge-catalog-added", children: [
+            /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\u2713 " }),
             "Downloaded"
-          ] }) : /* @__PURE__ */ jsx(
+          ] }) : /* @__PURE__ */ jsx2(
             "button",
             {
               type: "button",
@@ -449,7 +653,7 @@ function AddCatalogDialog({
 }
 
 // src/Settings/AiSettings.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function statusSentence(status) {
   switch (status.kind) {
     case "unavailable":
@@ -523,23 +727,23 @@ function downloadOptionLabel(model) {
   return `${model.label}${size ? ` \u2014 ${size}` : ""}${rating}${slow}`;
 }
 function AiSettingsControls({ ai }) {
-  const [status, setStatus] = useState2(null);
-  const [preferences, setPreferences] = useState2(null);
-  const [providerInstalled, setProviderInstalled] = useState2(false);
-  const [models, setModels] = useState2([]);
-  const [availableModels, setAvailableModels] = useState2([]);
-  const [showModelDownloads, setShowModelDownloads] = useState2(false);
-  const [downloadModelId, setDownloadModelId] = useState2("");
-  const [downloadProgress, setDownloadProgress] = useState2(null);
-  const [loadingAvailableModels, setLoadingAvailableModels] = useState2(false);
-  const [installingModel, setInstallingModel] = useState2(false);
-  const [busy, setBusy] = useState2(false);
-  const [saving, setSaving] = useState2(false);
-  const [failure, setFailure] = useState2(null);
-  const mounted = useRef2(true);
-  const installHandle = useRef2(null);
+  const [status, setStatus] = useState3(null);
+  const [preferences, setPreferences] = useState3(null);
+  const [providerInstalled, setProviderInstalled] = useState3(false);
+  const [models, setModels] = useState3([]);
+  const [availableModels, setAvailableModels] = useState3([]);
+  const [showModelDownloads, setShowModelDownloads] = useState3(false);
+  const [downloadModelId, setDownloadModelId] = useState3("");
+  const [downloadProgress, setDownloadProgress] = useState3(null);
+  const [loadingAvailableModels, setLoadingAvailableModels] = useState3(false);
+  const [installingModel, setInstallingModel] = useState3(false);
+  const [busy, setBusy] = useState3(false);
+  const [saving, setSaving] = useState3(false);
+  const [failure, setFailure] = useState3(null);
+  const mounted = useRef3(true);
+  const installHandle = useRef3(null);
   const modelSelectId = useId2();
-  useEffect2(() => {
+  useEffect3(() => {
     mounted.current = true;
     setProviderInstalled(false);
     const unsubscribe = ai.onStatus((next) => {
@@ -565,12 +769,12 @@ function AiSettingsControls({ ai }) {
     };
   }, [ai]);
   const ready = status?.kind === "ready";
-  const refreshModels = useCallback(async () => {
+  const refreshModels = useCallback2(async () => {
     const result = await ai.models();
     if (mounted.current && result.ok) setModels(result.value);
     return result;
   }, [ai]);
-  const refreshAvailableModels = useCallback(async () => {
+  const refreshAvailableModels = useCallback2(async () => {
     if (!ai.availableModels) return;
     setLoadingAvailableModels(true);
     try {
@@ -588,7 +792,7 @@ function AiSettingsControls({ ai }) {
       if (mounted.current) setLoadingAvailableModels(false);
     }
   }, [ai]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!ready) {
       setModels([]);
       setAvailableModels([]);
@@ -597,7 +801,7 @@ function AiSettingsControls({ ai }) {
     }
     void refreshModels();
   }, [ready, refreshModels]);
-  const connect = useCallback(async () => {
+  const connect = useCallback2(async () => {
     setBusy(true);
     setFailure(null);
     try {
@@ -609,7 +813,7 @@ function AiSettingsControls({ ai }) {
       if (mounted.current) setBusy(false);
     }
   }, [ai]);
-  const switchToBuiltIn = useCallback(async () => {
+  const switchToBuiltIn = useCallback2(async () => {
     setBusy(true);
     setFailure(null);
     try {
@@ -618,7 +822,7 @@ function AiSettingsControls({ ai }) {
       if (mounted.current) setBusy(false);
     }
   }, [ai]);
-  const setEnabled = useCallback(
+  const setEnabled = useCallback2(
     async (enabled2) => {
       const previous = preferences;
       setFailure(null);
@@ -638,7 +842,7 @@ function AiSettingsControls({ ai }) {
     },
     [ai, preferences]
   );
-  const retryBuiltIn = useCallback(async () => {
+  const retryBuiltIn = useCallback2(async () => {
     setBusy(true);
     setFailure(null);
     try {
@@ -647,14 +851,14 @@ function AiSettingsControls({ ai }) {
       if (mounted.current) setBusy(false);
     }
   }, [ai]);
-  const setModel = useCallback(
+  const setModel = useCallback2(
     async (model) => {
       const next = await ai.setPreferences({ model });
       if (mounted.current) setPreferences(next);
     },
     [ai]
   );
-  const addModel = useCallback(async () => {
+  const addModel = useCallback2(async () => {
     if (!downloadModelId || !ai.installModel) return;
     setFailure(null);
     setDownloadProgress({ phase: "starting", message: "Starting download\u2026", percent: null });
@@ -692,10 +896,10 @@ function AiSettingsControls({ ai }) {
   const modelManagement = Boolean(ai.availableModels && ai.installModel);
   const selectedDownload = availableModels.find((model) => model.id === downloadModelId) ?? null;
   const failureMessage = failure && !(status.kind === "error" && status.error.message === failure.message) && !(status.kind === "unavailable" && failure.code === "provider-unavailable") ? failure.message : null;
-  return /* @__PURE__ */ jsxs2("fieldset", { className: "db-settings-fieldset", children: [
-    /* @__PURE__ */ jsx2("legend", { className: "db-settings-legend", children: "AI assistance" }),
-    /* @__PURE__ */ jsxs2("label", { className: "db-settings-checkbox", children: [
-      /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx3("legend", { className: "db-settings-legend", children: "AI assistance" }),
+    /* @__PURE__ */ jsxs3("label", { className: "db-settings-checkbox", children: [
+      /* @__PURE__ */ jsx3(
         "input",
         {
           type: "checkbox",
@@ -706,19 +910,19 @@ function AiSettingsControls({ ai }) {
       ),
       "Use AI features"
     ] }),
-    /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: "DocBlocks can offer AI features that run entirely on this device \u2014 no account needed. Model downloads start only when you choose to add one." }),
-    enabled && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", role: "status", "aria-live": "polite", children: statusSentence(status) }),
-      code && /* @__PURE__ */ jsxs2("p", { className: "db-settings-hint", children: [
+    /* @__PURE__ */ jsx3("p", { className: "db-settings-hint", children: "DocBlocks can offer AI features that run entirely on this device \u2014 no account needed. Model downloads start only when you choose to add one." }),
+    enabled && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx3("p", { className: "db-settings-hint", role: "status", "aria-live": "polite", children: statusSentence(status) }),
+      code && /* @__PURE__ */ jsxs3("p", { className: "db-settings-hint", children: [
         "Type this code in Gezel to approve DocBlocks:",
         " ",
-        /* @__PURE__ */ jsx2("strong", { className: "db-settings-ai-code", children: code })
+        /* @__PURE__ */ jsx3("strong", { className: "db-settings-ai-code", children: code })
       ] }),
-      failureMessage && /* @__PURE__ */ jsx2("p", { className: "db-settings-hint db-settings-ai-error", role: "alert", children: failureMessage }),
-      ready && /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsxs2("label", { className: "db-settings-select", htmlFor: modelSelectId, children: [
-          /* @__PURE__ */ jsx2("span", { className: "db-settings-select-header", children: "Model" }),
-          /* @__PURE__ */ jsxs2(
+      failureMessage && /* @__PURE__ */ jsx3("p", { className: "db-settings-hint db-settings-ai-error", role: "alert", children: failureMessage }),
+      ready && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsxs3("label", { className: "db-settings-select", htmlFor: modelSelectId, children: [
+          /* @__PURE__ */ jsx3("span", { className: "db-settings-select-header", children: "Model" }),
+          /* @__PURE__ */ jsxs3(
             "select",
             {
               id: modelSelectId,
@@ -727,21 +931,21 @@ function AiSettingsControls({ ai }) {
               disabled: !hasReadyModels || installingModel,
               onChange: (event) => void setModel(event.currentTarget.value || null),
               children: [
-                !hasReadyModels ? /* @__PURE__ */ jsx2("option", { value: "", children: models.length ? "No models ready" : "No models installed" }) : /* @__PURE__ */ jsx2("option", { value: "", children: defaultModel ? `Default: ${modelLabel(defaultModel)}` : "Default" }),
-                preferences.model && !models.some((model) => model.id === preferences.model) && /* @__PURE__ */ jsx2("option", { value: preferences.model, disabled: true, children: "Previously selected model (not available)" }),
-                models.map((model) => /* @__PURE__ */ jsx2("option", { value: model.id, disabled: !modelReady(model), children: modelReady(model) ? modelLabel(model) : `${model.label} (${readinessLabel(model)})` }, model.id))
+                !hasReadyModels ? /* @__PURE__ */ jsx3("option", { value: "", children: models.length ? "No models ready" : "No models installed" }) : /* @__PURE__ */ jsx3("option", { value: "", children: defaultModel ? `Default: ${modelLabel(defaultModel)}` : "Default" }),
+                preferences.model && !models.some((model) => model.id === preferences.model) && /* @__PURE__ */ jsx3("option", { value: preferences.model, disabled: true, children: "Previously selected model (not available)" }),
+                models.map((model) => /* @__PURE__ */ jsx3("option", { value: model.id, disabled: !modelReady(model), children: modelReady(model) ? modelLabel(model) : `${model.label} (${readinessLabel(model)})` }, model.id))
               ]
             }
           )
         ] }),
-        unavailableModels.map((model) => /* @__PURE__ */ jsxs2("p", { className: "db-settings-hint", children: [
+        unavailableModels.map((model) => /* @__PURE__ */ jsxs3("p", { className: "db-settings-hint", children: [
           model.label,
           ":",
           " ",
           model.unavailableReason ?? "This model is not available right now."
         ] }, model.id)),
-        modelManagement && /* @__PURE__ */ jsxs2("div", { className: "db-settings-ai-models", children: [
-          /* @__PURE__ */ jsx2(
+        modelManagement && /* @__PURE__ */ jsxs3("div", { className: "db-settings-ai-models", children: [
+          /* @__PURE__ */ jsx3(
             "button",
             {
               type: "button",
@@ -755,27 +959,27 @@ function AiSettingsControls({ ai }) {
               children: showModelDownloads ? "Hide model downloads" : "Add model\u2026"
             }
           ),
-          showModelDownloads && /* @__PURE__ */ jsxs2("div", { className: "db-settings-ai-model-downloads", children: [
-            loadingAvailableModels ? /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", role: "status", children: "Looking for models\u2026" }) : availableModels.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "db-settings-hint", children: "No downloadable models are available for this device." }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-              /* @__PURE__ */ jsxs2("label", { className: "db-settings-select", children: [
-                /* @__PURE__ */ jsx2("span", { className: "db-settings-select-header", children: "Model to download" }),
-                /* @__PURE__ */ jsx2(
+          showModelDownloads && /* @__PURE__ */ jsxs3("div", { className: "db-settings-ai-model-downloads", children: [
+            loadingAvailableModels ? /* @__PURE__ */ jsx3("p", { className: "db-settings-hint", role: "status", children: "Looking for models\u2026" }) : availableModels.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "db-settings-hint", children: "No downloadable models are available for this device." }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+              /* @__PURE__ */ jsxs3("label", { className: "db-settings-select", children: [
+                /* @__PURE__ */ jsx3("span", { className: "db-settings-select-header", children: "Model to download" }),
+                /* @__PURE__ */ jsx3(
                   "select",
                   {
                     className: "db-settings-select-input",
                     value: downloadModelId,
                     disabled: installingModel,
                     onChange: (event) => setDownloadModelId(event.currentTarget.value),
-                    children: availableModels.map((model) => /* @__PURE__ */ jsx2("option", { value: model.id, children: downloadOptionLabel(model) }, model.id))
+                    children: availableModels.map((model) => /* @__PURE__ */ jsx3("option", { value: model.id, children: downloadOptionLabel(model) }, model.id))
                   }
                 )
               ] }),
-              selectedDownload && /* @__PURE__ */ jsxs2("p", { className: "db-settings-hint", title: selectedDownload.fit?.detail, children: [
+              selectedDownload && /* @__PURE__ */ jsxs3("p", { className: "db-settings-hint", title: selectedDownload.fit?.detail, children: [
                 selectedDownload.recommended ? "Recommended for this device" : "Downloads and runs on this device",
                 formatDownloadSize(selectedDownload.downloadBytes) ? ` \xB7 ${formatDownloadSize(selectedDownload.downloadBytes)}` : "",
                 selectedDownload.fit ? ` \xB7 ${selectedDownload.fit.label}` : ""
               ] }),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -786,8 +990,8 @@ function AiSettingsControls({ ai }) {
                 }
               )
             ] }),
-            installingModel && downloadProgress && /* @__PURE__ */ jsxs2("div", { className: "db-settings-ai-download-progress", role: "status", children: [
-              /* @__PURE__ */ jsx2(
+            installingModel && downloadProgress && /* @__PURE__ */ jsxs3("div", { className: "db-settings-ai-download-progress", role: "status", children: [
+              /* @__PURE__ */ jsx3(
                 "progress",
                 {
                   max: 100,
@@ -795,7 +999,7 @@ function AiSettingsControls({ ai }) {
                   "aria-label": "Model download progress"
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -804,7 +1008,7 @@ function AiSettingsControls({ ai }) {
                   children: "Cancel download"
                 }
               ),
-              /* @__PURE__ */ jsxs2("span", { children: [
+              /* @__PURE__ */ jsxs3("span", { children: [
                 downloadProgress.message,
                 downloadProgress.percent === null ? "" : ` (${Math.round(downloadProgress.percent)}%)`
               ] })
@@ -812,8 +1016,9 @@ function AiSettingsControls({ ai }) {
           ] })
         ] })
       ] }),
-      ready && ai.knowledge && /* @__PURE__ */ jsx2(AiKnowledgeSettings, { knowledge: ai.knowledge }, status.provider.mode),
-      ready && status.provider.mode === "installed" ? /* @__PURE__ */ jsx2(
+      ready && ai.knowledge && /* @__PURE__ */ jsx3(AiKnowledgeSettings, { knowledge: ai.knowledge }, status.provider.mode),
+      ready && ai.images && /* @__PURE__ */ jsx3(AiImageSettings, { images: ai.images }, status.provider.mode),
+      ready && status.provider.mode === "installed" ? /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -822,7 +1027,7 @@ function AiSettingsControls({ ai }) {
           onClick: () => void switchToBuiltIn(),
           children: "Use built-in AI"
         }
-      ) : ready && status.provider.mode === "hosted" && providerInstalled ? /* @__PURE__ */ jsx2(
+      ) : ready && status.provider.mode === "hosted" && providerInstalled ? /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -831,7 +1036,7 @@ function AiSettingsControls({ ai }) {
           onClick: () => void connect(),
           children: "Connect Gezel app\u2026"
         }
-      ) : status.kind === "error" && status.retryable ? /* @__PURE__ */ jsx2(
+      ) : status.kind === "error" && status.retryable ? /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
@@ -846,13 +1051,13 @@ function AiSettingsControls({ ai }) {
 }
 
 // src/Settings/WorkspaceSettingsControls.tsx
-import { useEffect as useEffect3, useId as useId3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useId as useId3, useState as useState4 } from "react";
 import {
   DEFAULT_CATALOG_HTML_PATH,
   DEFAULT_CATALOG_JSON_PATH,
   DEFAULT_CATALOG_TITLE
 } from "@bendyline/docblocks/workspace-settings";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function compactObject(value) {
   const entries = Object.entries(value).filter(([, field]) => field !== void 0);
   return entries.length > 0 ? Object.fromEntries(entries) : void 0;
@@ -904,14 +1109,14 @@ function WorkspaceSettingsControls({
   const jsonEnabled = value.catalog?.json?.enabled === true;
   const catalogEnabled = htmlEnabled || jsonEnabled;
   const excludeText = (value.catalog?.exclude ?? []).join("\n");
-  const [excludeDraft, setExcludeDraft] = useState3(excludeText);
-  useEffect3(() => {
+  const [excludeDraft, setExcludeDraft] = useState4(excludeText);
+  useEffect4(() => {
     setExcludeDraft(
       (current) => current.split("\n").map((line) => line.trim()).filter(Boolean).join("\n") === excludeText ? current : excludeText
     );
   }, [excludeText]);
   const versioning = value.versionHistory?.enabled === void 0 ? "inherit" : value.versionHistory.enabled ? "on" : "off";
-  const themeSelect = (selectId, selected, emptyLabel, onSelect) => /* @__PURE__ */ jsxs3(
+  const themeSelect = (selectId, selected, emptyLabel, onSelect) => /* @__PURE__ */ jsxs4(
     "select",
     {
       id: selectId,
@@ -920,20 +1125,20 @@ function WorkspaceSettingsControls({
       disabled,
       onChange: (event) => onSelect(event.currentTarget.value || void 0),
       children: [
-        /* @__PURE__ */ jsx3("option", { value: "", children: emptyLabel }),
-        themes.map((theme) => /* @__PURE__ */ jsx3("option", { value: theme.id, children: theme.name }, theme.id)),
-        selected && !themes.some((theme) => theme.id === selected) && /* @__PURE__ */ jsxs3("option", { value: selected, children: [
+        /* @__PURE__ */ jsx4("option", { value: "", children: emptyLabel }),
+        themes.map((theme) => /* @__PURE__ */ jsx4("option", { value: theme.id, children: theme.name }, theme.id)),
+        selected && !themes.some((theme) => theme.id === selected) && /* @__PURE__ */ jsxs4("option", { value: selected, children: [
           selected,
           " (not installed)"
         ] })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs3("div", { className: "db-workspace-settings", children: [
-    /* @__PURE__ */ jsxs3("fieldset", { className: "db-settings-fieldset", disabled, children: [
-      /* @__PURE__ */ jsx3("legend", { className: "db-settings-legend", children: "Documents" }),
-      /* @__PURE__ */ jsxs3("div", { className: "db-settings-select", children: [
-        /* @__PURE__ */ jsx3("label", { className: "db-settings-select-header", htmlFor: `${id}-theme`, children: "Default theme" }),
+  return /* @__PURE__ */ jsxs4("div", { className: "db-workspace-settings", children: [
+    /* @__PURE__ */ jsxs4("fieldset", { className: "db-settings-fieldset", disabled, children: [
+      /* @__PURE__ */ jsx4("legend", { className: "db-settings-legend", children: "Documents" }),
+      /* @__PURE__ */ jsxs4("div", { className: "db-settings-select", children: [
+        /* @__PURE__ */ jsx4("label", { className: "db-settings-select-header", htmlFor: `${id}-theme`, children: "Default theme" }),
         themeSelect(
           `${id}-theme`,
           value.documents?.defaultTheme,
@@ -947,13 +1152,13 @@ function WorkspaceSettingsControls({
           )
         )
       ] }),
-      /* @__PURE__ */ jsx3("p", { className: "db-settings-hint", children: "Used by documents in this folder that don\u2019t choose a theme of their own. Web pages pick up a change the next time they\u2019re saved." })
+      /* @__PURE__ */ jsx4("p", { className: "db-settings-hint", children: "Used by documents in this folder that don\u2019t choose a theme of their own. Web pages pick up a change the next time they\u2019re saved." })
     ] }),
-    /* @__PURE__ */ jsxs3("fieldset", { className: "db-settings-fieldset", disabled, children: [
-      /* @__PURE__ */ jsx3("legend", { className: "db-settings-legend", children: "Catalog" }),
-      /* @__PURE__ */ jsx3("p", { className: "db-settings-hint", children: "Keep a list of every document in this folder up to date as you save. DocBlocks only ever replaces files it created." }),
-      /* @__PURE__ */ jsxs3("label", { className: "db-settings-checkbox", children: [
-        /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsxs4("fieldset", { className: "db-settings-fieldset", disabled, children: [
+      /* @__PURE__ */ jsx4("legend", { className: "db-settings-legend", children: "Catalog" }),
+      /* @__PURE__ */ jsx4("p", { className: "db-settings-hint", children: "Keep a list of every document in this folder up to date as you save. DocBlocks only ever replaces files it created." }),
+      /* @__PURE__ */ jsxs4("label", { className: "db-settings-checkbox", children: [
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "checkbox",
@@ -965,10 +1170,10 @@ function WorkspaceSettingsControls({
         ),
         "Catalog page"
       ] }),
-      htmlEnabled && /* @__PURE__ */ jsxs3("div", { className: "db-settings-subfields", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-html-path`, children: "Page file" }),
-          /* @__PURE__ */ jsx3(
+      htmlEnabled && /* @__PURE__ */ jsxs4("div", { className: "db-settings-subfields", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: `${id}-html-path`, children: "Page file" }),
+          /* @__PURE__ */ jsx4(
             "input",
             {
               id: `${id}-html-path`,
@@ -983,8 +1188,8 @@ function WorkspaceSettingsControls({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-html-theme`, children: "Page theme" }),
+        /* @__PURE__ */ jsxs4("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: `${id}-html-theme`, children: "Page theme" }),
           themeSelect(
             `${id}-html-theme`,
             value.catalog?.html?.theme,
@@ -993,8 +1198,8 @@ function WorkspaceSettingsControls({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs3("label", { className: "db-settings-checkbox", children: [
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs4("label", { className: "db-settings-checkbox", children: [
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "checkbox",
@@ -1006,10 +1211,10 @@ function WorkspaceSettingsControls({
         ),
         "Catalog data (JSON)"
       ] }),
-      jsonEnabled && /* @__PURE__ */ jsxs3("div", { className: "db-settings-subfields", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-json-path`, children: "Data file" }),
-          /* @__PURE__ */ jsx3(
+      jsonEnabled && /* @__PURE__ */ jsxs4("div", { className: "db-settings-subfields", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: `${id}-json-path`, children: "Data file" }),
+          /* @__PURE__ */ jsx4(
             "input",
             {
               id: `${id}-json-path`,
@@ -1024,7 +1229,7 @@ function WorkspaceSettingsControls({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "div",
           {
             className: "db-settings-radio-row",
@@ -1033,8 +1238,8 @@ function WorkspaceSettingsControls({
             children: [
               ["metadata", "Titles, descriptions and outlines"],
               ["markdown", "Also include each document\u2019s Markdown"]
-            ].map(([content, label]) => /* @__PURE__ */ jsxs3("label", { className: "db-settings-radio db-settings-radio--inline", children: [
-              /* @__PURE__ */ jsx3(
+            ].map(([content, label]) => /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   type: "radio",
@@ -1052,10 +1257,10 @@ function WorkspaceSettingsControls({
           }
         )
       ] }),
-      catalogEnabled && /* @__PURE__ */ jsxs3("div", { className: "db-settings-subfields", children: [
-        /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-title`, children: "Title" }),
-          /* @__PURE__ */ jsx3(
+      catalogEnabled && /* @__PURE__ */ jsxs4("div", { className: "db-settings-subfields", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: `${id}-title`, children: "Title" }),
+          /* @__PURE__ */ jsx4(
             "input",
             {
               id: `${id}-title`,
@@ -1067,9 +1272,9 @@ function WorkspaceSettingsControls({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-sort`, children: "Order" }),
-          /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: `${id}-sort`, children: "Order" }),
+          /* @__PURE__ */ jsxs4(
             "select",
             {
               id: `${id}-sort`,
@@ -1080,16 +1285,16 @@ function WorkspaceSettingsControls({
                 onChange(withCatalog(value, { sort: sort === "title" ? void 0 : sort }));
               },
               children: [
-                /* @__PURE__ */ jsx3("option", { value: "title", children: "By title" }),
-                /* @__PURE__ */ jsx3("option", { value: "date", children: "Newest first (frontmatter date)" }),
-                /* @__PURE__ */ jsx3("option", { value: "path", children: "By file path" })
+                /* @__PURE__ */ jsx4("option", { value: "title", children: "By title" }),
+                /* @__PURE__ */ jsx4("option", { value: "date", children: "Newest first (frontmatter date)" }),
+                /* @__PURE__ */ jsx4("option", { value: "path", children: "By file path" })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-exclude`, children: "Leave out" }),
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx4("label", { htmlFor: `${id}-exclude`, children: "Leave out" }),
+          /* @__PURE__ */ jsx4(
             "textarea",
             {
               id: `${id}-exclude`,
@@ -1109,9 +1314,9 @@ function WorkspaceSettingsControls({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx3("p", { className: "db-settings-hint", children: "One folder or file per line." }),
-        (catalogStatus || onRegenerate) && /* @__PURE__ */ jsxs3("div", { className: "db-settings-status-row", children: [
-          catalogStatus && /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4("p", { className: "db-settings-hint", children: "One folder or file per line." }),
+        (catalogStatus || onRegenerate) && /* @__PURE__ */ jsxs4("div", { className: "db-settings-status-row", children: [
+          catalogStatus && /* @__PURE__ */ jsx4(
             "p",
             {
               className: `db-settings-status db-settings-status--${catalogStatus.tone}`,
@@ -1119,7 +1324,7 @@ function WorkspaceSettingsControls({
               children: catalogStatus.message
             }
           ),
-          onRegenerate && /* @__PURE__ */ jsx3(
+          onRegenerate && /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -1132,19 +1337,19 @@ function WorkspaceSettingsControls({
         ] })
       ] })
     ] }),
-    versionHistory && /* @__PURE__ */ jsxs3("fieldset", { className: "db-settings-fieldset", disabled, children: [
-      /* @__PURE__ */ jsx3("legend", { className: "db-settings-legend", children: "Version history" }),
-      /* @__PURE__ */ jsxs3("p", { className: "db-settings-hint", children: [
+    versionHistory && /* @__PURE__ */ jsxs4("fieldset", { className: "db-settings-fieldset", disabled, children: [
+      /* @__PURE__ */ jsx4("legend", { className: "db-settings-legend", children: "Version history" }),
+      /* @__PURE__ */ jsxs4("p", { className: "db-settings-hint", children: [
         "Keeps prior revisions in ",
-        /* @__PURE__ */ jsx3("code", { children: "<name>_files/.versions/" }),
+        /* @__PURE__ */ jsx4("code", { children: "<name>_files/.versions/" }),
         " for documents in this folder."
       ] }),
       [
         ["inherit", versionHistory.inheritLabel],
         ["on", "On for this folder"],
         ["off", "Off for this folder"]
-      ].map(([option, label]) => /* @__PURE__ */ jsxs3("label", { className: "db-settings-radio", children: [
-        /* @__PURE__ */ jsx3(
+      ].map(([option, label]) => /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio", children: [
+        /* @__PURE__ */ jsx4(
           "input",
           {
             type: "radio",
@@ -1165,9 +1370,9 @@ function WorkspaceSettingsControls({
         ),
         label
       ] }, option)),
-      /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
-        /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-keep`, children: "Revisions to keep per document" }),
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs4("div", { className: "db-settings-text", children: [
+        /* @__PURE__ */ jsx4("label", { htmlFor: `${id}-keep`, children: "Revisions to keep per document" }),
+        /* @__PURE__ */ jsx4(
           "input",
           {
             id: `${id}-keep`,
@@ -1199,14 +1404,115 @@ function WorkspaceSettingsControls({
 
 // src/Settings/Settings.tsx
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect4,
+  useCallback as useCallback3,
+  useEffect as useEffect6,
   useId as useId4,
   useLayoutEffect,
-  useRef as useRef3,
-  useState as useState4
+  useRef as useRef4,
+  useState as useState6
 } from "react";
 
+// src/layout/form-factor.ts
+var DB_BREAKPOINTS = Object.freeze({
+  /** Inclusive upper bound for phones and narrow slivers. */
+  compactMax: 720,
+  /** Inclusive upper bound for tablet-portrait and half-screen laptops. */
+  mediumMax: 1023,
+  /** Inclusive upper bound for tablet-landscape and laptops. */
+  expandedMax: 1439,
+  /**
+   * Largest short edge still considered a phone. Orientation-independent on
+   * purpose: a phone turned sideways is 844x390, which is `medium` by width but
+   * is obviously not a tablet. The widest phone short edge in circulation is
+   * around 430px; the narrowest tablet short edge is the iPad mini's 744px, so
+   * 520 sits in open space between them.
+   */
+  phoneMaxShortEdge: 520
+});
+var SIDEBAR_WIDTH_DEFAULT = 320;
+var SIDEBAR_WIDTH_MIN = 320;
+var SIDEBAR_WIDTH_MAX = 600;
+var SIDEBAR_COLLAPSE_THRESHOLD = SIDEBAR_WIDTH_MIN;
+var DB_LAYOUT_MINIMA = Object.freeze({
+  /**
+   * Narrower than this, an editor pane beside the sidebar is not worth the
+   * split. Paired with `SIDEBAR_WIDTH_MIN` to derive `splitPaneAllowed`.
+   */
+  editorMinWidth: 480
+});
+var SPLIT_PANE_MIN_WIDTH = SIDEBAR_WIDTH_MIN + DB_LAYOUT_MINIMA.editorMinWidth;
+function classifyWidth(width) {
+  if (width <= DB_BREAKPOINTS.compactMax) return "compact";
+  if (width <= DB_BREAKPOINTS.mediumMax) return "medium";
+  if (width <= DB_BREAKPOINTS.expandedMax) return "expanded";
+  return "wide";
+}
+function classifyFormFactor(input) {
+  const widthClass = classifyWidth(input.width);
+  const orientation = input.height >= input.width ? "portrait" : "landscape";
+  let formFactor;
+  if (input.pointer === "fine") {
+    formFactor = "desktop";
+  } else if (Math.min(input.width, input.height) <= DB_BREAKPOINTS.phoneMaxShortEdge) {
+    formFactor = "phone";
+  } else {
+    formFactor = orientation === "portrait" ? "tablet-portrait" : "tablet-landscape";
+  }
+  return {
+    ...input,
+    widthClass,
+    orientation,
+    formFactor,
+    splitPaneAllowed: input.width >= SPLIT_PANE_MIN_WIDTH
+  };
+}
+function resolveLayoutMode(formFactor, preference) {
+  if (!formFactor.splitPaneAllowed) return "single-pane";
+  if (preference === "collapsed") return "single-pane";
+  if (preference === "pinned") return "split-pane";
+  if (formFactor.widthClass === "expanded" || formFactor.widthClass === "wide") {
+    return "split-pane";
+  }
+  if (formFactor.pointer === "fine") return "split-pane";
+  return "single-pane";
+}
+function formFactorDataAttributes(formFactor, layoutMode) {
+  return Object.freeze({
+    "data-db-width": formFactor.widthClass,
+    "data-db-form-factor": formFactor.formFactor,
+    "data-db-pointer": formFactor.pointer,
+    "data-db-hover": formFactor.hover,
+    "data-db-orientation": formFactor.orientation,
+    "data-db-layout": layoutMode
+  });
+}
+
+// src/layout/useMediaQuery.ts
+import { useEffect as useEffect5, useState as useState5 } from "react";
+var INSTALLED_DISPLAY_QUERIES = [
+  "(display-mode: window-controls-overlay)",
+  "(display-mode: standalone)"
+];
+function matchesMediaQuery(query) {
+  if (typeof globalThis.matchMedia !== "function") return false;
+  return globalThis.matchMedia(query).matches;
+}
+function isInstalledDisplayMode() {
+  return INSTALLED_DISPLAY_QUERIES.some(matchesMediaQuery);
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState5(() => matchesMediaQuery(query));
+  useEffect5(() => {
+    if (typeof globalThis.matchMedia !== "function") return;
+    const list = globalThis.matchMedia(query);
+    const update = () => setMatches(list.matches);
+    update();
+    list.addEventListener("change", update);
+    return () => list.removeEventListener("change", update);
+  }, [query]);
+  return matches;
+}
+
 // src/preferences/theme.ts
 var ACCENT_COLORS = [
   "rust",
@@ -1408,7 +1714,7 @@ function isRecord(value) {
 }
 
 // src/Settings/Settings.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ACCENT_LABELS = {
   rust: "Rust",
   green: "Green",
@@ -1418,15 +1724,140 @@ var ACCENT_LABELS = {
   orange: "Orange",
   gray: "Gray"
 };
-function SettingsDialog({ title = "Settings", onClose, children }) {
-  return /* @__PURE__ */ jsx4(Dialog, { title, onClose, size: "wide", children });
+function SettingsDialog({
+  title = "Settings",
+  onClose,
+  children,
+  sections,
+  section,
+  onSectionChange
+}) {
+  const sectioned = sections !== void 0 && sections.length > 1;
+  return /* @__PURE__ */ jsx5(
+    Dialog,
+    {
+      title,
+      onClose,
+      size: "wide",
+      className: sectioned ? "db-settings-dialog--sectioned" : void 0,
+      bodyClassName: sectioned ? "db-settings-dialog-body--sectioned" : void 0,
+      children: sectioned ? /* @__PURE__ */ jsx5(SettingsSections, { sections, section, onSectionChange }) : sections?.[0]?.content ?? children
+    }
+  );
+}
+var SECTION_DROPDOWN_QUERY = [
+  `(max-width: ${DB_BREAKPOINTS.compactMax}px)`,
+  "(pointer: coarse) and (orientation: portrait)",
+  `(pointer: coarse) and (max-height: ${DB_BREAKPOINTS.phoneMaxShortEdge}px)`
+].join(", ");
+function SettingsSections({
+  sections,
+  section,
+  onSectionChange
+}) {
+  const [ownSection, setOwnSection] = useState6(sections[0].id);
+  const active = sections.find((entry) => entry.id === (section ?? ownSection)) ?? sections[0];
+  const dropdown = useMediaQuery(SECTION_DROPDOWN_QUERY);
+  const baseId = useId4();
+  const tabRefs = useRef4(/* @__PURE__ */ new Map());
+  const tabId = (id) => `${baseId}-${id}-tab`;
+  const panelId = (id) => `${baseId}-${id}-panel`;
+  const select = (id) => {
+    setOwnSection(id);
+    onSectionChange?.(id);
+  };
+  const handleTabKeyDown = (event) => {
+    const index = sections.indexOf(active);
+    let next;
+    switch (event.key) {
+      case "ArrowDown":
+        next = (index + 1) % sections.length;
+        break;
+      case "ArrowUp":
+        next = (index - 1 + sections.length) % sections.length;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = sections.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const target = sections[next];
+    select(target.id);
+    tabRefs.current.get(target.id)?.focus();
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: `db-settings-sections db-settings-sections--${dropdown ? "dropdown" : "tabs"}`, children: [
+    dropdown ? /* @__PURE__ */ jsx5("div", { className: "db-settings-section-picker", children: /* @__PURE__ */ jsx5(
+      "select",
+      {
+        className: "db-settings-select-input db-settings-section-select",
+        "aria-label": "Settings section",
+        value: active.id,
+        onChange: (event) => {
+          const value = event.currentTarget.value;
+          const next = sections.find((entry) => entry.id === value);
+          if (next) select(next.id);
+        },
+        children: sections.map((entry) => /* @__PURE__ */ jsx5("option", { value: entry.id, children: entry.label }, entry.id))
+      }
+    ) }) : /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "db-settings-tabs",
+        role: "tablist",
+        "aria-orientation": "vertical",
+        "aria-label": "Settings sections",
+        children: sections.map((entry) => {
+          const selected = entry === active;
+          return /* @__PURE__ */ jsx5(
+            "button",
+            {
+              ref: (element) => {
+                if (element) tabRefs.current.set(entry.id, element);
+                else tabRefs.current.delete(entry.id);
+              },
+              type: "button",
+              role: "tab",
+              id: tabId(entry.id),
+              className: `db-settings-tab${selected ? " db-settings-tab--selected" : ""}`,
+              "aria-selected": selected,
+              "aria-controls": panelId(entry.id),
+              tabIndex: selected ? 0 : -1,
+              onClick: () => select(entry.id),
+              onKeyDown: handleTabKeyDown,
+              children: entry.label
+            },
+            entry.id
+          );
+        })
+      }
+    ),
+    sections.map((entry) => /* @__PURE__ */ jsx5(
+      "div",
+      {
+        id: panelId(entry.id),
+        className: "db-settings-panel",
+        role: dropdown ? "region" : "tabpanel",
+        "aria-labelledby": dropdown ? void 0 : tabId(entry.id),
+        "aria-label": dropdown ? entry.label : void 0,
+        tabIndex: dropdown ? void 0 : 0,
+        hidden: entry !== active,
+        children: entry.content
+      },
+      entry.id
+    ))
+  ] });
 }
 function ThemeSettings({ value, onChange, name = "theme" }) {
-  return /* @__PURE__ */ jsxs4("fieldset", { className: "db-settings-fieldset", children: [
-    /* @__PURE__ */ jsx4("legend", { className: "db-settings-legend", children: "Theme" }),
-    /* @__PURE__ */ jsxs4("div", { className: "db-settings-radio-row", children: [
-      /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
-        /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx5("legend", { className: "db-settings-legend", children: "Theme" }),
+    /* @__PURE__ */ jsxs5("div", { className: "db-settings-radio-row", children: [
+      /* @__PURE__ */ jsxs5("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "radio",
@@ -1438,8 +1869,8 @@ function ThemeSettings({ value, onChange, name = "theme" }) {
         ),
         "System default"
       ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs5("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "radio",
@@ -1451,8 +1882,8 @@ function ThemeSettings({ value, onChange, name = "theme" }) {
         ),
         "Light"
       ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs5("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "radio",
@@ -1472,12 +1903,12 @@ function InterfaceFontSettings({
   onChange,
   name = "interface-font"
 }) {
-  return /* @__PURE__ */ jsxs4("fieldset", { className: "db-settings-fieldset", children: [
-    /* @__PURE__ */ jsx4("legend", { className: "db-settings-legend", children: "Interface font" }),
-    /* @__PURE__ */ jsx4("p", { className: "db-settings-hint", children: "Applies to menus and panels, never to your documents." }),
-    /* @__PURE__ */ jsxs4("div", { className: "db-settings-radio-row", children: [
-      /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
-        /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx5("legend", { className: "db-settings-legend", children: "Interface font" }),
+    /* @__PURE__ */ jsx5("p", { className: "db-settings-hint", children: "Applies to menus and panels, never to your documents." }),
+    /* @__PURE__ */ jsxs5("div", { className: "db-settings-radio-row", children: [
+      /* @__PURE__ */ jsxs5("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "radio",
@@ -1489,8 +1920,8 @@ function InterfaceFontSettings({
         ),
         "DocBlocks"
       ] }),
-      /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
-        /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsxs5("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+        /* @__PURE__ */ jsx5(
           "input",
           {
             type: "radio",
@@ -1510,15 +1941,15 @@ function AccentColorSettings({
   onChange,
   name = "accent-color"
 }) {
-  return /* @__PURE__ */ jsxs4("fieldset", { className: "db-settings-fieldset", children: [
-    /* @__PURE__ */ jsx4("legend", { className: "db-settings-legend", children: "Accent color" }),
-    /* @__PURE__ */ jsx4("p", { className: "db-settings-hint", children: "Used in both light and dark appearances." }),
-    /* @__PURE__ */ jsx4("div", { className: "db-settings-accent-grid", children: ACCENT_COLORS.map((color) => /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx5("legend", { className: "db-settings-legend", children: "Accent color" }),
+    /* @__PURE__ */ jsx5("p", { className: "db-settings-hint", children: "Used in both light and dark appearances." }),
+    /* @__PURE__ */ jsx5("div", { className: "db-settings-accent-grid", children: ACCENT_COLORS.map((color) => /* @__PURE__ */ jsxs5(
       "label",
       {
         className: `db-settings-accent${value === color ? " db-settings-accent--selected" : ""}`,
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "input",
             {
               className: "db-settings-accent-input",
@@ -1529,14 +1960,14 @@ function AccentColorSettings({
               onChange: () => onChange(color)
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "span",
             {
               className: `db-settings-accent-swatch db-settings-accent-swatch--${color}`,
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsx4("span", { children: ACCENT_LABELS[color] })
+          /* @__PURE__ */ jsx5("span", { children: ACCENT_LABELS[color] })
         ]
       },
       color
@@ -1544,11 +1975,11 @@ function AccentColorSettings({
   ] });
 }
 function ProofingSettingsControls({ value, onChange }) {
-  return /* @__PURE__ */ jsxs4("fieldset", { className: "db-settings-fieldset", children: [
-    /* @__PURE__ */ jsx4("legend", { className: "db-settings-legend", children: "Spelling and grammar" }),
-    /* @__PURE__ */ jsx4("p", { className: "db-settings-hint", children: "Checking runs on this device \u2014 nothing you write is sent anywhere." }),
-    /* @__PURE__ */ jsxs4("label", { className: "db-settings-checkbox", children: [
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx5("legend", { className: "db-settings-legend", children: "Spelling and grammar" }),
+    /* @__PURE__ */ jsx5("p", { className: "db-settings-hint", children: "Checking runs on this device \u2014 nothing you write is sent anywhere." }),
+    /* @__PURE__ */ jsxs5("label", { className: "db-settings-checkbox", children: [
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "checkbox",
@@ -1558,8 +1989,8 @@ function ProofingSettingsControls({ value, onChange }) {
       ),
       "Show inline spell checking"
     ] }),
-    /* @__PURE__ */ jsxs4("label", { className: "db-settings-checkbox", children: [
-      /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs5("label", { className: "db-settings-checkbox", children: [
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "checkbox",
@@ -1569,22 +2000,22 @@ function ProofingSettingsControls({ value, onChange }) {
       ),
       "Show inline grammar checking"
     ] }),
-    /* @__PURE__ */ jsx4("p", { className: "db-settings-hint", children: "(Grammar checking is currently only available for English)" })
+    /* @__PURE__ */ jsx5("p", { className: "db-settings-hint", children: "(Grammar checking is currently only available for English)" })
   ] });
 }
 function WriteCanvasSettingsControls({ value, onChange }) {
-  return /* @__PURE__ */ jsxs4("fieldset", { className: "db-settings-fieldset", children: [
-    /* @__PURE__ */ jsx4("legend", { className: "db-settings-legend", children: "Write canvas" }),
-    /* @__PURE__ */ jsx4("p", { className: "db-settings-hint", children: "Adjust the writing view without changing the document or its exported text." }),
-    /* @__PURE__ */ jsxs4("label", { className: "db-settings-slider", children: [
-      /* @__PURE__ */ jsxs4("span", { className: "db-settings-slider-header", children: [
-        /* @__PURE__ */ jsx4("span", { children: "Text size" }),
-        /* @__PURE__ */ jsxs4("output", { className: "db-settings-slider-value", "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxs5("fieldset", { className: "db-settings-fieldset", children: [
+    /* @__PURE__ */ jsx5("legend", { className: "db-settings-legend", children: "Write canvas" }),
+    /* @__PURE__ */ jsx5("p", { className: "db-settings-hint", children: "Adjust the writing view without changing the document or its exported text." }),
+    /* @__PURE__ */ jsxs5("label", { className: "db-settings-slider", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "db-settings-slider-header", children: [
+        /* @__PURE__ */ jsx5("span", { children: "Text size" }),
+        /* @__PURE__ */ jsxs5("output", { className: "db-settings-slider-value", "aria-hidden": "true", children: [
           value.textSize,
           "px"
         ] })
       ] }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "range",
@@ -1598,12 +2029,12 @@ function WriteCanvasSettingsControls({ value, onChange }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs4("label", { className: "db-settings-slider", children: [
-      /* @__PURE__ */ jsxs4("span", { className: "db-settings-slider-header", children: [
-        /* @__PURE__ */ jsx4("span", { children: "Line spacing" }),
-        /* @__PURE__ */ jsx4("output", { className: "db-settings-slider-value", "aria-hidden": "true", children: formatLineSpacing(value.lineSpacing) })
+    /* @__PURE__ */ jsxs5("label", { className: "db-settings-slider", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "db-settings-slider-header", children: [
+        /* @__PURE__ */ jsx5("span", { children: "Line spacing" }),
+        /* @__PURE__ */ jsx5("output", { className: "db-settings-slider-value", "aria-hidden": "true", children: formatLineSpacing(value.lineSpacing) })
       ] }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "range",
@@ -1617,7 +2048,7 @@ function WriteCanvasSettingsControls({ value, onChange }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       FontSchemePicker,
       {
         value: value.fontScheme,
@@ -1632,21 +2063,21 @@ function FontSchemePicker({ value, onChange }) {
     WRITE_CANVAS_FONT_SCHEMES.findIndex((scheme) => scheme.id === value)
   );
   const selectedScheme = WRITE_CANVAS_FONT_SCHEMES[selectedIndex];
-  const [isOpen, setIsOpen] = useState4(false);
-  const [activeIndex, setActiveIndex] = useState4(selectedIndex);
-  const [menuPosition, setMenuPosition] = useState4(null);
-  const rootRef = useRef3(null);
-  const triggerRef = useRef3(null);
-  const listboxRef = useRef3(null);
-  const optionRefs = useRef3([]);
+  const [isOpen, setIsOpen] = useState6(false);
+  const [activeIndex, setActiveIndex] = useState6(selectedIndex);
+  const [menuPosition, setMenuPosition] = useState6(null);
+  const rootRef = useRef4(null);
+  const triggerRef = useRef4(null);
+  const listboxRef = useRef4(null);
+  const optionRefs = useRef4([]);
   const labelId = useId4();
   const listboxId = useId4();
-  const close = useCallback2((returnFocus) => {
+  const close = useCallback3((returnFocus) => {
     setIsOpen(false);
     setMenuPosition(null);
     if (returnFocus) triggerRef.current?.focus({ preventScroll: true });
   }, []);
-  const updateMenuPosition = useCallback2(() => {
+  const updateMenuPosition = useCallback3(() => {
     const trigger = triggerRef.current;
     if (!trigger) return;
     const rect = trigger.getBoundingClientRect();
@@ -1675,7 +2106,7 @@ function FontSchemePicker({ value, onChange }) {
       }
     );
   }, []);
-  const open = useCallback2(
+  const open = useCallback3(
     (index) => {
       setActiveIndex(index);
       updateMenuPosition();
@@ -1683,7 +2114,7 @@ function FontSchemePicker({ value, onChange }) {
     },
     [updateMenuPosition]
   );
-  useEffect4(() => {
+  useEffect6(() => {
     if (!isOpen) setActiveIndex(selectedIndex);
   }, [isOpen, selectedIndex]);
   useLayoutEffect(() => {
@@ -1692,7 +2123,7 @@ function FontSchemePicker({ value, onChange }) {
     listboxRef.current?.focus({ preventScroll: true });
     optionRefs.current[activeIndex]?.scrollIntoView?.({ block: "nearest" });
   }, [activeIndex, isOpen, updateMenuPosition]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!isOpen) return;
     const handleOutsidePointer = (event) => {
       if (!rootRef.current?.contains(event.target)) close(false);
@@ -1707,7 +2138,7 @@ function FontSchemePicker({ value, onChange }) {
       window.removeEventListener("scroll", handleViewportChange, true);
     };
   }, [close, isOpen, updateMenuPosition]);
-  const select = useCallback2(
+  const select = useCallback3(
     (index) => {
       const scheme = WRITE_CANVAS_FONT_SCHEMES[index];
       if (!scheme) return;
@@ -1764,9 +2195,9 @@ function FontSchemePicker({ value, onChange }) {
     width: `${menuPosition.width}px`,
     maxHeight: `${menuPosition.maxHeight}px`
   } : void 0;
-  return /* @__PURE__ */ jsxs4("div", { ref: rootRef, className: "db-settings-select db-font-picker", children: [
-    /* @__PURE__ */ jsx4("span", { className: "db-settings-select-header", children: /* @__PURE__ */ jsx4("span", { id: labelId, children: "Font" }) }),
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5("div", { ref: rootRef, className: "db-settings-select db-font-picker", children: [
+    /* @__PURE__ */ jsx5("span", { className: "db-settings-select-header", children: /* @__PURE__ */ jsx5("span", { id: labelId, children: "Font" }) }),
+    /* @__PURE__ */ jsxs5(
       "button",
       {
         ref: triggerRef,
@@ -1779,8 +2210,8 @@ function FontSchemePicker({ value, onChange }) {
         onClick: () => isOpen ? close(false) : open(selectedIndex),
         onKeyDown: handleTriggerKeyDown,
         children: [
-          /* @__PURE__ */ jsx4(FontSchemePreview, { scheme: selectedScheme, compact: true }),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(FontSchemePreview, { scheme: selectedScheme, compact: true }),
+          /* @__PURE__ */ jsx5(
             "span",
             {
               className: `db-font-picker-caret${isOpen ? " db-font-picker-caret--open" : ""}`,
@@ -1790,7 +2221,7 @@ function FontSchemePicker({ value, onChange }) {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs4(
+    isOpen && /* @__PURE__ */ jsxs5(
       "div",
       {
         ref: listboxRef,
@@ -1806,8 +2237,8 @@ function FontSchemePicker({ value, onChange }) {
           WRITE_CANVAS_FONT_SCHEMES.filter((scheme) => scheme.group === "theme").map(
             (scheme) => renderFontSchemeOption(scheme)
           ),
-          FONT_SCHEME_GROUPS.map(({ group, label }) => /* @__PURE__ */ jsxs4("div", { role: "group", "aria-label": label, children: [
-            /* @__PURE__ */ jsx4("div", { className: "db-font-picker-group", "aria-hidden": "true", children: label }),
+          FONT_SCHEME_GROUPS.map(({ group, label }) => /* @__PURE__ */ jsxs5("div", { role: "group", "aria-label": label, children: [
+            /* @__PURE__ */ jsx5("div", { className: "db-font-picker-group", "aria-hidden": "true", children: label }),
             WRITE_CANVAS_FONT_SCHEMES.filter((scheme) => scheme.group === group).map(
               (scheme) => renderFontSchemeOption(scheme)
             )
@@ -1820,7 +2251,7 @@ function FontSchemePicker({ value, onChange }) {
     const index = WRITE_CANVAS_FONT_SCHEMES.indexOf(scheme);
     const selected = scheme.id === value;
     const active = index === activeIndex;
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
         ref: (element) => {
@@ -1834,8 +2265,8 @@ function FontSchemePicker({ value, onChange }) {
         onMouseMove: () => setActiveIndex(index),
         onClick: () => select(index),
         children: [
-          /* @__PURE__ */ jsx4(FontSchemePreview, { scheme }),
-          /* @__PURE__ */ jsx4("span", { className: "db-font-picker-check", "aria-hidden": "true", children: selected ? "\u2713" : "" })
+          /* @__PURE__ */ jsx5(FontSchemePreview, { scheme }),
+          /* @__PURE__ */ jsx5("span", { className: "db-font-picker-check", "aria-hidden": "true", children: selected ? "\u2713" : "" })
         ]
       },
       scheme.id
@@ -1849,8 +2280,8 @@ function FontSchemePreview({
   const labels = scheme.label.split(/\s*\u00b7\s*/u);
   const headingLabel = labels[0] ?? scheme.label;
   const bodyLabel = labels[1] ?? (scheme.id === "theme" ? "Use the active theme" : "Headings & body");
-  return /* @__PURE__ */ jsxs4("span", { className: `db-font-picker-preview${compact ? " db-font-picker-preview--compact" : ""}`, children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("span", { className: `db-font-picker-preview${compact ? " db-font-picker-preview--compact" : ""}`, children: [
+    /* @__PURE__ */ jsx5(
       "span",
       {
         className: "db-font-picker-heading",
@@ -1858,7 +2289,7 @@ function FontSchemePreview({
         children: headingLabel
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "span",
       {
         className: "db-font-picker-body",
@@ -1916,6 +2347,15 @@ export {
   DEFAULT_PROOFING_PREFERENCES,
   loadProofingPreferences,
   saveProofingPreferences,
+  SIDEBAR_WIDTH_DEFAULT,
+  SIDEBAR_WIDTH_MIN,
+  SIDEBAR_WIDTH_MAX,
+  SIDEBAR_COLLAPSE_THRESHOLD,
+  classifyFormFactor,
+  resolveLayoutMode,
+  formFactorDataAttributes,
+  isInstalledDisplayMode,
+  useMediaQuery,
   DB_CHROME_COLORS,
   DEFAULT_INTERFACE_FONT,
   loadThemePreference,
@@ -1930,6 +2370,7 @@ export {
   AccentColorSettings,
   ProofingSettingsControls,
   WriteCanvasSettingsControls,
+  formatModelSize,
   AiSettingsControls,
   WorkspaceSettingsControls
 };