dsh-knowledge-library 0.0.0-stage → 0.1.1

package/dist/client.js

@@ -0,0 +1,929 @@
+window.__ModuleLoader__.load({id:"dsh-knowledge-library",factory:(require)=>{var module={exports:{}};var exports=module.exports;
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/client.tsx
+var client_exports = {};
+__export(client_exports, {
+  apply: () => apply,
+  inject: () => inject
+});
+module.exports = __toCommonJS(client_exports);
+
+// src/ui/App.tsx
+var import_react = require("react");
+
+// src/ui/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Icon({ name, size = 20 }) {
+  const paths = {
+    library: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 4h5v16H4zM12 4h3v16h-3zM17 5l3-1 4 15-3 1z" }) }),
+    plus: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14M5 12h14" }),
+    search: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.5", cy: "10.5", r: "6.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m16 16 4 4" })
+    ] }),
+    file: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 3H5v18h14V8zM14 3v5h5M8 13h8M8 17h6" }) }),
+    web: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12h18M12 3c5 5 5 13 0 18-5-5-5-13 0-18" })
+    ] }),
+    video: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m10 9 5 3-5 3z" })
+    ] }),
+    note: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4H5v16h14v-8M10 14l1-4 8-8 3 3-8 8z" }) }),
+    folder: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 6h7l2 3h9v11H3z" }),
+    inbox: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 4h14l3 11v5H2v-5zM2 15h6l2 3h4l2-3h6" }) }),
+    tag: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 3h9l9 9-9 9-9-9z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "1" })
+    ] }),
+    arrow: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9 5 7 7-7 7" }),
+    close: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12M18 6 6 18" }),
+    upload: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 16V3m-5 5 5-5 5 5M3 15v6h18v-6" }) }),
+    check: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }),
+    clock: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 7v6l4 2" })
+    ] }),
+    copy: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "8", y: "8", width: "12", height: "13", rx: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 8V3H3v13h5" })
+    ] }),
+    download: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3v13m-5-5 5 5 5-5M3 17v4h18v-4" }) }),
+    settings: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 7h16M4 17h16" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "7", r: "3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "15", cy: "17", r: "3" })
+    ] })
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: paths[name] || paths.file });
+}
+var LibraryIcon = ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "library", size });
+
+// src/ui/App.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var API = "/knowledge-library/api";
+var kinds = {
+  web: { label: "\u7F51\u9875", icon: "web" },
+  text: { label: "\u6587\u672C", icon: "file" },
+  file: { label: "\u6587\u4EF6", icon: "file" },
+  video: { label: "\u97F3\u89C6\u9891", icon: "video" },
+  transcript: { label: "\u5B57\u5E55", icon: "video" },
+  note: { label: "\u7B14\u8BB0", icon: "note" }
+};
+var time = (v) => `${String(Math.floor(v / 3600)).padStart(2, "0")}:${String(Math.floor(v / 60) % 60).padStart(2, "0")}:${String(Math.floor(v) % 60).padStart(2, "0")}`;
+var date = (value) => new Intl.DateTimeFormat("zh-CN", { month: "2-digit", day: "2-digit" }).format(new Date(value));
+async function api(path, options = {}) {
+  const response = await fetch(API + path, { ...options, headers: { "Content-Type": "application/json", "X-Knowledge-Library": "1", ...options.headers } });
+  const data = await response.json();
+  if (!response.ok) throw new Error(data.error || `\u8BF7\u6C42\u5931\u8D25\uFF1A${response.status}`);
+  return data;
+}
+var post = (path, value, method = "POST") => api(path, { method, body: JSON.stringify(value) });
+function splitTags(value) {
+  return value.split(/[,，]/).map((v) => v.trim()).filter(Boolean);
+}
+function App() {
+  const [stats, setStats] = (0, import_react.useState)();
+  const [items, setItems] = (0, import_react.useState)([]);
+  const [total, setTotal] = (0, import_react.useState)(0);
+  const [query, setQuery] = (0, import_react.useState)("");
+  const [filter, setFilter] = (0, import_react.useState)({});
+  const [selected, setSelected] = (0, import_react.useState)();
+  const [detail, setDetail] = (0, import_react.useState)();
+  const [anchor, setAnchor] = (0, import_react.useState)();
+  const [editor, setEditor] = (0, import_react.useState)();
+  const [jobs, setJobs] = (0, import_react.useState)([]);
+  const [showJobs, setShowJobs] = (0, import_react.useState)(false);
+  const [showInfo, setShowInfo] = (0, import_react.useState)(false);
+  const [showNavigation, setShowNavigation] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)("");
+  const [toast, setToast] = (0, import_react.useState)("");
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [detailLoading, setDetailLoading] = (0, import_react.useState)(false);
+  const [revision, setRevision] = (0, import_react.useState)(0);
+  const [limit, setLimit] = (0, import_react.useState)(40);
+  const searchRef = (0, import_react.useRef)(null);
+  const detailRef = (0, import_react.useRef)(null);
+  const refresh = (0, import_react.useCallback)(() => setRevision((v) => v + 1), []);
+  const notify = (message) => setToast(message);
+  const chooseFilter = (next) => {
+    setFilter(next);
+    setLimit(40);
+    setSelected(void 0);
+    setAnchor(void 0);
+    setDetail(void 0);
+    setShowNavigation(false);
+  };
+  const refreshMeta = (0, import_react.useCallback)(async () => {
+    const [s, j] = await Promise.all([api("/stats"), api("/jobs")]);
+    setStats(s);
+    setJobs(j);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    void refreshMeta().catch((e) => setError(e.message));
+  }, [revision, refreshMeta]);
+  (0, import_react.useEffect)(() => {
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      setLoading(true);
+      const params = new URLSearchParams({ query, limit: String(limit) });
+      for (const [key, value] of Object.entries(filter)) if (value) params.set(key, value);
+      api(`/materials?${params}`, { signal: controller.signal }).then((result) => {
+        setItems(result.items);
+        setTotal(result.total);
+      }).catch((e) => {
+        if (e.name !== "AbortError") setError(e.message);
+      }).finally(() => {
+        if (!controller.signal.aborted) setLoading(false);
+      });
+    }, query ? 180 : 0);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [query, filter, revision, limit]);
+  (0, import_react.useEffect)(() => {
+    if (!selected) {
+      setDetail(void 0);
+      return;
+    }
+    const controller = new AbortController();
+    setDetailLoading(true);
+    setDetail(void 0);
+    api(`/materials/${selected}`, { signal: controller.signal }).then(setDetail).catch((e) => {
+      if (e.name !== "AbortError") setError(e.message);
+    }).finally(() => {
+      if (!controller.signal.aborted) setDetailLoading(false);
+    });
+    return () => controller.abort();
+  }, [selected, revision]);
+  (0, import_react.useEffect)(() => {
+    if (!detail || !anchor) return;
+    const element = Array.from(detailRef.current?.querySelectorAll("[data-segment-id]") || []).find((el) => el.dataset.segmentId === anchor);
+    element?.scrollIntoView({ block: "center" });
+  }, [detail, anchor]);
+  const pending = jobs.filter((j) => ["queued", "running"].includes(j.status)).length;
+  (0, import_react.useEffect)(() => {
+    if (!pending) return;
+    const interval = setInterval(refresh, 2500);
+    return () => clearInterval(interval);
+  }, [pending, refresh]);
+  (0, import_react.useEffect)(() => {
+    if (!toast) return;
+    const timer = setTimeout(() => setToast(""), 3500);
+    return () => clearTimeout(timer);
+  }, [toast]);
+  (0, import_react.useEffect)(() => {
+    const listener = (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+        event.preventDefault();
+        searchRef.current?.focus();
+      }
+    };
+    window.addEventListener("keydown", listener);
+    return () => window.removeEventListener("keydown", listener);
+  }, []);
+  async function copy(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      notify("\u5F15\u7528\u5DF2\u590D\u5236");
+    } catch {
+      setError("\u526A\u8D34\u677F\u4E0D\u53EF\u7528\uFF0C\u8BF7\u4ECE\u8D44\u6599\u8BE6\u60C5\u624B\u52A8\u590D\u5236\u8D44\u6599 ID");
+    }
+  }
+  const currentTitle = filter.category || filter.collection || (filter.tag ? `\u6807\u7B7E \xB7 ${filter.tag}` : filter.kind === "note" ? "\u77E5\u8BC6\u7B14\u8BB0" : "\u5168\u90E8\u8D44\u6599");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-app", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("main", { className: "kl-workspace", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { className: "kl-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { children: currentTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-header-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: "kl-secondary", onClick: () => setEditor({ mode: "note" }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "note", size: 16 }),
+            "\u5199\u7B14\u8BB0"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: "kl-primary", onClick: () => setEditor({ mode: "capture" }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "plus", size: 16 }),
+            "\u6536\u96C6\u8D44\u6599"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-navigation", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("nav", { "aria-label": "\u8D44\u6599\u5BFC\u822A", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { "aria-pressed": !Object.values(filter).some(Boolean), onClick: () => chooseFilter({}), children: "\u5168\u90E8\u8D44\u6599" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { "aria-pressed": filter.category === "\u6536\u4EF6\u7BB1", onClick: () => chooseFilter({ category: "\u6536\u4EF6\u7BB1" }), children: "\u6536\u4EF6\u7BB1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { "aria-pressed": filter.kind === "note", onClick: () => chooseFilter({ kind: "note" }), children: "\u77E5\u8BC6\u7B14\u8BB0" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: "kl-directory-toggle", "aria-expanded": showNavigation, "aria-controls": "kl-directory", onClick: () => setShowNavigation((v) => !v), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "folder", size: 16 }),
+          "\u5206\u7C7B\u4E0E\u4E13\u9898"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-toolbar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "kl-search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "search", size: 19 }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { ref: searchRef, "aria-label": "\u641C\u7D22\u8D44\u6599", placeholder: "\u641C\u7D22\u6B63\u6587\u3001\u6807\u9898\u3001\u6807\u7B7E\u2026", value: query, onChange: (e) => {
+            setQuery(e.target.value);
+            setLimit(40);
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { children: "Ctrl K" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { "aria-label": pending ? `\u91C7\u96C6\u4EFB\u52A1\uFF0C${pending} \u9879\u5904\u7406\u4E2D` : "\u91C7\u96C6\u4EFB\u52A1", className: `kl-job-button ${pending ? "has-jobs" : ""}`, onClick: () => setShowJobs(true), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "clock", size: 17 }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: pending ? `${pending} \u9879\u5904\u7406\u4E2D` : "\u91C7\u96C6\u4EFB\u52A1" }),
+          jobs.some((j) => j.status === "failed") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "kl-icon-button", "aria-label": "\u8D44\u6599\u5E93\u8BBE\u7F6E", title: "\u8D44\u6599\u5E93\u8BBE\u7F6E", onClick: () => setShowInfo(true), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "settings", size: 18 }) })
+      ] }),
+      !!error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-error", role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { "aria-label": "\u5173\u95ED\u9519\u8BEF", onClick: () => setError(""), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "close", size: 16 }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-filterbar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("b", { children: total }),
+          " \u4EFD\u8D44\u6599",
+          query && ` \xB7 \u201C${query}\u201D`
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("select", { "aria-label": "\u6309\u7C7B\u578B\u7B5B\u9009", value: filter.kind || "", onChange: (e) => {
+            setFilter({ ...filter, kind: e.target.value || void 0 });
+            setLimit(40);
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "", children: "\u6240\u6709\u7C7B\u578B" }),
+            Object.entries(kinds).map(([value, kind]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value, children: kind.label }, value))
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-sort-label", children: "\u6700\u8FD1\u66F4\u65B0 \u2193" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `kl-body ${detail || detailLoading ? "with-detail" : ""}`, children: [
+        showNavigation && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("aside", { className: "kl-nav", id: "kl-directory", "aria-label": "\u5206\u7C7B\u4E0E\u4E13\u9898", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-directory-title", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u5206\u7C7B\u4E0E\u4E13\u9898" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "kl-icon-button", "aria-label": "\u5173\u95ED\u5206\u7C7B\u5BFC\u822A", onClick: () => setShowNavigation(false), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "close", size: 16 }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-nav-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-nav-label", children: "\u5206\u7C7B" }),
+            stats?.categories.filter((c) => c.name !== "\u6536\u4EF6\u7BB1").map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { "aria-pressed": filter.category === c.name, className: "kl-nav-row", onClick: () => chooseFilter({ category: c.name }), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "folder", size: 16 }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { title: c.name, children: c.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { children: c.count })
+            ] }, c.name)),
+            !stats?.categories.some((c) => c.name !== "\u6536\u4EF6\u7BB1") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "kl-nav-hint", children: "\u6536\u96C6\u8D44\u6599\u65F6\u6DFB\u52A0\u5206\u7C7B" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-nav-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-nav-label", children: "\u4E13\u9898" }),
+            stats?.collections.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { "aria-pressed": filter.collection === c.name, className: "kl-nav-row", onClick: () => chooseFilter({ collection: c.name }), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-collection-dot" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { title: c.name, children: c.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { children: c.count })
+            ] }, c.name)),
+            !stats?.collections.length && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "kl-nav-hint", children: "\u6536\u96C6\u8D44\u6599\u65F6\u6DFB\u52A0\u4E13\u9898" })
+          ] }),
+          !!stats?.tags.length && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-nav-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-nav-label", children: "\u6807\u7B7E" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-tag-cloud", children: stats.tags.slice(0, 15).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { "aria-pressed": filter.tag === tag.name, onClick: () => chooseFilter({ tag: tag.name }), children: [
+              "#",
+              tag.name
+            ] }, tag.name)) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-nav-bottom", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-live-dot" }),
+            "\u4FDD\u5B58\u5728\u8FD9\u53F0\u7535\u8111"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "kl-list", "aria-label": "\u8D44\u6599\u5217\u8868", "aria-busy": loading, children: [
+          loading && !items.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-spinner" }),
+            "\u6B63\u5728\u8BFB\u53D6\u8D44\u6599\u5E93\u2026"
+          ] }) : !items.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "inbox", size: 28 }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: query || Object.values(filter).some(Boolean) ? "\u6CA1\u6709\u627E\u5230\u5339\u914D\u7684\u8D44\u6599" : "\u8FD8\u6CA1\u6709\u8D44\u6599\uFF0C\u6536\u96C6\u7684\u5185\u5BB9\u4F1A\u663E\u793A\u5728\u8FD9\u91CC" }),
+            query && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "\u8BD5\u8BD5\u5176\u4ED6\u5173\u952E\u8BCD\uFF0C\u6216\u5207\u6362\u5206\u7C7B\u3002" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "kl-secondary", onClick: () => query || Object.values(filter).some(Boolean) ? (setQuery(""), chooseFilter({})) : setEditor({ mode: "capture" }), children: query || Object.values(filter).some(Boolean) ? "\u67E5\u770B\u5168\u90E8\u8D44\u6599" : "\u6536\u96C6\u7B2C\u4E00\u4EFD\u8D44\u6599" })
+          ] }) : items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: `kl-item ${selected === item.id ? "selected" : ""}`, onClick: () => {
+            setAnchor(void 0);
+            setSelected(item.id);
+          }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-item-top", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: `kl-type kl-type-${item.kind}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: kinds[item.kind].icon, size: 15 }),
+                kinds[item.kind].label
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("time", { children: date(item.createdAt) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: item.excerpt || item.extraction }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-item-bottom", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "kl-category", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "folder", size: 13 }),
+                item.category
+              ] }),
+              item.tags.slice(0, 2).map((tag) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-chip", children: tag }, tag)),
+              item.status === "stored" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-stored", children: "\u4EC5\u5F52\u6863" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "arrow", size: 15 })
+            ] })
+          ] }, item.id)),
+          items.length < total && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "kl-load-more", onClick: () => setLimit((v) => Math.min(100, v + 40)), disabled: limit >= 100, children: limit >= 100 ? "\u8BF7\u7F29\u5C0F\u641C\u7D22\u8303\u56F4\uFF08\u6700\u591A\u663E\u793A 100 \u6761\uFF09" : "\u52A0\u8F7D\u66F4\u591A" })
+        ] }),
+        selected && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("section", { className: "kl-detail", "aria-label": "\u8D44\u6599\u8BE6\u60C5", ref: detailRef, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-detail-toolbar", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: "kl-back", onClick: () => {
+              setSelected(void 0);
+              setDetail(void 0);
+            }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "close", size: 18 }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u5173\u95ED\u9605\u8BFB" })
+            ] }),
+            detail && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { title: "\u590D\u5236\u8D44\u6599\u5F15\u7528", "aria-label": "\u590D\u5236\u8D44\u6599\u5F15\u7528", onClick: () => void copy(`library://${detail.id}`), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "copy", size: 17 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { title: "\u5BFC\u51FA Markdown", "aria-label": "\u5BFC\u51FA Markdown", href: `${API}/materials/${detail.id}/export`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "download", size: 17 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => setEditor({ mode: "edit", source: detail }), children: "\u7F16\u8F91\u4FE1\u606F" })
+            ] })
+          ] }),
+          detailLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-empty", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-spinner" }),
+            "\u8BFB\u53D6\u4E2D\u2026"
+          ] }) : detail && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("article", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-detail-kicker", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: kinds[detail.kind].label }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: detail.category })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: detail.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-source", children: [
+              detail.sourceUrl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { href: detail.sourceUrl, target: "_blank", rel: "noreferrer", children: [
+                new URL(detail.sourceUrl).hostname,
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "arrow", size: 12 })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: detail.originalName || "\u672C\u5730\u6536\u96C6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: new Date(detail.createdAt).toLocaleDateString("zh-CN") }),
+              detail.author && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: detail.author })
+            ] }),
+            !!detail.tags.length && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-detail-tags", children: detail.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "kl-chip", children: [
+              "#",
+              t
+            ] }, t)) }),
+            detail.sourceNote && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("aside", { className: "kl-source-note", children: detail.sourceNote }),
+            detail.status === "stored" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-notice", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "file" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "\u539F\u6587\u4EF6\u5DF2\u5B89\u5168\u5F52\u6863" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: detail.extraction })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-content", children: detail.segments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `kl-segment ${anchor === segment.id ? "kl-cited" : ""}`, id: segment.id, "data-segment-id": segment.id, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-segment-line", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: segment.startSeconds !== void 0 ? time(segment.startSeconds) : segment.id }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { title: "\u6458\u5F55\u4E3A\u7B14\u8BB0", "aria-label": `\u6458\u5F55 ${segment.id} \u4E3A\u7B14\u8BB0`, onClick: () => setEditor({ mode: "note", source: detail, segment }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "note", size: 14 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { title: "\u590D\u5236\u6BB5\u843D\u5F15\u7528", "aria-label": `\u590D\u5236 ${segment.id} \u5F15\u7528`, onClick: () => void copy(`library://${detail.id}/${segment.id}`), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "copy", size: 14 }) })
+              ] }),
+              /^#{1,6}\s/.test(segment.text) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: segment.text.replace(/^#{1,6}\s+/, "") }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: segment.text })
+            ] }, segment.id)) }),
+            !!detail.citations.length && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-references", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: "\u6765\u6E90\u5F15\u7528" }),
+              detail.citations.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { "aria-label": `\u67E5\u770B\u5F15\u7528 ${i + 1}`, onClick: () => {
+                setAnchor(c.segmentId);
+                setSelected(c.materialId);
+              }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "file", size: 15 }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                  c.materialId.slice(0, 15),
+                  "\u2026",
+                  c.segmentId ? ` / ${c.segmentId}` : ""
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "arrow", size: 14 })
+              ] }, i))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("footer", { className: "kl-detail-footer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-live-dot" }),
+                detail.extraction
+              ] }),
+              detail.originalFile && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("a", { href: `${API}/materials/${detail.id}/original`, children: [
+                "\u4E0B\u8F7D\u539F\u59CB\u6587\u4EF6",
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "download", size: 14 })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: detail.id })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    editor && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditorDialog, { editor, categories: stats?.categories.map((c) => c.name) || [], onClose: () => setEditor(void 0), onSaved: (result) => {
+      setEditor(void 0);
+      refresh();
+      if (result.material) {
+        chooseFilter({});
+        setQuery("");
+        setSelected(result.material.id);
+        notify(result.duplicate ? "\u8D44\u6599\u5DF2\u5B58\u5728\uFF0C\u5DF2\u6253\u5F00\u539F\u8BB0\u5F55" : "\u5DF2\u4FDD\u5B58\u5230\u672C\u5730\u8D44\u6599\u5E93");
+      } else if (result.id) {
+        setSelected(result.id);
+        notify("\u8D44\u6599\u4FE1\u606F\u5DF2\u66F4\u65B0");
+      } else {
+        setShowJobs(true);
+        notify("\u7F51\u9875\u5DF2\u52A0\u5165\u91C7\u96C6\u961F\u5217");
+      }
+    } }),
+    showJobs && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog, { title: "\u91C7\u96C6\u4EFB\u52A1", description: "\u7F51\u9875\u5728\u540E\u53F0\u63D0\u53D6\u6B63\u6587\u3002\u5173\u95ED\u5E94\u7528\u540E\uFF0C\u4E0B\u6B21\u542F\u52A8\u4F1A\u6062\u590D\u672A\u5B8C\u6210\u4EFB\u52A1\u3002", onClose: () => setShowJobs(false), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-jobs", children: !jobs.length ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "kl-muted", children: "\u8FD8\u6CA1\u6709\u91C7\u96C6\u4EFB\u52A1\u3002\u6DFB\u52A0\u4E00\u4E2A\u7F51\u9875\u94FE\u63A5\u5F00\u59CB\u3002" }) : jobs.map((job) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-job", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `kl-job-status ${job.status}`, children: { queued: "\u6392\u961F\u4E2D", running: "\u63D0\u53D6\u4E2D", completed: "\u5DF2\u5B8C\u6210", failed: "\u5931\u8D25" }[job.status] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("time", { children: date(job.createdAt) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: job.url }),
+      job.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { role: job.status === "failed" ? "alert" : void 0, children: job.error }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        job.materialId && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { onClick: () => {
+          setSelected(job.materialId);
+          setShowJobs(false);
+          refresh();
+        }, children: [
+          "\u67E5\u770B\u8D44\u6599 ",
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "arrow", size: 14 })
+        ] }),
+        job.status === "failed" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => void post(`/jobs/${job.id}/retry`, {}).then(refresh).catch((e) => setError(e.message)), children: "\u91CD\u65B0\u91C7\u96C6" })
+      ] })
+    ] }, job.id)) }) }),
+    showInfo && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog, { title: "\u4F60\u7684\u8D44\u6599\uFF0C\u7531\u4F60\u4FDD\u7BA1", description: "\u5185\u5BB9\u4EE5\u666E\u901A\u6587\u4EF6\u4FDD\u5B58\uFF0C\u7D22\u5F15\u53EF\u4EE5\u91CD\u5EFA\u3002", onClose: () => setShowInfo(false), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "\u8D44\u6599\u5E93\u76EE\u5F55" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { children: stats?.root }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "\u6BCF\u4EFD\u8D44\u6599\u4FDD\u7559\u539F\u59CB\u6587\u4EF6\u3001\u6B63\u6587\u3001\u5143\u6570\u636E\u548C\u5F15\u7528\u6BB5\u843D\u3002\u5206\u7C7B\u5BF9\u5E94\u672C\u5730\u6587\u4EF6\u5939\uFF0C\u63D2\u4EF6\u5378\u8F7D\u4E0D\u4F1A\u5220\u9664\u8FD9\u4E9B\u6587\u4EF6\u3002" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: "\u672C\u7248\u672C\u53EF\u63D0\u53D6\u6587\u7AE0\u6B63\u6587\u53CA\u5B57\u5E55\uFF1B\u97F3\u89C6\u9891\u3001PDF \u7B49\u683C\u5F0F\u53EF\u4EE5\u5F52\u6863\uFF0C\u81EA\u52A8\u8F6C\u5199\u548C OCR \u5C1A\u672A\u63A5\u5165\u3002" }),
+      stats?.warnings.map((w) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { role: "alert", children: w }, w)),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "kl-secondary", onClick: () => void post("/rebuild", {}).then(() => {
+        refresh();
+        notify("\u7D22\u5F15\u5DF2\u91CD\u5EFA");
+      }).catch((e) => setError(e.message)), children: "\u4ECE\u8D44\u6599\u6587\u4EF6\u91CD\u5EFA\u7D22\u5F15" })
+    ] }) }),
+    toast && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-toast", role: "status", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "check", size: 17 }),
+      toast
+    ] })
+  ] });
+}
+function Dialog({ title, description, onClose, children }) {
+  const ref = (0, import_react.useRef)(null);
+  const closeRef = (0, import_react.useRef)(onClose);
+  closeRef.current = onClose;
+  (0, import_react.useEffect)(() => {
+    const previous = document.activeElement;
+    const timer = setTimeout(() => ref.current?.querySelector("input,textarea,button")?.focus(), 0);
+    const key = (event) => {
+      if (event.key === "Escape") closeRef.current();
+      if (event.key === "Tab") {
+        const elements = Array.from(ref.current?.querySelectorAll("button:not(:disabled),input:not(:disabled),textarea:not(:disabled),select,a[href]") || []);
+        const first = elements[0], last = elements[elements.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last?.focus();
+        }
+        if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", key);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("keydown", key);
+      previous?.focus();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-modal-backdrop", onMouseDown: (event) => {
+    if (event.target === event.currentTarget) onClose();
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-dialog", role: "dialog", "aria-modal": "true", "aria-label": title, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { "aria-label": "\u5173\u95ED\u5F39\u7A97", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "close" }) })
+    ] }),
+    children
+  ] }) });
+}
+function EditorDialog({ editor, categories, onClose, onSaved }) {
+  const editing = editor.mode === "edit";
+  const note = editor.mode === "note";
+  const source = editor.source;
+  const [type, setType] = (0, import_react.useState)("url");
+  const [title, setTitle] = (0, import_react.useState)(editing ? source?.title || "" : note && source ? `${source.title} \xB7 \u6458\u5F55` : "");
+  const [content, setContent] = (0, import_react.useState)(editor.segment ? `> ${editor.segment.text}
+
+` : "");
+  const [category, setCategory] = (0, import_react.useState)(editing ? source?.category || "\u6536\u4EF6\u7BB1" : note ? "\u77E5\u8BC6\u7B14\u8BB0" : "\u6536\u4EF6\u7BB1");
+  const [tags, setTags] = (0, import_react.useState)(editing ? source?.tags.join("\uFF0C") || "" : "");
+  const [collection, setCollection] = (0, import_react.useState)(source?.collection || "");
+  const [sourceNote, setSourceNote] = (0, import_react.useState)(editing ? source?.sourceNote || "" : "");
+  const [file, setFile] = (0, import_react.useState)();
+  const [busy, setBusy] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)("");
+  const citations = source && note ? [{ materialId: source.id, ...editor.segment ? { segmentId: editor.segment.id } : {} }] : [];
+  async function submit(event) {
+    event.preventDefault();
+    setError("");
+    setBusy(true);
+    try {
+      const data = { title, category, tags: splitTags(tags), collection, sourceNote };
+      let result;
+      if (editing) result = await post(`/materials/${source.id}`, data, "PATCH");
+      else if (note) result = await post("/notes", { ...data, content, citations });
+      else if (type === "file") {
+        if (!file) throw new Error("\u8BF7\u9009\u62E9\u4E00\u4E2A\u6587\u4EF6");
+        if (file.size > 64 * 1024 * 1024) throw new Error("\u6587\u4EF6\u8D85\u8FC7 64 MB\uFF0C\u8BF7\u5148\u62C6\u5206\u6216\u5BFC\u5165\u5B57\u5E55");
+        const base64 = await new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(String(reader.result).split(",")[1]);
+          reader.onerror = () => reject(new Error("\u65E0\u6CD5\u8BFB\u53D6\u6587\u4EF6"));
+          reader.readAsDataURL(file);
+        });
+        result = await post("/upload", { ...data, name: file.name, base64 });
+      } else result = await post("/capture", { ...data, type, content });
+      onSaved(result);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  const changeType = (value) => {
+    setType(value);
+    setContent("");
+    setError("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Dialog, { title: editing ? "\u6574\u7406\u8D44\u6599" : note ? "\u5199\u4E00\u4EFD\u77E5\u8BC6\u7B14\u8BB0" : "\u6536\u96C6\u4E00\u4EFD\u8D44\u6599", description: editing ? "\u5206\u7C7B\u4F1A\u540C\u6B65\u5230\u672C\u5730\u6587\u4EF6\u5939\uFF0C\u539F\u6587\u548C\u5F15\u7528\u4FDD\u6301\u4E0D\u53D8\u3002" : note ? "\u5199\u4E0B\u7406\u89E3\uFF0C\u4E5F\u7559\u4E0B\u5B83\u7684\u6765\u6E90\u3002" : "\u5148\u6536\u96C6\uFF0C\u518D\u6162\u6162\u6574\u7406\u3002\u6240\u6709\u5185\u5BB9\u4FDD\u5B58\u5728\u4F60\u7684\u7535\u8111\u3002", onClose: () => {
+    if (!busy) onClose();
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: submit, className: "kl-editor", children: [
+    !editing && !note && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-tabs", role: "tablist", "aria-label": "\u91C7\u96C6\u65B9\u5F0F", children: ["url", "text", "file"].map((value) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { type: "button", role: "tab", "aria-selected": type === value, className: type === value ? "active" : "", onClick: () => changeType(value), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: value === "url" ? "web" : value === "file" ? "upload" : "file", size: 17 }),
+      value === "url" ? "\u7F51\u9875\u94FE\u63A5" : value === "file" ? "\u672C\u5730\u6587\u4EF6" : "\u6587\u672C\u6458\u5F55"
+    ] }, value)) }),
+    !editing && !note && type === "url" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+      "\u7F51\u9875\u5730\u5740",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { type: "url", required: true, placeholder: "https://\u2026", value: content, onChange: (e) => setContent(e.target.value) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { children: "\u652F\u6301\u53EF\u76F4\u63A5\u8BBF\u95EE\u7684\u6587\u7AE0\u7F51\u9875\u3002\u767B\u5F55\u9875\u6216\u52A8\u6001\u9875\u9762\u53EF\u590D\u5236\u6B63\u6587\u5BFC\u5165\u3002" })
+    ] }),
+    !editing && !note && type === "file" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "kl-upload", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "upload", size: 27 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: file?.name || "\u9009\u62E9\u6216\u62D6\u5165\u6587\u4EF6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u6587\u672C\u3001HTML\u3001SRT / VTT \u5B57\u5E55\u53CA\u5176\u4ED6\u6587\u4EF6 \xB7 \u6700\u5927 64 MB" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { "aria-label": "\u9009\u62E9\u672C\u5730\u6587\u4EF6", type: "file", onChange: (e) => setFile(e.target.files?.[0]) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { children: "\u89C6\u9891\u548C PDF \u53EF\u5F52\u6863\uFF0C\u5F53\u524D\u7248\u672C\u4E0D\u4F1A\u81EA\u52A8\u8F6C\u5199\u6216 OCR\u3002" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+      "\u6807\u9898",
+      !editing && !note && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: "\u53EF\u9009" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { required: editing || note, value: title, onChange: (e) => setTitle(e.target.value), placeholder: type === "url" && !note ? "\u81EA\u52A8\u63D0\u53D6\u7F51\u9875\u6807\u9898\uFF0C\u4E5F\u53EF\u4EE5\u81EA\u5DF1\u586B\u5199" : "\u7ED9\u8FD9\u4EFD\u5185\u5BB9\u8D77\u4E2A\u540D\u5B57", maxLength: 300 })
+    ] }),
+    !editing && (note || type === "text") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+      note ? "\u7B14\u8BB0\u5185\u5BB9" : "\u6B63\u6587",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("textarea", { required: true, rows: 7, value: content, onChange: (e) => setContent(e.target.value), placeholder: note ? "\u8BB0\u5F55\u4F60\u7684\u7406\u89E3\u3001\u7ED3\u8BBA\u4E0E\u5C1A\u5F85\u9A8C\u8BC1\u7684\u95EE\u9898\u2026" : "\u7C98\u8D34\u60F3\u4FDD\u7559\u7684\u6587\u5B57\uFF0C\u652F\u6301 Markdown\u2026" })
+    ] }),
+    !!citations.length && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-citation-preview", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "file", size: 16 }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+        "\u5F15\u7528\uFF1A",
+        source.title,
+        editor.segment ? ` / ${editor.segment.id}` : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "kl-form-grid", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+        "\u5206\u7C7B",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { list: "kl-categories", value: category, onChange: (e) => setCategory(e.target.value), placeholder: "\u4F8B\u5982 \u6280\u672F/AI" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("datalist", { id: "kl-categories", children: categories.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: c }, c)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+        "\u4E13\u9898",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: "\u53EF\u9009" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { value: collection, onChange: (e) => setCollection(e.target.value), placeholder: "\u56F4\u7ED5\u4E00\u4E2A\u95EE\u9898\u7EC4\u7EC7\u8D44\u6599" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+      "\u6807\u7B7E",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: "\u53EF\u9009" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { value: tags, onChange: (e) => setTags(e.target.value), placeholder: "\u7528\u9017\u53F7\u5206\u9694\uFF0C\u4F8B\u5982\uFF1A\u5F85\u8BFB\uFF0CRAG\uFF0C\u5B9E\u8DF5" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { children: [
+      "\u6765\u6E90\u5907\u6CE8",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: "\u53EF\u9009" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { value: sourceNote, onChange: (e) => setSourceNote(e.target.value), placeholder: "\u4E3A\u4EC0\u4E48\u503C\u5F97\u4FDD\u5B58\uFF0C\u6216\u8005\u5B83\u6765\u81EA\u54EA\u91CC" })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "kl-form-error", role: "alert", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("footer", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kl-live-dot" }),
+        "\u4EC5\u4FDD\u5B58\u5728\u672C\u5730"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "kl-secondary", disabled: busy, onClick: onClose, children: "\u53D6\u6D88" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("button", { className: "kl-primary", type: "submit", disabled: busy, children: [
+        busy ? "\u4FDD\u5B58\u4E2D\u2026" : editing ? "\u4FDD\u5B58\u4FEE\u6539" : note ? "\u4FDD\u5B58\u7B14\u8BB0" : type === "url" ? "\u5F00\u59CB\u91C7\u96C6" : "\u4FDD\u5B58\u8D44\u6599",
+        !busy && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "arrow", size: 16 })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/ui/style.css
+var style_default = `/* Harness owns the palette and font. Fallbacks are for the standalone preview. */
+.kl-app {
+  --kl-bg: var(--dsw-alias-bg-base, light-dark(#fff, #191a1e));
+  --kl-panel: var(--dsw-alias-bg-layer-1, light-dark(#fff, #24252a));
+  --kl-sidebar: var(--dsw-specific-sidebar-fill, light-dark(#f8f9fa, #202126));
+  --kl-ink: var(--dsw-alias-label-primary, light-dark(#18191d, #f3f4f6));
+  --kl-secondary: var(--dsw-alias-label-secondary, light-dark(#555963, #c0c2c9));
+  --kl-muted: var(--dsw-alias-label-tertiary, light-dark(#858991, #979ba5));
+  --kl-caption: var(--dsw-alias-label-caption, light-dark(#a3a7b0, #737781));
+  --kl-line: var(--dsw-alias-border-l3, light-dark(#0000001f, #ffffff29));
+  --kl-divider: var(--dsw-alias-border-l1, light-dark(#0000000a, #ffffff0f));
+  --kl-hover: var(--dsw-alias-interactive-bg-hover, light-dark(#2631480f, #ffffff14));
+  --kl-active: var(--dsw-alias-interactive-bg-active, light-dark(#2631481a, #ffffff24));
+  --kl-primary: var(--dsw-alias-button-primary-fill, light-dark(#14151a, #f3f4f6));
+  --kl-primary-hover: var(--dsw-alias-button-primary-hover, light-dark(#373941, #dfe1e6));
+  --kl-on-primary: var(--dsw-alias-label-primary-foreground, light-dark(#fff, #14151a));
+  --kl-focus: var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary, #4d6bfe));
+  --kl-link: var(--dsw-alias-link, light-dark(#4162e7, #91a2ff));
+  --kl-success: var(--dsw-alias-state-success-primary, #36a774);
+  --kl-error: var(--dsw-alias-state-error-primary, light-dark(#c63e43, #ff8589));
+  --kl-warn: var(--dsw-alias-state-warn-label, light-dark(#926316, #d5ad62));
+  --kl-radius: var(--dsw-radius-md, 12px);
+  --kl-radius-lg: var(--dsw-radius-lg, 16px);
+  --kl-gutter: clamp(24px, 4cqi, 48px);
+  font-family: var(--dsw-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
+  font-size: 14px;
+  line-height: 1.6;
+  font-synthesis: none;
+  color: var(--kl-ink);
+  background: var(--kl-bg);
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+  container: knowledge-library / inline-size;
+}
+.kl-app, .kl-app * { box-sizing: border-box; }
+.kl-preview { margin: 0; color-scheme: light dark; }
+.kl-preview > #root > .kl-app { height: 100dvh; }
+.kl-app button, .kl-app input, .kl-app textarea, .kl-app select { font: inherit; color: inherit; }
+.kl-app button, .kl-app a { -webkit-tap-highlight-color: transparent; }
+.kl-app button { cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; }
+.kl-app button:disabled { opacity: .5; cursor: not-allowed; }
+.kl-app :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--kl-focus); outline-offset: 2px; }
+.kl-app input::placeholder, .kl-app textarea::placeholder { color: var(--kl-caption); }
+.kl-app svg { flex-shrink: 0; }
+.kl-app :is(time, small) { font-variant-numeric: tabular-nums; }
+.kl-app :is(.kl-list, .kl-nav, .kl-detail, .kl-dialog) {
+  scrollbar-width: thin;
+  scrollbar-color: var(--dsw-alias-scrollbar-bg-l2, #8885) transparent;
+  overscroll-behavior: contain;
+}
+.kl-workspace { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+.kl-primary, .kl-secondary {
+  min-height: 32px; border-radius: var(--kl-radius-lg); padding: 5px 12px; font-size: 13px !important;
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
+}
+.kl-app .kl-primary { color: var(--kl-on-primary); background: var(--kl-primary); border: 1px solid transparent; }
+.kl-app .kl-primary:hover:not(:disabled) { background: var(--kl-primary-hover); }
+.kl-secondary { background: transparent; border: .5px solid var(--kl-line); }
+.kl-secondary:hover:not(:disabled) { background: var(--kl-hover); }
+.kl-app .kl-icon-button {
+  width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 8px; flex: none;
+  display: inline-flex; align-items: center; justify-content: center; color: var(--kl-muted); background: transparent;
+}
+.kl-app .kl-icon-button:hover { color: var(--kl-ink); background: var(--kl-hover); }
+.kl-header { padding: 28px var(--kl-gutter) 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+[data-platform="darwin"] .kl-header { padding-top: calc(28px + var(--dsh-frame-top-clearance, 0px)); }
+.kl-header h1 { margin: 0; min-width: 0; font-size: 20px; line-height: 28px; font-weight: 500; overflow-wrap: anywhere; }
+.kl-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
+.kl-navigation { padding: 0 var(--kl-gutter) 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.kl-navigation nav { display: flex; flex-wrap: wrap; gap: 8px 12px; }
+.kl-navigation button { border: 0; border-radius: 14px; background: transparent; color: var(--kl-muted); padding: 3px 10px; min-height: 28px; }
+.kl-navigation button:hover, .kl-navigation button[aria-pressed="true"], .kl-navigation button[aria-expanded="true"] { background: var(--kl-hover); color: var(--kl-ink); }
+.kl-navigation .kl-directory-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
+.kl-toolbar { padding: 0 var(--kl-gutter) 16px; display: flex; gap: 12px; align-items: center; }
+.kl-search { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; height: 36px; border: .5px solid var(--kl-line); border-radius: var(--kl-radius); padding: 0 10px; color: var(--kl-caption); }
+.kl-search > svg { width: 16px; height: 16px; }
+.kl-search input { width: 0; min-width: 0; flex: 1; border: 0; padding: 0; height: 100%; background: transparent; color: var(--kl-ink); font-size: 14px; }
+.kl-app .kl-search input:focus-visible { outline: none; }
+.kl-search:focus-within { border-color: var(--kl-focus); }
+.kl-search kbd { color: var(--kl-caption); border: .5px solid var(--kl-line); border-radius: 4px; padding: 0 4px; font-family: inherit; font-size: 10px; line-height: 18px; white-space: nowrap; }
+.kl-app .kl-job-button { border: 0; border-radius: 8px; background: transparent; display: flex; align-items: center; gap: 6px; color: var(--kl-muted); padding: 6px; min-height: 32px; white-space: nowrap; font-size: 13px; }
+.kl-job-button:hover { background: var(--kl-hover); }
+.kl-job-button i { width: 5px; height: 5px; border-radius: 50%; corner-shape: round; background: var(--kl-error); }
+.kl-app .kl-job-button.has-jobs { color: var(--kl-link); }
+.kl-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 var(--kl-gutter) 12px; color: var(--kl-muted); font-size: 12px; }
+.kl-filterbar > span { min-width: 0; overflow-wrap: anywhere; }
+.kl-filterbar b { font-weight: 400; }
+.kl-filterbar > div { display: flex; align-items: center; gap: 16px; flex: none; }
+.kl-filterbar select { background: var(--kl-bg); color: var(--kl-muted); border: 0; border-radius: 6px; padding: 3px; max-width: 110px; font-size: 12px; }
+.kl-body { position: relative; display: flex; flex: 1; min-height: 0; overflow: hidden; }
+.kl-list { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 calc(var(--kl-gutter) - 8px) 24px; }
+.kl-body.with-detail .kl-list { flex: 0 0 38%; padding: 0 16px 24px calc(var(--kl-gutter) - 8px); }
+.kl-item { width: 100%; display: block; text-align: left; padding: 14px 12px; margin-bottom: 2px; border: 0; border-radius: var(--kl-radius); background: transparent; }
+.kl-item:hover, .kl-item.selected { background: var(--kl-hover); }
+.kl-item-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 5px; }
+.kl-type { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--kl-muted); }
+.kl-item time { color: var(--kl-muted); font-size: 12px; }
+.kl-item h2 { margin: 0 0 5px; font-size: 14px; line-height: 23px; font-weight: 500; overflow-wrap: anywhere; }
+.kl-item > p { margin: 0 0 10px; font-size: 13px; line-height: 21px; color: var(--kl-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
+.kl-item-bottom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.kl-category { display: flex; align-items: center; gap: 4px; max-width: 60%; overflow: hidden; white-space: nowrap; color: var(--kl-muted); font-size: 11px; }
+.kl-chip { padding: 1px 6px; border-radius: 5px; background: var(--kl-hover); color: var(--kl-secondary); font-size: 11px; max-width: 100%; overflow-wrap: anywhere; }
+.kl-item-bottom > svg { margin-left: auto; color: var(--kl-caption); }
+.kl-stored { color: var(--kl-warn); font-size: 11px; }
+.kl-load-more { width: 100%; padding: 16px; border: 0; border-radius: 8px; background: transparent; color: var(--kl-muted); font-size: 13px; }
+.kl-load-more:hover { background: var(--kl-hover); }
+
+/* An optional directory leaves the default view as uncluttered as native pages. */
+.kl-nav { width: 200px; max-width: 80%; flex: none; padding: 12px; margin-left: var(--kl-gutter); border-right: .5px solid var(--kl-line); background: var(--kl-bg); overflow-y: auto; display: flex; flex-direction: column; }
+.kl-directory-title { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; }
+.kl-nav-section { margin-top: 20px; }
+.kl-nav-label { padding: 0 8px 8px; color: var(--kl-muted); font-size: 12px; }
+.kl-nav-row { width: 100%; display: flex; align-items: center; gap: 8px; background: transparent; border: 0; border-radius: 8px; padding: 8px; text-align: left; min-width: 0; font-size: 13px !important; }
+.kl-nav-row > span:not(.kl-collection-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.kl-nav-row > svg { color: var(--kl-muted); }
+.kl-nav-row small { margin-left: auto; color: var(--kl-muted); font-size: 11px; }
+.kl-nav button:hover, .kl-nav button[aria-pressed="true"] { background: var(--kl-hover); }
+.kl-nav-hint { color: var(--kl-muted); font-size: 12px; margin: 0; padding: 0 8px; }
+.kl-collection-dot { width: 6px; height: 6px; border-radius: 50%; corner-shape: round; border: 1px solid var(--kl-muted); flex: none; margin: 0 5px; }
+.kl-tag-cloud { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
+.kl-tag-cloud button { background: transparent; color: var(--kl-muted); border: 0; border-radius: 6px; padding: 3px 6px; font-size: 12px; max-width: 100%; overflow-wrap: anywhere; }
+.kl-nav-bottom { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 28px 8px 8px; color: var(--kl-muted); font-size: 11px; }
+.kl-live-dot { width: 5px; height: 5px; border-radius: 50%; corner-shape: round; background: var(--kl-success); display: inline-block; flex-shrink: 0; }
+.kl-detail { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; border-left: .5px solid var(--kl-line); background: var(--kl-bg); }
+.kl-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 20px; border-bottom: .5px solid var(--kl-divider); position: sticky; top: 0; background: var(--kl-bg); z-index: 1; }
+.kl-detail-toolbar > div { display: flex; align-items: center; gap: 4px; }
+.kl-detail-toolbar button, .kl-detail-toolbar a { display: flex; align-items: center; gap: 5px; background: transparent; border: 0; border-radius: 8px; min-height: 32px; padding: 6px 8px; color: var(--kl-muted); text-decoration: none; font-size: 12px; white-space: nowrap; }
+.kl-detail-toolbar :is(button, a):hover { color: var(--kl-ink); background: var(--kl-hover); }
+.kl-detail article { max-width: 800px; margin: 0 auto; padding: 24px 28px 40px; }
+.kl-detail-kicker { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--kl-muted); overflow-wrap: anywhere; }
+.kl-detail-kicker span + span::before { content: "/"; margin-right: 8px; color: var(--kl-caption); }
+.kl-detail article > h2 { margin: 10px 0 12px; font-size: 20px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
+.kl-source { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--kl-muted); font-size: 12px; overflow-wrap: anywhere; }
+.kl-source a { color: var(--kl-link); display: flex; align-items: center; gap: 4px; text-decoration: none; }
+.kl-source a:hover { text-decoration: underline; }
+.kl-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
+.kl-source-note { border-left: 2px solid var(--kl-line); padding: 10px 12px; font-size: 13px; line-height: 1.7; color: var(--kl-secondary); background: var(--kl-sidebar); margin: 20px 0; overflow-wrap: anywhere; }
+.kl-content { margin-top: 24px; }
+.kl-segment { margin-bottom: 20px; scroll-margin-top: 64px; }
+.kl-segment.kl-cited { background: var(--kl-hover); box-shadow: 0 0 0 8px var(--kl-hover); border-radius: 4px; }
+.kl-segment-line { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; color: var(--kl-muted); font-variant-numeric: tabular-nums; }
+.kl-segment-line > span { margin-right: auto; }
+.kl-segment-line button { display: grid; place-items: center; width: 26px; height: 26px; background: transparent; border: 0; border-radius: 6px; color: var(--kl-muted); opacity: .6; padding: 4px; }
+.kl-segment:hover button, .kl-segment:focus-within button { opacity: 1; }
+.kl-segment-line button:hover { background: var(--kl-hover); }
+.kl-segment p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dsh-content-font-size, 14px); line-height: 1.8; margin: 0; color: var(--kl-ink); }
+.kl-segment h3 { font-size: calc(16px + var(--dsh-content-font-delta, 0px)); line-height: 1.7; margin: 0; font-weight: 500; overflow-wrap: anywhere; }
+.kl-detail-footer { margin-top: 32px; padding-top: 16px; border-top: .5px solid var(--kl-line); font-size: 11px; color: var(--kl-muted); }
+.kl-detail-footer > div { display: flex; gap: 6px; align-items: center; }
+.kl-detail-footer a { display: flex; align-items: center; gap: 6px; color: var(--kl-link); text-decoration: none; margin: 12px 0; }
+.kl-detail-footer code { display: block; font-size: 10px; margin-top: 12px; overflow-wrap: anywhere; }
+.kl-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; text-align: center; color: var(--kl-muted); }
+.kl-empty > svg { color: var(--kl-caption); margin-bottom: 4px; }
+.kl-empty h2 { font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0; color: var(--kl-muted); }
+.kl-empty p { font-size: 13px; margin: 0; }
+.kl-empty .kl-secondary { margin-top: 12px; color: var(--kl-ink); }
+.kl-notice { display: flex; gap: 10px; padding: 14px; background: var(--kl-sidebar); margin-top: 20px; border-radius: 10px; color: var(--kl-secondary); }
+.kl-notice strong { font-size: 13px; font-weight: 500; }
+.kl-notice p { font-size: 12px; line-height: 1.7; margin: 4px 0 0; }
+.kl-references { background: var(--kl-sidebar); padding: 14px; border-radius: 10px; margin-top: 24px; }
+.kl-references h3 { font-size: 13px; font-weight: 500; margin: 0 0 8px; }
+.kl-references button { display: flex; gap: 7px; align-items: center; border: 0; background: transparent; color: var(--kl-link); border-radius: 6px; font-size: 12px; padding: 6px; width: 100%; text-align: left; }
+.kl-references button:hover { background: var(--kl-hover); }
+.kl-references button > svg:last-child { margin-left: auto; }
+.kl-references button > span { min-width: 0; overflow-wrap: anywhere; }
+
+/* Dialogs remain descendants of .kl-app, so they inherit the same theme. */
+.kl-modal-backdrop { position: fixed; inset: 0; background: var(--dsw-alias-bg-mask-1, #0006); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
+.kl-dialog { background: var(--kl-panel); color: var(--kl-ink); width: 580px; max-width: 100%; max-height: calc(100dvh - 48px); overflow: auto; border: .5px solid var(--kl-line); border-radius: var(--kl-radius-lg); box-shadow: var(--dsw-elevation-prominent, 0 16px 64px #0003); animation: kl-enter .15s ease-out; }
+.kl-dialog > header { padding: 24px 24px 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
+.kl-dialog > header h2 { margin: 0 0 6px; font-size: 18px; line-height: 26px; font-weight: 500; }
+.kl-dialog > header p { margin: 0; color: var(--kl-muted); font-size: 12px; line-height: 1.7; }
+.kl-dialog > header > button { border: 0; border-radius: 8px; background: transparent; color: var(--kl-muted); padding: 4px; display: flex; }
+.kl-dialog > header > button:hover { background: var(--kl-hover); }
+.kl-editor { padding: 0 24px; }
+.kl-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
+.kl-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; color: var(--kl-muted); border-radius: 14px; min-height: 32px; padding: 5px 8px; font-size: 13px; }
+.kl-tabs button:hover, .kl-tabs button.active { background: var(--kl-hover); color: var(--kl-ink); }
+.kl-editor label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--kl-secondary); margin-bottom: 16px; position: relative; min-width: 0; }
+.kl-editor label > em { position: absolute; right: 0; top: 0; font-size: 11px; color: var(--kl-muted); font-style: normal; }
+.kl-editor input, .kl-editor textarea { width: 100%; background: transparent; border: .5px solid var(--kl-line); border-radius: 10px; padding: 9px 11px; color: var(--kl-ink); font-size: 13px; }
+.kl-editor textarea { resize: vertical; line-height: 1.7; min-height: 120px; max-height: 280px; }
+.kl-editor label > small { color: var(--kl-muted); font-size: 11px; line-height: 1.7; }
+.kl-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
+.kl-editor footer { display: flex; align-items: center; gap: 8px; margin: 20px -24px 0; padding: 16px 24px; border-top: .5px solid var(--kl-divider); }
+.kl-editor footer > span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--kl-muted); margin-right: auto; }
+.kl-editor .kl-upload { align-items: center; gap: 10px; border: 1px dashed var(--kl-line); background: var(--kl-sidebar); padding: 22px 16px; border-radius: var(--kl-radius); text-align: center; }
+.kl-upload > strong { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
+.kl-upload > span { font-size: 11px; color: var(--kl-muted); }
+.kl-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.kl-upload:focus-within { outline: 2px solid var(--kl-focus); outline-offset: 2px; }
+.kl-citation-preview { display: flex; gap: 8px; align-items: center; background: var(--kl-sidebar); font-size: 12px; color: var(--kl-secondary); padding: 10px; border-radius: 8px; margin-bottom: 18px; overflow-wrap: anywhere; }
+.kl-jobs, .kl-info { padding: 0 24px 24px; }
+.kl-muted { color: var(--kl-muted); font-size: 13px; }
+.kl-job { border-bottom: .5px solid var(--kl-line); padding: 0 0 18px; margin-bottom: 18px; }
+.kl-job:last-child { margin-bottom: 0; }
+.kl-job > div { display: flex; justify-content: space-between; align-items: center; }
+.kl-job time { font-size: 11px; color: var(--kl-muted); }
+.kl-job > strong { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 400; margin: 12px 0; }
+.kl-job > p { font-size: 12px; color: var(--kl-error); line-height: 1.7; }
+.kl-job button { display: flex; align-items: center; gap: 4px; color: var(--kl-link); font-size: 12px; border: 0; background: transparent; border-radius: 6px; padding: 4px; }
+.kl-job button:hover { background: var(--kl-hover); }
+.kl-job-status { font-size: 11px; border-radius: 6px; padding: 3px 7px; background: var(--kl-hover); color: var(--kl-secondary); }
+.kl-job-status.failed { color: var(--kl-error); }
+.kl-job-status.running { color: var(--kl-link); }
+.kl-info label { display: block; font-size: 12px; color: var(--kl-muted); margin-bottom: 8px; }
+.kl-info code { display: block; overflow-wrap: anywhere; background: var(--kl-sidebar); padding: 12px; border-radius: 8px; font-size: 12px; }
+.kl-info p { font-size: 13px; line-height: 1.8; color: var(--kl-secondary); margin: 16px 0; }
+.kl-error, .kl-form-error { background: var(--kl-sidebar); color: var(--kl-error); font-size: 13px; line-height: 1.7; padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; }
+.kl-error { display: flex; align-items: center; gap: 12px; margin: 0 var(--kl-gutter) 14px; }
+.kl-error button { margin-left: auto; border: 0; background: transparent; color: inherit; display: flex; padding: 4px; }
+.kl-form-error { margin-bottom: 14px; }
+.kl-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--dsw-alias-toast-bg, #303136); color: var(--dsw-alias-toast-label, #fff); padding: 10px 16px; display: flex; gap: 8px; align-items: center; border-radius: 12px; box-shadow: 0 4px 20px #0002; font-size: 13px; z-index: 1100; }
+.kl-spinner { height: 20px; width: 20px; border: 2px solid var(--kl-line); border-top-color: var(--kl-muted); border-radius: 50%; corner-shape: round; animation: kl-spin 1s linear infinite; }
+@keyframes kl-spin { to { transform: rotate(360deg); } }
+@keyframes kl-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+
+/* Respond to the plugin's available space, including the host's side panels. */
+@container knowledge-library (max-width: 900px) {
+  .kl-body.with-detail .kl-list { display: none; }
+  .kl-detail { border-left: 0; }
+  .kl-detail article { padding: 24px var(--kl-gutter) 36px; }
+  .kl-detail-toolbar { padding: 8px calc(var(--kl-gutter) - 8px); }
+  .kl-nav { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; margin: 0; width: 240px; border-top: .5px solid var(--kl-line); box-shadow: 8px 0 24px #0001; }
+}
+@container knowledge-library (max-width: 520px) {
+  .kl-header { padding: 20px 20px 18px; flex-wrap: wrap; gap: 12px; }
+  .kl-header h1 { font-size: 20px; }
+  .kl-header-actions { margin-left: auto; }
+  .kl-navigation { padding: 0 20px 12px; flex-wrap: wrap; gap: 8px; }
+  .kl-navigation nav { gap: 4px; }
+  .kl-navigation .kl-directory-toggle { margin-left: auto; }
+  .kl-toolbar { padding: 0 20px 12px; gap: 4px; }
+  .kl-search kbd, .kl-job-button span, .kl-sort-label { display: none; }
+  .kl-filterbar { padding: 0 20px 10px; }
+  .kl-list { padding: 0 12px 16px; }
+  .kl-empty { padding: 40px 12px; }
+  .kl-detail article { padding: 20px; }
+  .kl-detail-toolbar { padding: 8px 12px; }
+  .kl-error { margin: 0 20px 12px; }
+}
+/* Fixed dialogs use viewport width even when the host panel is narrow. */
+@media (max-width: 600px) {
+  .kl-modal-backdrop { padding: 12px; }
+  .kl-dialog { max-height: calc(100dvh - 24px); }
+  .kl-dialog > header { padding: 20px 18px 16px; }
+  .kl-editor { padding: 0 18px; }
+  .kl-editor footer { margin-left: -18px; margin-right: -18px; padding: 14px 18px; }
+  .kl-editor footer > span { font-size: 10px; }
+  .kl-tabs { gap: 4px; }
+  .kl-tabs button { padding: 5px; font-size: 12px; }
+  .kl-form-grid { gap: 12px; }
+  .kl-jobs, .kl-info { padding: 0 18px 20px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kl-app * { animation: none !important; transition: none !important; }
+}
+`;
+
+// src/client.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var inject = ["slots"];
+function apply(ctx) {
+  ctx.effect(() => {
+    const style = document.createElement("style");
+    style.dataset.plugin = "dsh-knowledge-library";
+    style.textContent = style_default;
+    document.head.append(style);
+    return () => style.remove();
+  });
+  ctx.slots.inject("main", () => ctx.slots.register({ name: "main", key: "knowledge-library" }, () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(App, {})));
+  ctx.slots.inject("sidebar.panellist", () => ctx.slots.register({
+    name: "sidebar.panellist",
+    id: "knowledge-library",
+    order: 20,
+    label: "\u8D44\u6599\u5E93"
+  }, () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LibraryIcon, { size: 20 })));
+}
+
+return module.exports;}});