@dawn0608/dsh-skill-manager 0.0.0-stage → 0.1.1

package/lib/client.js

@@ -0,0 +1,667 @@
+window.__ModuleLoader__.load({
+  id: "@dawn0608/dsh-skill-manager",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+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/index.js
+var index_exports = {};
+__export(index_exports, {
+  apply: () => apply,
+  inject: () => inject
+});
+module.exports = __toCommonJS(index_exports);
+var import_react3 = require("react");
+var import_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+
+// icon.svg
+var icon_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="36" height="36">%0A  <path d="M18 9 27 14v8l-9 5-9-5v-8Z"%0A        fill="none" stroke="%23527ee8" stroke-width="2" stroke-linejoin="round"/>%0A  <path d="m18 13.5 1.5 3 3 1.5-3 1.5-1.5 3-1.5-3-3-1.5 3-1.5Z" fill="%23527ee8"/>%0A</svg>%0A';
+
+// src/client/i18n.js
+var NS = "skillManager";
+var DICTS = {
+  en: {
+    title: "Skills",
+    search: "Search skills",
+    imported: "Imported",
+    builtin: "Built-in skills",
+    self: "Self-authored skills",
+    "third-party": "Third-party skills",
+    loading: "Loading skills\u2026",
+    empty: "No skills to display.",
+    noMatch: "No skills match your search.",
+    shadowed: "Shadowed",
+    openDetail: "View {name}",
+    switchLabel: "Enable {name}",
+    back: "Back to Skills",
+    "origin-builtin": "Built-in",
+    "origin-self": "Self-authored",
+    "origin-third-party": "Third-party",
+    unknownOrigin: "Origin unconfirmed",
+    openRepository: "Open original repository {repository}",
+    preview: "SKILL.md preview",
+    loadingPreview: "Loading SKILL.md\u2026",
+    retry: "Retry",
+    copy: "Copy",
+    copied: "Copied",
+    codeBlock: "Code block",
+    wrap: "Wrap lines",
+    unwrap: "Stop wrapping lines",
+    footnotes: "Footnotes",
+    uninstall: "Uninstall",
+    uninstallLabel: "Uninstall {name}",
+    uninstallTitle: "Uninstall skill?",
+    uninstallHint: "Remove the imported copy of \u201C{name}\u201D from Harness?",
+    cancel: "Cancel",
+    saving: "Saving\u2026",
+    invalid: "The request is invalid.",
+    conflict: "The skill catalog changed. Wait for the list to refresh and try again.",
+    sharedConflict: "A shared skill has conflicting settings or a matching name in another location.",
+    sharedUnavailable: "Could not sync a shared skill. The background service will retry.",
+    "not-found": "This skill could not be found.",
+    unavailable: "Could not read from or connect to Harness.",
+    forbidden: "This page does not have permission to perform the action.",
+    internal: "The operation failed. Check the Harness logs.",
+    incomplete: "The skill catalog is incomplete. This page will retry automatically."
+  },
+  zh: {
+    title: "\u6280\u80FD",
+    search: "\u641C\u7D22\u6280\u80FD",
+    imported: "\u5DF2\u5BFC\u5165",
+    builtin: "\u5185\u7F6E\u6280\u80FD",
+    self: "\u81EA\u5EFA\u6280\u80FD",
+    "third-party": "\u7B2C\u4E09\u65B9\u6280\u80FD",
+    loading: "\u6B63\u5728\u52A0\u8F7D\u6280\u80FD\u2026",
+    empty: "\u6682\u65E0\u53EF\u663E\u793A\u7684\u6280\u80FD\u3002",
+    noMatch: "\u6CA1\u6709\u7B26\u5408\u641C\u7D22\u6761\u4EF6\u7684\u6280\u80FD\u3002",
+    shadowed: "\u5DF2\u88AB\u8986\u76D6",
+    openDetail: "\u67E5\u770B {name}",
+    switchLabel: "\u542F\u7528 {name}",
+    back: "\u8FD4\u56DE\u6280\u80FD\u5217\u8868",
+    "origin-builtin": "\u5185\u7F6E",
+    "origin-self": "\u81EA\u5EFA",
+    "origin-third-party": "\u7B2C\u4E09\u65B9",
+    unknownOrigin: "\u5F52\u5C5E\u5F85\u786E\u8BA4",
+    openRepository: "\u67E5\u770B\u539F\u4ED3\u5E93 {repository}",
+    preview: "SKILL.md \u9884\u89C8",
+    loadingPreview: "\u6B63\u5728\u52A0\u8F7D SKILL.md\u2026",
+    retry: "\u91CD\u8BD5",
+    copy: "\u590D\u5236",
+    copied: "\u5DF2\u590D\u5236",
+    codeBlock: "\u4EE3\u7801\u5757",
+    wrap: "\u81EA\u52A8\u6362\u884C",
+    unwrap: "\u53D6\u6D88\u81EA\u52A8\u6362\u884C",
+    footnotes: "\u811A\u6CE8",
+    uninstall: "\u5378\u8F7D",
+    uninstallLabel: "\u5378\u8F7D {name}",
+    uninstallTitle: "\u5378\u8F7D\u6280\u80FD\uFF1F",
+    uninstallHint: "\u4ECE Harness \u4E2D\u79FB\u9664\u6280\u80FD\u300C{name}\u300D\u7684\u5BFC\u5165\u526F\u672C\uFF1F",
+    cancel: "\u53D6\u6D88",
+    saving: "\u6B63\u5728\u4FDD\u5B58\u2026",
+    invalid: "\u8BF7\u6C42\u65E0\u6548\u3002",
+    conflict: "\u6280\u80FD\u5217\u8868\u5DF2\u53D8\u5316\u3002\u8BF7\u7B49\u5F85\u5217\u8868\u5237\u65B0\u540E\u91CD\u8BD5\u3002",
+    sharedConflict: "\u5171\u4EAB\u6280\u80FD\u5B58\u5728\u8BBE\u7F6E\u51B2\u7A81\u6216\u540C\u540D\u6761\u76EE\u3002",
+    sharedUnavailable: "\u5171\u4EAB\u6280\u80FD\u540C\u6B65\u5931\u8D25\u3002\u540E\u53F0\u4F1A\u81EA\u52A8\u91CD\u8BD5\u3002",
+    "not-found": "\u627E\u4E0D\u5230\u6B64\u6280\u80FD\u3002",
+    unavailable: "\u65E0\u6CD5\u8FDE\u63A5 Harness \u6216\u8BFB\u53D6\u6570\u636E\u3002",
+    forbidden: "\u5F53\u524D\u9875\u9762\u6CA1\u6709\u6267\u884C\u6B64\u64CD\u4F5C\u7684\u6743\u9650\u3002",
+    internal: "\u64CD\u4F5C\u5931\u8D25\uFF0C\u8BF7\u67E5\u770B Harness \u65E5\u5FD7\u3002",
+    incomplete: "\u6280\u80FD\u5217\u8868\u4E0D\u5B8C\u6574\u3002\u9875\u9762\u4F1A\u81EA\u52A8\u91CD\u8BD5\u3002"
+  }
+};
+function translateFrom(dict, key, params) {
+  const template = Object.hasOwn(dict, key) ? dict[key] : DICTS.en.internal;
+  return template.replace(/\{(\w+)\}/g, (match, name) => params?.[name] ?? match);
+}
+function createTranslator(locale) {
+  const translate = locale.bind(NS);
+  return (key, params) => {
+    const value = translate(key, params);
+    if (typeof value === "string" && value !== key && value !== NS + "." + key) return value;
+    const language = locale.getSnapshot().active?.toLowerCase().startsWith("zh") ? "zh" : "en";
+    return translateFrom(DICTS[language], key, params);
+  };
+}
+
+// src/client/page.js
+var import_react2 = require("react");
+
+// src/client/api.js
+var SkillError = class extends Error {
+  constructor(code) {
+    super(code);
+    this.code = code;
+  }
+};
+var HOST_ERRORS = /* @__PURE__ */ new Set([
+  "invalid",
+  "conflict",
+  "not-found",
+  "unavailable",
+  "forbidden",
+  "internal",
+  "incomplete"
+]);
+async function request(body, signal, fetchImpl = globalThis.fetch) {
+  let response;
+  try {
+    response = await fetchImpl("api/skill-manager", {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        "content-type": "application/json",
+        "x-dsh-skill-manager": "1"
+      },
+      cache: "no-store",
+      credentials: "same-origin",
+      body: JSON.stringify(body),
+      signal
+    });
+  } catch {
+    throw new SkillError("unavailable");
+  }
+  const result = await response.json().catch(() => null);
+  if (result?.ok === false && HOST_ERRORS.has(result.code)) throw new SkillError(result.code);
+  if (response.ok && result?.ok === true) return result.value;
+  throw new SkillError([401, 403].includes(response.status) ? "forbidden" : "unavailable");
+}
+
+// src/client/catalog.js
+function createCatalog(send = request) {
+  const listeners = /* @__PURE__ */ new Set();
+  let snapshot = {
+    skills: null,
+    listError: null,
+    mutationError: null,
+    busy: false,
+    savingId: null
+  };
+  let reading;
+  let timer;
+  let stopped = false;
+  let hasCompleteCatalog = false;
+  function publish(patch) {
+    snapshot = { ...snapshot, ...patch };
+    for (const listener of listeners) listener();
+  }
+  function cancelRefresh() {
+    reading?.abort();
+    reading = void 0;
+  }
+  async function refresh() {
+    if (snapshot.busy || stopped) return;
+    cancelRefresh();
+    const pending = new AbortController();
+    reading = pending;
+    try {
+      const result = await send(
+        { action: "list", workspaceId: null },
+        AbortSignal.any([pending.signal, AbortSignal.timeout(8e3)])
+      );
+      if (reading !== pending) return;
+      if (!Array.isArray(result?.skills) || typeof result.complete !== "boolean") {
+        throw new SkillError("unavailable");
+      }
+      if (result.complete) {
+        hasCompleteCatalog = true;
+        publish({ skills: result.skills, listError: result.syncError ?? null });
+      } else if (!hasCompleteCatalog) {
+        publish({ skills: result.skills, listError: "incomplete" });
+      } else {
+        publish({ listError: "incomplete" });
+      }
+    } catch (error) {
+      if (reading === pending) publish({ listError: error.code ?? "unavailable" });
+    } finally {
+      if (reading === pending) reading = void 0;
+    }
+  }
+  async function mutate(action) {
+    if (snapshot.busy || stopped) return false;
+    cancelRefresh();
+    publish({ busy: true, savingId: action.action === "setEnabled" ? action.id : null, mutationError: null });
+    try {
+      await send({ ...action, workspaceId: null }, AbortSignal.timeout(3e4));
+      let { skills } = snapshot;
+      if (skills && action.action === "setEnabled") {
+        skills = skills.map((skill) => skill.id === action.id ? { ...skill, enabled: action.enabled } : skill);
+      } else if (skills && action.action === "remove") {
+        skills = skills.filter((skill) => skill.id !== action.id);
+      }
+      publish({ skills, busy: false, savingId: null });
+      void refresh();
+      return true;
+    } catch (error) {
+      publish({ mutationError: error.code ?? "unavailable", busy: false, savingId: null });
+      if (error.code === "conflict" || error.code === "not-found") void refresh();
+      return false;
+    }
+  }
+  return {
+    getSnapshot: () => snapshot,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    refresh,
+    mutate,
+    clearMutationError() {
+      if (snapshot.mutationError) publish({ mutationError: null });
+    },
+    start() {
+      if (timer !== void 0) return;
+      stopped = false;
+      void refresh();
+      timer = setInterval(() => {
+        if (!reading) void refresh();
+      }, 4e3);
+    },
+    stop() {
+      stopped = true;
+      clearInterval(timer);
+      timer = void 0;
+      cancelRefresh();
+    }
+  };
+}
+
+// src/client/dialog.js
+var import_react = require("react");
+function Modal({ title, busy, close, children }) {
+  const ref = (0, import_react.useRef)(null);
+  const titleId = (0, import_react.useId)();
+  (0, import_react.useLayoutEffect)(() => {
+    const dialog = ref.current;
+    dialog.showModal();
+    dialog.querySelector("[data-initial-focus]")?.focus();
+    return () => dialog.close();
+  }, []);
+  return (0, import_react.createElement)("dialog", {
+    className: "dshskill_dialog",
+    ref,
+    "aria-labelledby": titleId,
+    onCancel(event) {
+      event.preventDefault();
+      if (!busy) close();
+    }
+  }, (0, import_react.createElement)("h2", { id: titleId }, title), children);
+}
+function Feedback({ error, busy, translate }) {
+  return (0, import_react.createElement)(
+    "div",
+    { className: "dshskill_feedback" },
+    busy && (0, import_react.createElement)("p", { role: "status" }, translate("saving")),
+    error && (0, import_react.createElement)("p", { className: "dshskill_error", role: "alert" }, translate(error))
+  );
+}
+function RemoveDialog({ skill, translate: t, store, busy, error, close, removed }) {
+  async function remove() {
+    if (busy) return;
+    const ok = await store.mutate({ action: "remove", id: skill.id });
+    if (ok) removed();
+  }
+  return (0, import_react.createElement)(
+    Modal,
+    { title: t("uninstallTitle"), busy, close },
+    (0, import_react.createElement)("p", { className: "dshskill_muted" }, t("uninstallHint", { name: skill.name })),
+    (0, import_react.createElement)(Feedback, { error, busy, translate: t }),
+    (0, import_react.createElement)(
+      "div",
+      { className: "dshskill_dialogActions" },
+      (0, import_react.createElement)("button", {
+        type: "button",
+        className: "dshskill_control",
+        "data-initial-focus": "",
+        "aria-disabled": busy || void 0,
+        onClick: () => {
+          if (!busy) close();
+        }
+      }, t("cancel")),
+      (0, import_react.createElement)("button", { type: "button", className: "dshskill_control dshskill_danger", "aria-disabled": busy || void 0, onClick: remove }, t("uninstall"))
+    )
+  );
+}
+
+// src/client/page.js
+var GROUPS = ["builtin", "self", "third-party"];
+function SkillToggle({ skill, busy, saving, store, translate: t, controls }) {
+  const { StateDot: StateDot2, Switch: Switch2 } = controls;
+  return (0, import_react2.createElement)(
+    "span",
+    { className: "dshskill_toggle" },
+    (0, import_react2.createElement)(
+      "span",
+      { className: "dshskill_toggleProgress", role: "status" },
+      (0, import_react2.createElement)("span", { className: "dshskill_progressAnnouncement" }, saving ? t("saving") : ""),
+      saving && (0, import_react2.createElement)(StateDot2, { state: "ongoing" })
+    ),
+    (0, import_react2.createElement)(Switch2, {
+      checked: skill.enabled,
+      label: t("switchLabel", { name: skill.name }),
+      disabled: busy,
+      onChange: (enabled) => {
+        void store.mutate({ action: "setEnabled", id: skill.id, enabled });
+      }
+    })
+  );
+}
+function CatalogRows({ skills, query, translate: t, busy, savingId, store, openDetail, controls }) {
+  const { SkillEmblem: SkillEmblem2, Tag: Tag2 } = controls;
+  const headingId = (0, import_react2.useId)();
+  const term = query.trim().toLocaleLowerCase();
+  const visible = skills.filter((skill) => !term || [skill.name, skill.description].some((text) => text?.toLocaleLowerCase().includes(term)));
+  if (!visible.length) return (0, import_react2.createElement)("p", { className: "dshskill_muted", role: "status" }, t(term ? "noMatch" : "empty"));
+  return (0, import_react2.createElement)("div", { className: "dshskill_groups" }, GROUPS.map((group) => {
+    const entries = visible.filter((skill) => (skill.origin ?? "third-party") === group);
+    if (!entries.length) return null;
+    const id = headingId + group;
+    return (0, import_react2.createElement)(
+      "section",
+      { key: group, className: "dshskill_group", "aria-labelledby": id },
+      (0, import_react2.createElement)("h2", { id }, t(group)),
+      (0, import_react2.createElement)("ul", { className: "dshskill_rows" }, entries.map((skill) => {
+        const descriptionId = skill.description ? headingId + "-" + skill.id : void 0;
+        const saving = savingId === skill.id;
+        return (0, import_react2.createElement)(
+          "li",
+          { key: skill.id, className: "dshskill_row" },
+          (0, import_react2.createElement)("span", { className: "dshskill_icon" }, (0, import_react2.createElement)(SkillEmblem2, { size: 24 })),
+          (0, import_react2.createElement)(
+            "div",
+            { className: "dshskill_rowText" },
+            (0, import_react2.createElement)(
+              "div",
+              { className: "dshskill_titleRow" },
+              (0, import_react2.createElement)("button", {
+                type: "button",
+                className: "dshskill_rowButton",
+                "data-skill-id": skill.id,
+                "aria-label": t("openDetail", { name: skill.name }),
+                "aria-describedby": descriptionId,
+                onClick: () => openDetail(skill)
+              }, skill.name),
+              skill.shadowed && (0, import_react2.createElement)(Tag2, { className: "dshskill_badge" }, t("shadowed"))
+            ),
+            descriptionId && (0, import_react2.createElement)("span", { className: "dshskill_description", id: descriptionId }, skill.description)
+          ),
+          typeof skill.enabled === "boolean" && (0, import_react2.createElement)(SkillToggle, { skill, busy, saving, store, translate: t, controls })
+        );
+      }))
+    );
+  }));
+}
+function SkillDetail({ skill, titleRef, translate: t, busy, saving, back, openRemove, controls, store }) {
+  const { BackIcon, Button: Button2, SkillDocument: SkillDocument2, SkillEmblem: SkillEmblem2, Tag: Tag2, TrashIcon } = controls;
+  const [preview, setPreview] = (0, import_react2.useState)(null);
+  const [attempt, setAttempt] = (0, import_react2.useState)(0);
+  (0, import_react2.useEffect)(() => {
+    const pending = new AbortController();
+    request(
+      { action: "detail", workspaceId: null, id: skill.id },
+      AbortSignal.any([pending.signal, AbortSignal.timeout(8e3)])
+    ).then((result) => {
+      if (!pending.signal.aborted) setPreview(result);
+    }).catch((error) => {
+      if (!pending.signal.aborted) setPreview({ error: error.code ?? "unavailable" });
+    });
+    return () => pending.abort();
+  }, [skill.id, attempt]);
+  const imported = skill.group === "imported";
+  const canToggle = typeof skill.enabled === "boolean";
+  const origin = preview?.origin ?? skill.origin;
+  const repository = origin === "third-party" ? preview?.repository : void 0;
+  const repositoryLabel = repository?.replace(/^https:\/\/(?:github\.com\/)?/, "").replace(/\/$/, "");
+  const originLabel = t(origin ? "origin-" + origin : imported ? "imported" : "unknownOrigin");
+  return (0, import_react2.createElement)(
+    "div",
+    { className: "dshskill_detail" },
+    (0, import_react2.createElement)(
+      "header",
+      { className: "dshskill_detailTop" },
+      (0, import_react2.createElement)(
+        "button",
+        { type: "button", className: "dshskill_back", "aria-label": t("back"), onClick: back },
+        (0, import_react2.createElement)(BackIcon, { className: "dshskill_backIcon", "aria-hidden": true }),
+        (0, import_react2.createElement)("span", null, t("title"))
+      ),
+      (0, import_react2.createElement)(
+        "div",
+        { className: "dshskill_detailHead" },
+        (0, import_react2.createElement)("span", { className: "dshskill_icon", "aria-hidden": true }, (0, import_react2.createElement)(SkillEmblem2, { branded: true, size: 36 })),
+        (imported || canToggle) && (0, import_react2.createElement)(
+          "div",
+          { className: "dshskill_detailActions" },
+          imported && (0, import_react2.createElement)(Button2, {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            className: "dshskill_detailUninstall",
+            icon: (0, import_react2.createElement)(TrashIcon, { size: 13 }),
+            disabled: busy,
+            "aria-label": t("uninstallLabel", { name: skill.name }),
+            onClick: openRemove
+          }, t("uninstall")),
+          canToggle && (0, import_react2.createElement)(SkillToggle, { skill, busy, saving, store, translate: t, controls })
+        )
+      )
+    ),
+    (0, import_react2.createElement)(
+      "div",
+      { className: "dshskill_detailMain" },
+      (0, import_react2.createElement)(
+        "div",
+        { className: "dshskill_detailTitleRow" },
+        (0, import_react2.createElement)("h1", { ref: titleRef, tabIndex: -1, title: skill.name }, skill.name),
+        repository ? (0, import_react2.createElement)(
+          "a",
+          {
+            className: "dshskill_detailAttribution dshskill_repository",
+            href: repository,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            title: repositoryLabel,
+            "aria-label": t("openRepository", { repository: repositoryLabel })
+          },
+          (0, import_react2.createElement)("span", { className: "dshskill_attributionText" }, repositoryLabel),
+          (0, import_react2.createElement)("span", { "aria-hidden": true }, "\u2197")
+        ) : (0, import_react2.createElement)(
+          Tag2,
+          { className: "dshskill_detailAttribution", tone: "neutral" },
+          (0, import_react2.createElement)("span", { className: "dshskill_attributionText", title: originLabel }, originLabel)
+        )
+      ),
+      skill.description && (0, import_react2.createElement)("p", { className: "dshskill_detailDescription" }, skill.description)
+    ),
+    (0, import_react2.createElement)(
+      "div",
+      { className: "dshskill_detailSections" },
+      (0, import_react2.createElement)(SkillDocument2, { preview, translate: t, onRetry: () => {
+        setPreview(null);
+        setAttempt((value) => value + 1);
+      } })
+    )
+  );
+}
+function createPage(locale, controls, createStore = createCatalog) {
+  const t = createTranslator(locale);
+  const subscribeLocale = (listener) => locale.subscribe(listener);
+  const localeVersion = () => locale.getSnapshot().revision;
+  return function SkillsPage() {
+    (0, import_react2.useSyncExternalStore)(subscribeLocale, localeVersion, localeVersion);
+    const [store] = (0, import_react2.useState)(createStore);
+    const state = (0, import_react2.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+    const [query, setQuery] = (0, import_react2.useState)("");
+    const [detail, setDetail] = (0, import_react2.useState)(null);
+    const [confirmRemoval, setConfirmRemoval] = (0, import_react2.useState)(false);
+    const pageRef = (0, import_react2.useRef)(null);
+    const titleRef = (0, import_react2.useRef)(null);
+    const returnTo = (0, import_react2.useRef)(null);
+    (0, import_react2.useEffect)(() => {
+      store.start();
+      return () => store.stop();
+    }, [store]);
+    (0, import_react2.useLayoutEffect)(() => {
+      if (detail) {
+        pageRef.current.scrollTop = 0;
+        titleRef.current.focus({ preventScroll: true });
+      } else if (returnTo.current !== null) {
+        const { id, scrollTop } = returnTo.current;
+        const row = Array.from(pageRef.current.querySelectorAll("[data-skill-id]")).find((button) => button.dataset.skillId === id);
+        if (row) {
+          pageRef.current.scrollTop = scrollTop;
+          row.focus({ preventScroll: true });
+        } else {
+          titleRef.current.focus();
+        }
+        returnTo.current = null;
+      }
+    }, [detail]);
+    function openDetail(skill) {
+      returnTo.current = { id: skill.id, scrollTop: pageRef.current.scrollTop };
+      setDetail(skill);
+      store.clearMutationError();
+    }
+    function closeDialog() {
+      setConfirmRemoval(false);
+      store.clearMutationError();
+    }
+    function removed() {
+      closeDialog();
+      setDetail(null);
+    }
+    const { skills, busy, savingId, listError, mutationError } = state;
+    const currentSkill = detail && (skills?.find((skill) => skill.id === detail.id) ?? detail);
+    return (0, import_react2.createElement)(
+      "div",
+      { className: "dshskill_page", "data-detail": currentSkill ? "" : void 0, ref: pageRef },
+      (0, import_react2.createElement)(
+        "div",
+        { className: "dshskill_content" },
+        currentSkill ? (0, import_react2.createElement)(SkillDetail, {
+          skill: currentSkill,
+          titleRef,
+          translate: t,
+          busy,
+          saving: savingId === currentSkill.id,
+          controls,
+          store,
+          back: () => setDetail(null),
+          openRemove: () => {
+            store.clearMutationError();
+            setConfirmRemoval(true);
+          }
+        }) : (0, import_react2.createElement)(
+          "div",
+          { className: "dshskill_catalog" },
+          (0, import_react2.createElement)(
+            "header",
+            { className: "dshskill_header" },
+            (0, import_react2.createElement)("h1", { ref: titleRef, tabIndex: -1 }, t("title")),
+            (0, import_react2.createElement)(controls.Input, {
+              className: "dshskill_search",
+              type: "search",
+              icon: (0, import_react2.createElement)(controls.SearchIcon, { size: 14 }),
+              "aria-label": t("search"),
+              placeholder: t("search"),
+              value: query,
+              onChange: (event) => setQuery(event.currentTarget.value)
+            })
+          ),
+          listError && (0, import_react2.createElement)("p", { role: "alert", className: "dshskill_error" }, t(listError)),
+          skills === null ? !listError && (0, import_react2.createElement)("p", { role: "status", className: "dshskill_muted" }, t("loading")) : (0, import_react2.createElement)(CatalogRows, { skills, query, translate: t, busy, savingId, store, openDetail, controls })
+        ),
+        !confirmRemoval && busy && !savingId && (0, import_react2.createElement)("p", { role: "status", className: "dshskill_muted" }, t("saving")),
+        !confirmRemoval && mutationError && (0, import_react2.createElement)("p", { role: "alert", className: "dshskill_error" }, t(mutationError)),
+        confirmRemoval && (0, import_react2.createElement)(RemoveDialog, { skill: currentSkill, translate: t, store, busy, error: mutationError, close: closeDialog, removed })
+      )
+    );
+  };
+}
+
+// src/client/style.css
+var style_default = ".dshskill_emblem {\n  display: inline-block;\n  flex-shrink: 0;\n  background-color: currentColor;\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 150%;\n}\n\n.dshskill_page {\n  --skill-hover: var(--dsw-alias-interactive-bg-hover);\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  padding: 28px clamp(24px, 4vw, 48px) 48px;\n  box-sizing: border-box;\n  color: var(--dsw-alias-label-primary);\n  background: var(--dsw-alias-bg-base);\n  font-size: 13px;\n  line-height: 20px;\n}\n\nhtml[data-platform='darwin'] .dshskill_page {\n  padding-top: calc(28px + var(--dsh-frame-top-clearance, 0px));\n}\n\n.dshskill_page[data-detail] {\n  scrollbar-gutter: stable;\n}\n\n.dshskill_content {\n  max-width: 960px;\n  margin-inline: auto;\n}\n\n.dshskill_page :where(h1, h2, p, ul):not(:where(.dshskill_detailSections *)) {\n  margin: 0;\n}\n\n.dshskill_header h1,\n.dshskill_detailMain h1 {\n  font-size: 20px;\n  line-height: 28px;\n  font-weight: 500;\n  overflow-wrap: anywhere;\n}\n\n.dshskill_group h2,\n.dshskill_dialog h2 {\n  font-size: 14px;\n  line-height: 22px;\n  font-weight: 500;\n}\n\n.dshskill_catalog {\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n}\n\n.dshskill_header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n}\n\n.dshskill_header > div {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.dshskill_control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 32px;\n  min-width: 0;\n  box-sizing: border-box;\n  padding: 4px 10px;\n  border: 0.5px solid var(--dsw-alias-border-l3);\n  border-radius: var(--dsw-radius-lg, 8px);\n  background: var(--dsw-alias-bg-base);\n  color: inherit;\n  font: inherit;\n}\n\n.dshskill_control {\n  cursor: pointer;\n}\n\n.dshskill_control:not([aria-disabled='true']):hover,\n.dshskill_row:hover {\n  background: var(--skill-hover);\n}\n\n.dshskill_control[aria-disabled='true'] {\n  opacity: 0.55;\n  cursor: default;\n}\n\n.dshskill_search {\n  box-sizing: border-box;\n  width: 200px;\n  max-width: 100%;\n  min-width: 0;\n}\n\n.dshskill_search input::placeholder {\n  color: var(--dsw-alias-label-secondary);\n}\n\n.dshskill_page :where(.dshskill_control, .dshskill_back, .dshskill_header h1, .dshskill_detailMain h1, .dshskill_repository):focus-visible {\n  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 2px;\n}\n\n.dshskill_groups,\n.dshskill_group,\n.dshskill_rows {\n  display: flex;\n  flex-direction: column;\n}\n\n.dshskill_groups {\n  gap: 32px;\n}\n\n.dshskill_group {\n  gap: 8px;\n}\n\n.dshskill_rows {\n  gap: 2px;\n  padding: 0;\n  list-style: none;\n}\n\n.dshskill_row {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  min-width: 0;\n  margin-inline: -8px;\n  padding: 8px;\n  border-radius: var(--dsw-radius-xl, 12px);\n  line-height: normal;\n}\n\n.dshskill_row:active {\n  background: var(--dsw-alias-interactive-bg-active);\n}\n\n.dshskill_rowButton {\n  max-width: 100%;\n  border: 0;\n  padding: 0;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 500;\n  text-align: start;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: pointer;\n}\n\n.dshskill_rowButton::after {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dsw-radius-xl, 12px);\n  content: '';\n}\n\n.dshskill_rowButton:focus-visible {\n  outline: none;\n}\n\n.dshskill_rowButton:focus-visible::after {\n  outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));\n  outline-offset: 2px;\n}\n\n.dshskill_icon {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border: 0.5px solid var(--dsw-alias-border-l3);\n  border-radius: var(--dsw-radius-lg, 8px);\n  color: var(--dsw-alias-label-secondary);\n}\n\n.dshskill_rowText {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.dshskill_titleRow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n\n.dshskill_muted {\n  color: var(--dsw-alias-label-secondary);\n}\n\n.dshskill_description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 13px;\n  line-height: 18px;\n}\n\n.dshskill_badge {\n  height: 18px;\n  padding: 0 7px;\n  font-size: 10px;\n  line-height: 1;\n}\n\n.dshskill_toggle {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: 8px;\n}\n\n.dshskill_row .dshskill_toggle {\n  position: relative;\n  z-index: 1;\n}\n\n.dshskill_toggleProgress {\n  display: inline-flex;\n  width: 14px;\n  height: 14px;\n}\n\n.dshskill_toggleProgress > svg {\n  width: 100%;\n  height: 100%;\n}\n\n.dshskill_progressAnnouncement {\n  position: absolute;\n  clip-path: inset(50%);\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.dshskill_error,\n.dshskill_danger {\n  color: var(--dsw-alias-state-error-primary);\n}\n\n.dshskill_detailTop,\n.dshskill_detailMain,\n.dshskill_detailSections {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.dshskill_back {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary);\n  font: inherit;\n  font-size: 12.5px;\n  line-height: normal;\n  cursor: pointer;\n}\n\n.dshskill_back:hover {\n  color: var(--dsw-alias-label-primary);\n}\n\n.dshskill_backIcon {\n  transform: rotate(90deg);\n}\n\n.dshskill_detailHead {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  margin-top: 32px;\n}\n\n.dshskill_detailActions {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.dshskill_detailActions .dshskill_detailUninstall {\n  color: var(--dsw-alias-state-error-primary);\n  --dsh-button-outline-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 30%, transparent);\n  --dsw-alias-interactive-bg-hover: color-mix(in srgb, var(--dsw-alias-state-error-primary) 8%, transparent);\n}\n\n.dshskill_detailMain {\n  gap: 8px;\n  margin-top: 20px;\n}\n\n.dshskill_detailTitleRow {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n  white-space: nowrap;\n}\n\n.dshskill_detailTitleRow h1,\n.dshskill_attributionText {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dshskill_detailTitleRow .dshskill_detailAttribution {\n  box-sizing: border-box;\n  flex: none;\n  min-width: 0;\n  max-width: 45%;\n  /* Balance the smaller attribution text against the title's visible glyphs. */\n  translate: 0 1px;\n}\n\n.dshskill_repository {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  line-height: 18px;\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n.dshskill_detailDescription {\n  color: var(--dsw-alias-label-secondary);\n  font-size: 14px;\n  line-height: 22px;\n  overflow-wrap: anywhere;\n}\n\n.dshskill_detailSections {\n  gap: 32px;\n  margin-top: 32px;\n}\n\n.dshskill_dialog {\n  position: fixed;\n  width: min(440px, calc(100vw - 32px));\n  max-width: none;\n  max-height: calc(100vh - 32px);\n  margin: auto;\n  padding: 20px;\n  box-sizing: border-box;\n  border: 0.5px solid var(--dsw-alias-border-l3);\n  border-radius: var(--dsw-radius-xl, 12px);\n  background: var(--dsw-alias-bg-base);\n  color: var(--dsw-alias-label-primary);\n  box-shadow: 0 12px 40px rgb(0 0 0 / 16%);\n}\n\n.dshskill_dialog[open] {\n  display: grid;\n  gap: 12px;\n}\n\n.dshskill_dialog::backdrop {\n  background: rgb(0 0 0 / 26%);\n}\n\n.dshskill_dialogActions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.dshskill_feedback:empty {\n  display: none;\n}\n\n@media (max-width: 767px) {\n  .dshskill_page:not([data-detail]) {\n    padding-inline: 20px;\n  }\n}\n";
+
+// src/client/index.js
+var inject = ["slots", "locale"];
+function SkillEmblem({ size = 16, branded = false } = {}) {
+  if (branded) return (0, import_react3.createElement)("img", { src: icon_default, width: size, height: size, alt: "" });
+  return (0, import_react3.createElement)("span", {
+    className: "dshskill_emblem",
+    "aria-hidden": true,
+    style: { width: size, height: size, maskImage: `url(${JSON.stringify(icon_default)})` }
+  });
+}
+var skillDocumentImages = { resolve: () => void 0 };
+function SkillDocument({ preview, translate: t, onRetry }) {
+  const labels = (0, import_dsh_client_ui_primitives.useDetailDocumentLabels)({
+    title: t("preview"),
+    loading: t("loadingPreview"),
+    retry: t("retry"),
+    copy: t("copy"),
+    copied: t("copied"),
+    codeBlock: t("codeBlock"),
+    wrap: t("wrap"),
+    unwrap: t("unwrap"),
+    footnotes: t("footnotes")
+  });
+  const state = preview === null ? void 0 : preview.error ? { status: "error", message: t(preview.error) } : { status: "ready", markdown: preview.body };
+  return (0, import_react3.createElement)(import_dsh_client_ui_primitives.DetailDocument, { state: (0, import_dsh_client_ui_primitives.detailDocumentState)(state), labels, images: skillDocumentImages, onRetry });
+}
+function apply(ctx) {
+  ctx.effect(() => ctx.locale.register(NS, DICTS), "skill-manager: dictionaries");
+  ctx.effect(() => {
+    const style = document.createElement("style");
+    style.dataset.plugin = "@dawn0608/dsh-skill-manager";
+    style.textContent = style_default;
+    document.head.appendChild(style);
+    return () => style.remove();
+  }, "skill-manager: styles");
+  const translate = createTranslator(ctx.locale);
+  ctx.slots.inject("sidebar.panellist", () => ctx.slots.register({
+    name: "sidebar.panellist",
+    id: "skill-manager",
+    order: 5,
+    label: () => translate("title"),
+    locale: NS
+  }, SkillEmblem));
+  ctx.slots.inject("main", () => ctx.slots.register({
+    name: "main",
+    key: "skill-manager",
+    locale: NS
+  }, createPage(ctx.locale, {
+    BackIcon: import_dsh_client_ui_primitives.IconChevronDownOutlineRegular,
+    Button: import_dsh_client_ui_primitives.Button,
+    Input: import_dsh_client_ui_primitives.Input,
+    SearchIcon: import_dsh_client_ui_primitives.IconSearchOutlineRegular,
+    SkillDocument,
+    SkillEmblem,
+    StateDot: import_dsh_client_ui_primitives.StateDot,
+    Switch: import_dsh_client_ui_primitives.Switch,
+    Tag: import_dsh_client_ui_primitives.Tag,
+    TrashIcon: import_dsh_client_ui_primitives.IconTrashOutlineRegular
+  })));
+}
+    Object.defineProperty(module.exports, Symbol.toStringTag, { value: "Module" });
+    return module.exports;
+  },
+});
+//# sourceMappingURL=client.js.map