@bendyline/docblocks-react 2.6.2 → 2.7.1

package/dist/chunk-W55E6TE2.js

@@ -0,0 +1,1714 @@
+import {
+  Dialog
+} from "./chunk-56KO2LYN.js";
+
+// src/Settings/AiSettings.tsx
+import { useCallback, useEffect as useEffect2, useId, useRef as useRef2, useState as useState2 } from "react";
+
+// src/Settings/AiKnowledgeSettings.tsx
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } 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"));
+  return `${an ? "an" : "a"} ${megabytes} MB`;
+}
+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 [browse, setBrowse] = useState(false);
+  const [query, setQuery] = useState("");
+  const [removing, setRemoving] = useState(null);
+  const generation = useRef(0);
+  useEffect(
+    () => () => {
+      generation.current++;
+    },
+    [knowledge]
+  );
+  useEffect(() => {
+    let live = true;
+    let timer;
+    const refresh = async () => {
+      try {
+        const result = await knowledge.state();
+        if (!live) return;
+        if (!result.ok) {
+          if (result.error.code === "unsupported") setUnsupported(result.error.message);
+          else setLoadError(result.error.message);
+          return;
+        }
+        setState(result.value);
+        setLoadError(null);
+        setUnsupported(null);
+        if (result.value.improvement?.downloading || result.value.catalogs.some((catalog) => catalog.state === "downloading")) {
+          timer = setTimeout(() => void refresh(), 1500);
+        }
+      } catch {
+        if (live) setLoadError("Could not refresh knowledge catalogs. Try again.");
+      }
+    };
+    void refresh();
+    return () => {
+      live = false;
+      if (timer) clearTimeout(timer);
+    };
+  }, [knowledge, revision]);
+  const update = async (action) => {
+    const current = generation.current;
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await knowledge.update(action);
+      if (current !== generation.current) return;
+      if (!result.ok) setError(result.error.message);
+      else {
+        setRemoving(null);
+        setRevision((value) => value + 1);
+      }
+    } catch {
+      if (current === generation.current) setError("Could not change this catalog. Try again.");
+    } finally {
+      if (current === generation.current) setBusy(false);
+    }
+  };
+  const visible = state?.catalogs.filter(
+    (catalog) => (browse || catalog.installedVersion !== null || catalog.state === "downloading") && `${catalog.name} ${catalog.description}`.toLowerCase().includes(query.toLowerCase())
+  ) ?? [];
+  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__ */ 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." }),
+    (error ?? loadError) && /* @__PURE__ */ jsx("p", { className: "db-settings-hint db-settings-ai-error", role: "alert", children: error ?? loadError }),
+    !state && !loadError && /* @__PURE__ */ jsx("p", { className: "db-settings-hint", role: "status", children: "Loading knowledge catalogs\u2026" }),
+    state?.improvement && !state.improvement.downloading && /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "db-ai-link-button",
+        disabled: busy,
+        onClick: () => void update({ action: "improve" }),
+        children: [
+          "Improve knowledge results with ",
+          sizedArticle(state.improvement.downloadBytes),
+          " model download"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "db-settings-ai-knowledge-actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "db-settings-action db-settings-action--secondary",
+          disabled: busy,
+          onClick: () => setBrowse(!browse),
+          children: browse ? "Show downloaded catalogs" : "Browse additional catalogs"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "db-settings-action db-settings-action--secondary",
+          disabled: busy,
+          onClick: () => setRevision((value) => value + 1),
+          children: "Refresh catalogs"
+        }
+      )
+    ] }),
+    state && /* @__PURE__ */ jsxs("label", { className: "db-settings-select", children: [
+      /* @__PURE__ */ jsx("span", { className: "db-settings-select-header", children: "Find a catalog" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "db-settings-select-input",
+          type: "search",
+          value: query,
+          onChange: (event) => setQuery(event.currentTarget.value)
+        }
+      )
+    ] }),
+    state && visible.length === 0 && /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: browse ? "No matching catalogs are available." : "No downloaded catalogs match. Browse additional catalogs to add reference material." }),
+    /* @__PURE__ */ jsx("ul", { className: "db-settings-ai-knowledge-list", children: visible.map((catalog) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("strong", { children: catalog.name }),
+      /* @__PURE__ */ jsx("p", { className: "db-settings-hint", children: catalog.description }),
+      /* @__PURE__ */ jsxs("p", { className: "db-settings-hint", children: [
+        "Version ",
+        catalog.installedVersion ?? catalog.version,
+        catalog.documents === null ? "" : ` \xB7 ${catalog.documents.toLocaleString()} documents`,
+        catalog.downloadBytes === null ? "" : ` \xB7 ${(catalog.downloadBytes / 1024 ** 2).toFixed(1)} MB download`
+      ] }),
+      catalog.message && /* @__PURE__ */ jsx("p", { className: "db-settings-hint", role: catalog.state === "error" ? "alert" : "status", children: catalog.message }),
+      catalog.state === "downloading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "progress",
+          {
+            max: 100,
+            value: catalog.percent ?? void 0,
+            "aria-label": `${catalog.name} download progress`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "db-settings-action db-settings-action--secondary",
+            disabled: busy,
+            onClick: () => void update({ action: "cancel", catalogId: catalog.id }),
+            children: "Cancel download"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "db-settings-ai-knowledge-actions", children: [
+        catalog.installedVersion !== null && /* @__PURE__ */ jsxs("label", { className: "db-settings-checkbox", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: catalog.enabled,
+              disabled: busy,
+              onChange: (event) => void update({
+                action: event.currentTarget.checked ? "enable" : "disable",
+                catalogId: catalog.id
+              })
+            }
+          ),
+          "Use ",
+          catalog.name
+        ] }),
+        (catalog.installedVersion === null || catalog.updateAvailable) && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "db-settings-action",
+            disabled: busy,
+            onClick: () => void update({ action: "install", catalogId: catalog.id }),
+            children: catalog.updateAvailable ? `Update to ${catalog.version}` : "Download catalog"
+          }
+        ),
+        catalog.installedVersion !== null && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "db-settings-action db-settings-action--secondary",
+            disabled: busy,
+            onClick: () => setRemoving(catalog.id),
+            children: [
+              "Remove ",
+              catalog.name,
+              "\u2026"
+            ]
+          }
+        )
+      ] }),
+      removing === catalog.id && /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": `Confirm removal of ${catalog.name}`, children: [
+        /* @__PURE__ */ jsxs("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__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "db-settings-action",
+            disabled: busy,
+            onClick: () => void update({ action: "remove", catalogId: catalog.id }),
+            children: "Confirm removal"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "db-settings-action db-settings-action--secondary",
+            onClick: () => setRemoving(null),
+            children: "Keep catalog"
+          }
+        )
+      ] })
+    ] }, catalog.id)) })
+  ] });
+}
+
+// src/Settings/AiSettings.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function statusSentence(status) {
+  switch (status.kind) {
+    case "unavailable":
+      switch (status.reason) {
+        case "opt-out":
+          return "AI features are off.";
+        case "platform-unsupported":
+          return "AI features are not available in this build of DocBlocks.";
+        case "not-installed":
+          return "DocBlocks could not start its built-in AI service.";
+        case "not-running":
+          return "DocBlocks is restarting its built-in AI service\u2026";
+        case "disconnected":
+          return "DocBlocks is starting its built-in AI service\u2026";
+      }
+      break;
+    case "connecting":
+      switch (status.step) {
+        case "detecting":
+          return "Looking for Gezel\u2026";
+        case "awaiting-approval":
+          return "Waiting for approval in Gezel\u2026";
+        case "preparing-model":
+        case "preparing-workspace": {
+          const progress = status.progress;
+          if (!progress?.message) return "Getting ready\u2026";
+          const percent = progress.percent === null ? "" : ` (${Math.round(progress.percent)}%)`;
+          return `Getting ready: ${progress.message}${percent}`;
+        }
+      }
+      break;
+    case "ready": {
+      const version = status.provider.version ? ` ${status.provider.version}` : "";
+      if (status.provider.mode === "hosted") {
+        if (!status.model) return "Add an on-device model to start using AI.";
+        return "";
+      }
+      return `Connected to ${status.provider.name}${version}.`;
+    }
+    case "error":
+      return status.error.message;
+  }
+  return "";
+}
+function modelLabel(model) {
+  return model.local ? `${model.label} (on this device)` : model.label;
+}
+function modelReady(model) {
+  return model.availability === void 0 || model.availability === "available";
+}
+function readinessLabel(model) {
+  switch (model.availability) {
+    case "download-required":
+      return "download required";
+    case "downloading":
+      return "downloading";
+    default:
+      return "not available";
+  }
+}
+function formatDownloadSize(bytes) {
+  if (bytes === null) return null;
+  const gibibytes = bytes / 1024 ** 3;
+  if (gibibytes >= 0.95) return `${gibibytes.toFixed(gibibytes >= 10 ? 0 : 1)} GB`;
+  return `${Math.max(1, Math.round(bytes / 1024 ** 2))} MB`;
+}
+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 modelSelectId = useId();
+  useEffect2(() => {
+    mounted.current = true;
+    setProviderInstalled(false);
+    const unsubscribe = ai.onStatus((next) => {
+      if (mounted.current) setStatus(next);
+    });
+    void ai.providerInstalled().then(
+      (installed) => {
+        if (mounted.current) setProviderInstalled(installed);
+      },
+      () => {
+        if (mounted.current) setProviderInstalled(false);
+      }
+    );
+    void Promise.all([ai.status(), ai.getPreferences()]).then(([initialStatus, initial]) => {
+      if (!mounted.current) return;
+      setStatus((current) => current ?? initialStatus);
+      setPreferences(initial);
+    });
+    return () => {
+      mounted.current = false;
+      installHandle.current?.cancel();
+      unsubscribe();
+    };
+  }, [ai]);
+  const ready = status?.kind === "ready";
+  const refreshModels = useCallback(async () => {
+    const result = await ai.models();
+    if (mounted.current && result.ok) setModels(result.value);
+    return result;
+  }, [ai]);
+  const refreshAvailableModels = useCallback(async () => {
+    if (!ai.availableModels) return;
+    setLoadingAvailableModels(true);
+    try {
+      const result = await ai.availableModels();
+      if (!mounted.current) return;
+      if (result.ok) {
+        setAvailableModels(result.value);
+        setDownloadModelId(
+          (current) => result.value.some((model) => model.id === current) ? current : result.value[0]?.id ?? ""
+        );
+      } else {
+        setFailure(result.error);
+      }
+    } finally {
+      if (mounted.current) setLoadingAvailableModels(false);
+    }
+  }, [ai]);
+  useEffect2(() => {
+    if (!ready) {
+      setModels([]);
+      setAvailableModels([]);
+      setShowModelDownloads(false);
+      return;
+    }
+    void refreshModels();
+  }, [ready, refreshModels]);
+  const connect = useCallback(async () => {
+    setBusy(true);
+    setFailure(null);
+    try {
+      const result = await ai.connect();
+      if (mounted.current && !result.ok && result.error.code !== "cancelled") {
+        setFailure(result.error);
+      }
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [ai]);
+  const switchToBuiltIn = useCallback(async () => {
+    setBusy(true);
+    setFailure(null);
+    try {
+      await ai.disconnect();
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [ai]);
+  const setEnabled = useCallback(
+    async (enabled2) => {
+      const previous = preferences;
+      setFailure(null);
+      setSaving(true);
+      if (previous) setPreferences({ ...previous, enabled: enabled2 });
+      let next;
+      try {
+        next = await ai.setPreferences({ enabled: enabled2 });
+      } catch {
+        if (mounted.current && previous) setPreferences(previous);
+        return;
+      } finally {
+        if (mounted.current) setSaving(false);
+      }
+      if (!mounted.current) return;
+      setPreferences(next);
+    },
+    [ai, preferences]
+  );
+  const retryBuiltIn = useCallback(async () => {
+    setBusy(true);
+    setFailure(null);
+    try {
+      await ai.setPreferences({ enabled: true });
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [ai]);
+  const setModel = useCallback(
+    async (model) => {
+      const next = await ai.setPreferences({ model });
+      if (mounted.current) setPreferences(next);
+    },
+    [ai]
+  );
+  const addModel = useCallback(async () => {
+    if (!downloadModelId || !ai.installModel) return;
+    setFailure(null);
+    setDownloadProgress({ phase: "starting", message: "Starting download\u2026", percent: null });
+    setInstallingModel(true);
+    const handle = ai.installModel(downloadModelId, (progress) => {
+      if (mounted.current) setDownloadProgress(progress);
+    });
+    installHandle.current = handle;
+    try {
+      const result = await handle.done;
+      if (!mounted.current) return;
+      if (!result.ok) {
+        if (result.error.code !== "cancelled") setFailure(result.error);
+        return;
+      }
+      const nextPreferences = await ai.setPreferences({ model: result.value.id });
+      if (!mounted.current) return;
+      setPreferences(nextPreferences);
+      await Promise.all([refreshModels(), refreshAvailableModels()]);
+    } finally {
+      if (installHandle.current === handle) installHandle.current = null;
+      if (mounted.current) {
+        setInstallingModel(false);
+        setDownloadProgress(null);
+      }
+    }
+  }, [ai, downloadModelId, refreshAvailableModels, refreshModels]);
+  if (!preferences || !status) return null;
+  const enabled = preferences.enabled;
+  const connecting = status.kind === "connecting";
+  const code = status.kind === "connecting" ? status.verificationCode : null;
+  const defaultModel = models.find((model) => model.isDefault) ?? null;
+  const hasReadyModels = models.some(modelReady);
+  const unavailableModels = models.filter((model) => !modelReady(model));
+  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(
+        "input",
+        {
+          type: "checkbox",
+          checked: enabled,
+          disabled: saving,
+          onChange: (event) => void setEnabled(event.currentTarget.checked)
+        }
+      ),
+      "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: [
+        "Type this code in Gezel to approve DocBlocks:",
+        " ",
+        /* @__PURE__ */ jsx2("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(
+            "select",
+            {
+              id: modelSelectId,
+              className: "db-settings-select-input",
+              value: preferences.model ?? "",
+              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))
+              ]
+            }
+          )
+        ] }),
+        unavailableModels.map((model) => /* @__PURE__ */ jsxs2("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(
+            "button",
+            {
+              type: "button",
+              className: "db-settings-action db-settings-action--secondary",
+              disabled: installingModel,
+              onClick: () => {
+                const next = !showModelDownloads;
+                setShowModelDownloads(next);
+                if (next) void refreshAvailableModels();
+              },
+              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(
+                  "select",
+                  {
+                    className: "db-settings-select-input",
+                    value: downloadModelId,
+                    disabled: installingModel,
+                    onChange: (event) => setDownloadModelId(event.currentTarget.value),
+                    children: availableModels.map((model) => {
+                      const size = formatDownloadSize(model.downloadBytes);
+                      return /* @__PURE__ */ jsxs2("option", { value: model.id, children: [
+                        model.label,
+                        size ? ` \u2014 ${size}` : ""
+                      ] }, model.id);
+                    })
+                  }
+                )
+              ] }),
+              selectedDownload && /* @__PURE__ */ jsxs2("p", { className: "db-settings-hint", children: [
+                "Downloads and runs on this device",
+                formatDownloadSize(selectedDownload.downloadBytes) ? ` \xB7 ${formatDownloadSize(selectedDownload.downloadBytes)}` : ""
+              ] }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "db-settings-action",
+                  disabled: !downloadModelId || installingModel,
+                  onClick: () => void addModel(),
+                  children: installingModel ? "Downloading\u2026" : "Download model"
+                }
+              )
+            ] }),
+            installingModel && downloadProgress && /* @__PURE__ */ jsxs2("div", { className: "db-settings-ai-download-progress", role: "status", children: [
+              /* @__PURE__ */ jsx2(
+                "progress",
+                {
+                  max: 100,
+                  value: downloadProgress.percent ?? void 0,
+                  "aria-label": "Model download progress"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: "db-settings-action db-settings-action--secondary",
+                  onClick: () => installHandle.current?.cancel(),
+                  children: "Cancel download"
+                }
+              ),
+              /* @__PURE__ */ jsxs2("span", { children: [
+                downloadProgress.message,
+                downloadProgress.percent === null ? "" : ` (${Math.round(downloadProgress.percent)}%)`
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }),
+      ready && ai.knowledge && /* @__PURE__ */ jsx2(AiKnowledgeSettings, { knowledge: ai.knowledge }, status.provider.mode),
+      ready && status.provider.mode === "installed" ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "db-settings-action db-settings-action--secondary",
+          disabled: busy,
+          onClick: () => void switchToBuiltIn(),
+          children: "Use built-in AI"
+        }
+      ) : ready && status.provider.mode === "hosted" && providerInstalled ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "db-settings-action",
+          disabled: busy,
+          onClick: () => void connect(),
+          children: "Connect Gezel app\u2026"
+        }
+      ) : status.kind === "error" && status.retryable ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "db-settings-action",
+          disabled: busy || connecting,
+          onClick: () => void retryBuiltIn(),
+          children: "Try built-in AI again"
+        }
+      ) : null
+    ] })
+  ] });
+}
+
+// src/Settings/WorkspaceSettingsControls.tsx
+import { useEffect as useEffect3, useId as useId2, useState as useState3 } 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";
+function compactObject(value) {
+  const entries = Object.entries(value).filter(([, field]) => field !== void 0);
+  return entries.length > 0 ? Object.fromEntries(entries) : void 0;
+}
+function withSection(settings, key, section) {
+  const next = { ...settings };
+  if (section === void 0) delete next[key];
+  else next[key] = section;
+  return next;
+}
+function withCatalog(settings, patch) {
+  return withSection(
+    settings,
+    "catalog",
+    compactObject({ ...settings.catalog ?? {}, ...patch })
+  );
+}
+function withCatalogHtml(settings, patch) {
+  return withCatalog(settings, {
+    html: compactObject({
+      ...settings.catalog?.html ?? {},
+      ...patch
+    })
+  });
+}
+function withCatalogJson(settings, patch) {
+  return withCatalog(settings, {
+    json: compactObject({
+      ...settings.catalog?.json ?? {},
+      ...patch
+    })
+  });
+}
+function optionalText(value) {
+  return value.trim() ? value : void 0;
+}
+function WorkspaceSettingsControls({
+  value,
+  onChange,
+  themes,
+  disabled = false,
+  versionHistory,
+  catalogStatus,
+  onRegenerate,
+  regenerating = false
+}) {
+  const id = useId2();
+  const htmlEnabled = value.catalog?.html?.enabled === true;
+  const jsonEnabled = value.catalog?.json?.enabled === true;
+  const catalogEnabled = htmlEnabled || jsonEnabled;
+  const excludeText = (value.catalog?.exclude ?? []).join("\n");
+  const [excludeDraft, setExcludeDraft] = useState3(excludeText);
+  useEffect3(() => {
+    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(
+    "select",
+    {
+      id: selectId,
+      className: "db-settings-select-input",
+      value: selected ?? "",
+      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: [
+          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" }),
+        themeSelect(
+          `${id}-theme`,
+          value.documents?.defaultTheme,
+          "Standard",
+          (themeId) => onChange(
+            withSection(
+              value,
+              "documents",
+              compactObject({ ...value.documents ?? {}, defaultTheme: themeId })
+            )
+          )
+        )
+      ] }),
+      /* @__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__ */ 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(
+          "input",
+          {
+            type: "checkbox",
+            checked: htmlEnabled,
+            onChange: (event) => onChange(
+              withCatalogHtml(value, { enabled: event.currentTarget.checked ? true : void 0 })
+            )
+          }
+        ),
+        "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(
+            "input",
+            {
+              id: `${id}-html-path`,
+              className: "db-settings-text-input",
+              type: "text",
+              spellCheck: false,
+              placeholder: DEFAULT_CATALOG_HTML_PATH,
+              value: value.catalog?.html?.path ?? "",
+              onChange: (event) => onChange(
+                withCatalogHtml(value, { path: optionalText(event.currentTarget.value) })
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-html-theme`, children: "Page theme" }),
+          themeSelect(
+            `${id}-html-theme`,
+            value.catalog?.html?.theme,
+            "Same as default theme",
+            (themeId) => onChange(withCatalogHtml(value, { theme: themeId }))
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("label", { className: "db-settings-checkbox", children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "checkbox",
+            checked: jsonEnabled,
+            onChange: (event) => onChange(
+              withCatalogJson(value, { enabled: event.currentTarget.checked ? true : void 0 })
+            )
+          }
+        ),
+        "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(
+            "input",
+            {
+              id: `${id}-json-path`,
+              className: "db-settings-text-input",
+              type: "text",
+              spellCheck: false,
+              placeholder: DEFAULT_CATALOG_JSON_PATH,
+              value: value.catalog?.json?.path ?? "",
+              onChange: (event) => onChange(
+                withCatalogJson(value, { path: optionalText(event.currentTarget.value) })
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "db-settings-radio-row",
+            role: "radiogroup",
+            "aria-label": "Catalog data content",
+            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(
+                "input",
+                {
+                  type: "radio",
+                  name: `${id}-json-content`,
+                  checked: (value.catalog?.json?.content ?? "metadata") === content,
+                  onChange: () => onChange(
+                    withCatalogJson(value, {
+                      content: content === "metadata" ? void 0 : content
+                    })
+                  )
+                }
+              ),
+              label
+            ] }, content))
+          }
+        )
+      ] }),
+      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(
+            "input",
+            {
+              id: `${id}-title`,
+              className: "db-settings-text-input",
+              type: "text",
+              placeholder: DEFAULT_CATALOG_TITLE,
+              value: value.catalog?.title ?? "",
+              onChange: (event) => onChange(withCatalog(value, { title: optionalText(event.currentTarget.value) }))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-sort`, children: "Order" }),
+          /* @__PURE__ */ jsxs3(
+            "select",
+            {
+              id: `${id}-sort`,
+              className: "db-settings-select-input",
+              value: value.catalog?.sort ?? "title",
+              onChange: (event) => {
+                const sort = event.currentTarget.value;
+                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__ */ jsxs3("div", { className: "db-settings-text", children: [
+          /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-exclude`, children: "Leave out" }),
+          /* @__PURE__ */ jsx3(
+            "textarea",
+            {
+              id: `${id}-exclude`,
+              className: "db-settings-text-input db-settings-textarea",
+              rows: 2,
+              spellCheck: false,
+              placeholder: "drafts/",
+              value: excludeDraft,
+              onChange: (event) => {
+                const text = event.currentTarget.value;
+                setExcludeDraft(text);
+                const exclude = text.split("\n").map((line) => line.trim()).filter(Boolean);
+                onChange(
+                  withCatalog(value, { exclude: exclude.length > 0 ? exclude : void 0 })
+                );
+              }
+            }
+          )
+        ] }),
+        /* @__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(
+            "p",
+            {
+              className: `db-settings-status db-settings-status--${catalogStatus.tone}`,
+              role: "status",
+              children: catalogStatus.message
+            }
+          ),
+          onRegenerate && /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "db-git-secondary-btn",
+              disabled: regenerating,
+              onClick: onRegenerate,
+              children: regenerating ? "Updating\u2026" : "Update now"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    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: [
+        "Keeps prior revisions in ",
+        /* @__PURE__ */ jsx3("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(
+          "input",
+          {
+            type: "radio",
+            name: `${id}-versioning`,
+            value: option,
+            checked: versioning === option,
+            onChange: () => onChange(
+              withSection(
+                value,
+                "versionHistory",
+                compactObject({
+                  ...value.versionHistory ?? {},
+                  enabled: option === "inherit" ? void 0 : option === "on"
+                })
+              )
+            )
+          }
+        ),
+        label
+      ] }, option)),
+      /* @__PURE__ */ jsxs3("div", { className: "db-settings-text", children: [
+        /* @__PURE__ */ jsx3("label", { htmlFor: `${id}-keep`, children: "Revisions to keep per document" }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            id: `${id}-keep`,
+            className: "db-settings-text-input db-settings-number-input",
+            type: "number",
+            inputMode: "numeric",
+            min: 1,
+            max: 1e3,
+            step: 1,
+            placeholder: "50",
+            value: value.versionHistory?.keep ?? "",
+            onChange: (event) => {
+              const raw = event.currentTarget.value;
+              const keep = raw === "" ? void 0 : Number(raw);
+              onChange(
+                withSection(
+                  value,
+                  "versionHistory",
+                  compactObject({ ...value.versionHistory ?? {}, keep })
+                )
+              );
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/Settings/Settings.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useId as useId3,
+  useLayoutEffect,
+  useRef as useRef3,
+  useState as useState4
+} from "react";
+
+// src/preferences/theme.ts
+var ACCENT_COLORS = [
+  "brown",
+  "green",
+  "blue",
+  "purple",
+  "maroon",
+  "orange",
+  "gray"
+];
+var DB_CHROME_COLORS = {
+  light: "#f3eede",
+  dark: "#262219"
+};
+var DEFAULT_INTERFACE_FONT = "system";
+var THEME_STORAGE_KEY = "docblocks:themePreference";
+var ACCENT_STORAGE_KEY = "docblocks:accentColor";
+var INTERFACE_FONT_STORAGE_KEY = "docblocks:interfaceFont";
+function loadThemePreference() {
+  try {
+    const raw = localStorage.getItem(THEME_STORAGE_KEY);
+    if (raw === "light" || raw === "dark" || raw === "auto") return raw;
+  } catch {
+  }
+  return "auto";
+}
+function saveThemePreference(value) {
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, value);
+  } catch {
+  }
+}
+function loadAccentColor() {
+  try {
+    const raw = localStorage.getItem(ACCENT_STORAGE_KEY);
+    if (ACCENT_COLORS.some((color) => color === raw)) return raw;
+  } catch {
+  }
+  return "brown";
+}
+function saveAccentColor(value) {
+  try {
+    localStorage.setItem(ACCENT_STORAGE_KEY, value);
+  } catch {
+  }
+}
+function loadInterfaceFont() {
+  try {
+    const raw = localStorage.getItem(INTERFACE_FONT_STORAGE_KEY);
+    if (raw === "system" || raw === "fixed") return raw;
+  } catch {
+  }
+  return DEFAULT_INTERFACE_FONT;
+}
+function saveInterfaceFont(value) {
+  try {
+    localStorage.setItem(INTERFACE_FONT_STORAGE_KEY, value);
+  } catch {
+  }
+}
+
+// src/preferences/write-canvas.ts
+var SANS_STACK = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+var SERIF_STACK = 'Georgia, "Times New Roman", serif';
+var WRITE_CANVAS_FONT_SCHEMES = [
+  { id: "theme", label: "Inherit from theme", group: "theme" },
+  {
+    id: "serif-sans",
+    label: "Serif headings \xB7 Sans body",
+    group: "system",
+    headerFont: SERIF_STACK,
+    bodyFont: SANS_STACK
+  },
+  {
+    id: "sans-sans",
+    label: "Sans headings \xB7 Sans body",
+    group: "system",
+    headerFont: SANS_STACK,
+    bodyFont: SANS_STACK
+  },
+  {
+    id: "serif-serif",
+    label: "Serif headings \xB7 Serif body",
+    group: "system",
+    headerFont: SERIF_STACK,
+    bodyFont: SERIF_STACK
+  },
+  {
+    id: "pt-serif",
+    label: "PT Serif",
+    group: "curated",
+    headerFont: '"PT Serif", Georgia, serif',
+    bodyFont: '"PT Serif", Georgia, serif'
+  },
+  {
+    id: "hanken",
+    label: "Hanken Grotesk",
+    group: "curated",
+    headerFont: '"Hanken Grotesk", system-ui, sans-serif',
+    bodyFont: '"Hanken Grotesk", system-ui, sans-serif'
+  },
+  {
+    id: "playfair-pt-serif",
+    label: "Playfair Display \xB7 PT Serif",
+    group: "curated",
+    headerFont: '"Playfair Display", Georgia, serif',
+    bodyFont: '"PT Serif", Georgia, serif'
+  },
+  {
+    id: "hanken-lora",
+    label: "Hanken Grotesk \xB7 Lora",
+    group: "curated",
+    headerFont: '"Hanken Grotesk", system-ui, sans-serif',
+    bodyFont: '"Lora", Georgia, serif'
+  },
+  {
+    id: "dm-serif-dm-sans",
+    label: "DM Serif Display \xB7 DM Sans",
+    group: "curated",
+    headerFont: '"DM Serif Display", Georgia, serif',
+    bodyFont: '"DM Sans", system-ui, sans-serif'
+  },
+  {
+    id: "inter",
+    label: "Inter",
+    group: "curated",
+    headerFont: '"Inter", system-ui, sans-serif',
+    bodyFont: '"Inter", system-ui, sans-serif'
+  }
+];
+var FONT_SCHEMES_BY_ID = new Map(WRITE_CANVAS_FONT_SCHEMES.map((scheme) => [scheme.id, scheme]));
+var DEFAULT_WRITE_CANVAS_FONT_SCHEME = "theme";
+function resolveWriteCanvasFonts(scheme) {
+  const option = FONT_SCHEMES_BY_ID.get(scheme);
+  const resolved = {};
+  if (option?.headerFont) resolved.headerFont = option.headerFont;
+  if (option?.bodyFont) resolved.bodyFont = option.bodyFont;
+  return resolved;
+}
+function isWriteCanvasFontScheme(value) {
+  return typeof value === "string" && FONT_SCHEMES_BY_ID.has(value);
+}
+var WRITE_CANVAS_TEXT_SIZE_MIN = 12;
+var WRITE_CANVAS_TEXT_SIZE_MAX = 32;
+var WRITE_CANVAS_LINE_SPACING_MIN = 1;
+var WRITE_CANVAS_LINE_SPACING_MAX = 2.4;
+var DEFAULT_WRITE_CANVAS_PREFERENCES = {
+  textSize: 16,
+  lineSpacing: 1.7,
+  fontScheme: DEFAULT_WRITE_CANVAS_FONT_SCHEME
+};
+var WRITE_CANVAS_STORAGE_KEY = "docblocks:writeCanvasSettings";
+function loadWriteCanvasPreferences() {
+  try {
+    const raw = localStorage.getItem(WRITE_CANVAS_STORAGE_KEY);
+    if (!raw) return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };
+    const stored = JSON.parse(raw);
+    if (!isRecord(stored)) return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };
+    return {
+      textSize: numberInRange(
+        stored.textSize,
+        WRITE_CANVAS_TEXT_SIZE_MIN,
+        WRITE_CANVAS_TEXT_SIZE_MAX
+      ) ? stored.textSize : DEFAULT_WRITE_CANVAS_PREFERENCES.textSize,
+      lineSpacing: numberInRange(
+        stored.lineSpacing,
+        WRITE_CANVAS_LINE_SPACING_MIN,
+        WRITE_CANVAS_LINE_SPACING_MAX
+      ) ? stored.lineSpacing : DEFAULT_WRITE_CANVAS_PREFERENCES.lineSpacing,
+      // Older stored preferences predate fontScheme; fall back to the default.
+      fontScheme: isWriteCanvasFontScheme(stored.fontScheme) ? stored.fontScheme : DEFAULT_WRITE_CANVAS_PREFERENCES.fontScheme
+    };
+  } catch {
+    return { ...DEFAULT_WRITE_CANVAS_PREFERENCES };
+  }
+}
+function saveWriteCanvasPreferences(value) {
+  try {
+    localStorage.setItem(WRITE_CANVAS_STORAGE_KEY, JSON.stringify(value));
+  } catch {
+  }
+}
+function numberInRange(value, min, max) {
+  return typeof value === "number" && Number.isFinite(value) && value >= min && value <= max;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/Settings/Settings.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ACCENT_LABELS = {
+  brown: "Brown",
+  green: "Green",
+  blue: "Blue",
+  purple: "Purple",
+  maroon: "Maroon",
+  orange: "Orange",
+  gray: "Gray"
+};
+function SettingsDialog({ title = "Settings", onClose, children }) {
+  return /* @__PURE__ */ jsx4(Dialog, { title, onClose, size: "wide", children });
+}
+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(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: "auto",
+            checked: value === "auto",
+            onChange: () => onChange("auto")
+          }
+        ),
+        "System default"
+      ] }),
+      /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: "light",
+            checked: value === "light",
+            onChange: () => onChange("light")
+          }
+        ),
+        "Light"
+      ] }),
+      /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: "dark",
+            checked: value === "dark",
+            onChange: () => onChange("dark")
+          }
+        ),
+        "Dark"
+      ] })
+    ] })
+  ] });
+}
+function InterfaceFontSettings({
+  value,
+  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(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: "system",
+            checked: value !== "fixed",
+            onChange: () => onChange("system")
+          }
+        ),
+        "System default"
+      ] }),
+      /* @__PURE__ */ jsxs4("label", { className: "db-settings-radio db-settings-radio--inline", children: [
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: "fixed",
+            checked: value === "fixed",
+            onChange: () => onChange("fixed")
+          }
+        ),
+        "Bundled"
+      ] })
+    ] })
+  ] });
+}
+function AccentColorSettings({
+  value,
+  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(
+      "label",
+      {
+        className: `db-settings-accent${value === color ? " db-settings-accent--selected" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              className: "db-settings-accent-input",
+              type: "radio",
+              name,
+              value: color,
+              checked: value === color,
+              onChange: () => onChange(color)
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: `db-settings-accent-swatch db-settings-accent-swatch--${color}`,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx4("span", { children: ACCENT_LABELS[color] })
+        ]
+      },
+      color
+    )) })
+  ] });
+}
+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(
+        "input",
+        {
+          type: "checkbox",
+          checked: value.spelling,
+          onChange: (event) => onChange({ ...value, spelling: event.currentTarget.checked })
+        }
+      ),
+      "Show inline spell checking"
+    ] }),
+    /* @__PURE__ */ jsxs4("label", { className: "db-settings-checkbox", children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          type: "checkbox",
+          checked: value.grammar,
+          onChange: (event) => onChange({ ...value, grammar: event.currentTarget.checked })
+        }
+      ),
+      "Show inline grammar checking"
+    ] }),
+    /* @__PURE__ */ jsx4("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: [
+          value.textSize,
+          "px"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          type: "range",
+          min: WRITE_CANVAS_TEXT_SIZE_MIN,
+          max: WRITE_CANVAS_TEXT_SIZE_MAX,
+          step: 1,
+          value: value.textSize,
+          "aria-label": "Text size",
+          "aria-valuetext": `${value.textSize} pixels`,
+          onChange: (event) => onChange({ ...value, textSize: Number(event.currentTarget.value) })
+        }
+      )
+    ] }),
+    /* @__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__ */ jsx4(
+        "input",
+        {
+          type: "range",
+          min: WRITE_CANVAS_LINE_SPACING_MIN,
+          max: WRITE_CANVAS_LINE_SPACING_MAX,
+          step: 0.1,
+          value: value.lineSpacing,
+          "aria-label": "Line spacing",
+          "aria-valuetext": `${value.lineSpacing} times`,
+          onChange: (event) => onChange({ ...value, lineSpacing: Number(event.currentTarget.value) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(
+      FontSchemePicker,
+      {
+        value: value.fontScheme,
+        onChange: (fontScheme) => onChange({ ...value, fontScheme })
+      }
+    )
+  ] });
+}
+function FontSchemePicker({ value, onChange }) {
+  const selectedIndex = Math.max(
+    0,
+    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 labelId = useId3();
+  const listboxId = useId3();
+  const close = useCallback2((returnFocus) => {
+    setIsOpen(false);
+    setMenuPosition(null);
+    if (returnFocus) triggerRef.current?.focus({ preventScroll: true });
+  }, []);
+  const updateMenuPosition = useCallback2(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
+    const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+    const gutter = 8;
+    const gap = 4;
+    const width = Math.min(rect.width, viewportWidth - gutter * 2);
+    const left = Math.min(Math.max(gutter, rect.left), viewportWidth - width - gutter);
+    const spaceBelow = viewportHeight - rect.bottom - gap - gutter;
+    const spaceAbove = rect.top - gap - gutter;
+    const openAbove = spaceBelow < 260 && spaceAbove > spaceBelow;
+    const availableHeight = openAbove ? spaceAbove : spaceBelow;
+    const maxHeight = Math.max(80, Math.min(420, availableHeight));
+    setMenuPosition(
+      openAbove ? {
+        left,
+        bottom: viewportHeight - rect.top + gap,
+        width,
+        maxHeight
+      } : {
+        left,
+        top: rect.bottom + gap,
+        width,
+        maxHeight
+      }
+    );
+  }, []);
+  const open = useCallback2(
+    (index) => {
+      setActiveIndex(index);
+      updateMenuPosition();
+      setIsOpen(true);
+    },
+    [updateMenuPosition]
+  );
+  useEffect4(() => {
+    if (!isOpen) setActiveIndex(selectedIndex);
+  }, [isOpen, selectedIndex]);
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    updateMenuPosition();
+    listboxRef.current?.focus({ preventScroll: true });
+    optionRefs.current[activeIndex]?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex, isOpen, updateMenuPosition]);
+  useEffect4(() => {
+    if (!isOpen) return;
+    const handleOutsidePointer = (event) => {
+      if (!rootRef.current?.contains(event.target)) close(false);
+    };
+    const handleViewportChange = () => updateMenuPosition();
+    document.addEventListener("mousedown", handleOutsidePointer);
+    window.addEventListener("resize", handleViewportChange);
+    window.addEventListener("scroll", handleViewportChange, true);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsidePointer);
+      window.removeEventListener("resize", handleViewportChange);
+      window.removeEventListener("scroll", handleViewportChange, true);
+    };
+  }, [close, isOpen, updateMenuPosition]);
+  const select = useCallback2(
+    (index) => {
+      const scheme = WRITE_CANVAS_FONT_SCHEMES[index];
+      if (!scheme) return;
+      onChange(scheme.id);
+      close(true);
+    },
+    [close, onChange]
+  );
+  const handleTriggerKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      open(selectedIndex);
+    }
+  };
+  const handleListboxKeyDown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setActiveIndex((current) => (current + 1) % WRITE_CANVAS_FONT_SCHEMES.length);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setActiveIndex(
+          (current) => (current - 1 + WRITE_CANVAS_FONT_SCHEMES.length) % WRITE_CANVAS_FONT_SCHEMES.length
+        );
+        break;
+      case "Home":
+        event.preventDefault();
+        setActiveIndex(0);
+        break;
+      case "End":
+        event.preventDefault();
+        setActiveIndex(WRITE_CANVAS_FONT_SCHEMES.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        select(activeIndex);
+        break;
+      case "Escape":
+        event.preventDefault();
+        event.stopPropagation();
+        close(true);
+        break;
+      case "Tab":
+        close(false);
+        break;
+    }
+  };
+  const menuStyle = menuPosition ? {
+    left: `${menuPosition.left}px`,
+    top: menuPosition.top === void 0 ? void 0 : `${menuPosition.top}px`,
+    bottom: menuPosition.bottom === void 0 ? void 0 : `${menuPosition.bottom}px`,
+    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(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: "db-font-picker-trigger",
+        "aria-label": `Font, ${selectedScheme.label}`,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? listboxId : void 0,
+        onClick: () => isOpen ? close(false) : open(selectedIndex),
+        onKeyDown: handleTriggerKeyDown,
+        children: [
+          /* @__PURE__ */ jsx4(FontSchemePreview, { scheme: selectedScheme, compact: true }),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: `db-font-picker-caret${isOpen ? " db-font-picker-caret--open" : ""}`,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: listboxRef,
+        id: listboxId,
+        className: "db-font-picker-menu",
+        style: menuStyle,
+        role: "listbox",
+        tabIndex: -1,
+        "aria-labelledby": labelId,
+        "aria-activedescendant": `${listboxId}-option-${activeIndex}`,
+        onKeyDown: handleListboxKeyDown,
+        children: [
+          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 }),
+            WRITE_CANVAS_FONT_SCHEMES.filter((scheme) => scheme.group === group).map(
+              (scheme) => renderFontSchemeOption(scheme)
+            )
+          ] }, group))
+        ]
+      }
+    )
+  ] });
+  function renderFontSchemeOption(scheme) {
+    const index = WRITE_CANVAS_FONT_SCHEMES.indexOf(scheme);
+    const selected = scheme.id === value;
+    const active = index === activeIndex;
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: (element) => {
+          optionRefs.current[index] = element;
+        },
+        id: `${listboxId}-option-${index}`,
+        className: `db-font-picker-option${selected ? " db-font-picker-option--selected" : ""}${active ? " db-font-picker-option--active" : ""}`,
+        role: "option",
+        "aria-selected": selected,
+        onMouseDown: (event) => event.preventDefault(),
+        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" : "" })
+        ]
+      },
+      scheme.id
+    );
+  }
+}
+function FontSchemePreview({
+  scheme,
+  compact = false
+}) {
+  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(
+      "span",
+      {
+        className: "db-font-picker-heading",
+        style: scheme.headerFont ? { fontFamily: scheme.headerFont } : void 0,
+        children: headingLabel
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "span",
+      {
+        className: "db-font-picker-body",
+        style: scheme.bodyFont ? { fontFamily: scheme.bodyFont } : void 0,
+        children: bodyLabel
+      }
+    )
+  ] });
+}
+var FONT_SCHEME_GROUPS = [
+  { group: "system", label: "System fonts" },
+  { group: "curated", label: "Curated pairings" }
+];
+function formatLineSpacing(value) {
+  return `${value.toFixed(1).replace(/\.0$/, "")}\xD7`;
+}
+
+// src/preferences/proofing.ts
+var DEFAULT_PROOFING_PREFERENCES = {
+  spelling: true,
+  grammar: true
+};
+var STORAGE_KEY = "docblocks:proofingPreferences";
+function loadProofingPreferences() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return { ...DEFAULT_PROOFING_PREFERENCES };
+    const stored = JSON.parse(raw);
+    if (typeof stored !== "object" || stored === null) {
+      return { ...DEFAULT_PROOFING_PREFERENCES };
+    }
+    const record = stored;
+    return {
+      spelling: typeof record.spelling === "boolean" ? record.spelling : DEFAULT_PROOFING_PREFERENCES.spelling,
+      grammar: typeof record.grammar === "boolean" ? record.grammar : DEFAULT_PROOFING_PREFERENCES.grammar
+    };
+  } catch {
+  }
+  return { ...DEFAULT_PROOFING_PREFERENCES };
+}
+function saveProofingPreferences(value) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+  } catch {
+  }
+}
+
+export {
+  WRITE_CANVAS_FONT_SCHEMES,
+  DEFAULT_WRITE_CANVAS_FONT_SCHEME,
+  resolveWriteCanvasFonts,
+  DEFAULT_WRITE_CANVAS_PREFERENCES,
+  loadWriteCanvasPreferences,
+  saveWriteCanvasPreferences,
+  DEFAULT_PROOFING_PREFERENCES,
+  loadProofingPreferences,
+  saveProofingPreferences,
+  DB_CHROME_COLORS,
+  DEFAULT_INTERFACE_FONT,
+  loadThemePreference,
+  saveThemePreference,
+  loadAccentColor,
+  saveAccentColor,
+  loadInterfaceFont,
+  saveInterfaceFont,
+  SettingsDialog,
+  ThemeSettings,
+  InterfaceFontSettings,
+  AccentColorSettings,
+  ProofingSettingsControls,
+  WriteCanvasSettingsControls,
+  AiSettingsControls,
+  WorkspaceSettingsControls
+};