@nimoxie/dsh-model-organizer 0.5.0 → 0.5.12

package/lib/client.js

@@ -124,6 +124,30 @@ window.__ModuleLoader__.load({
       "page.displayNameOptional": "显示名称（可选）",
       "page.baseUrlOptional": "API 地址（可稍后填写）",
       "page.keyOptional": "API 密钥（可留空，稍后在右栏填写）",
+      "page.modelsField": "模型 ID（至少一个）",
+      "page.modelsFieldPlaceholder": "例如 glm-4.6, qwen-max（多个用逗号或空格分隔）",
+      "page.modelsFieldHint": "这个路由不在 DSH 的目录里，配置里必须先列出模型，否则它会解析不出模型。填好 API 地址与密钥后可点「从网关获取」自动填。",
+      "page.modelsRequired": "至少要填一个模型 ID：这个路由不在 DSH 的目录里，没有模型它无法解析。",
+      "page.fetchFromGateway": "从网关获取",
+      "page.baseUrlRequired": "「从网关获取」需要先填 API 地址。",
+      "page.deleteProvider": "删除供应商",
+      "page.deleteProviderHint": "删除这条自建路由：它的配置和本页派生的密钥引用会一起移除，无法撤销。官方路由不能在这里删除。",
+      "page.deleteProviderBody": "删除后无法撤销：这条供应商的配置会被移除，本页为它派生的密钥引用也会一并清理（别处配置的密钥不会被删）。",
+      "page.deleteFailed": "删除失败。",
+      "page.test": "测试",
+      "page.testing": "测试中…",
+      "page.testOkShort": "✓ 可用",
+      "page.testMissingShort": "⚠ 不在列表",
+      "page.testFailShort": "✗ 失败",
+      "page.testHint": "测一下这个模型现在能不能用",
+      "page.testOk": "可用",
+      "page.testMissing": "网关可达，但列表里没有这个 ID",
+      "page.testFailed": "测试失败。",
+      "page.testNoCatalog": "没有 API 地址，无法测试",
+      "page.deleteModel": "删除模型",
+      "page.testNeedsId": "先填模型 ID",
+      "page.deleteModelHint": "从配置里删掉这个模型（每条路由至少要留一个）",
+      "page.modelDeleted": "模型已删除",
       "page.openOfficial": "官方模型页",
       "page.openOfficialHint": "把「模型」这一行交还官方页（菜单不会变，仍然只有「模型」一行；随时可从官方页浮窗的「模型管理页」切回来）",
       "page.switchFailed": "没找到设置导航，请在左侧直接点「模型」页。",
@@ -260,6 +284,30 @@ window.__ModuleLoader__.load({
       "page.displayNameOptional": "Display name (optional)",
       "page.baseUrlOptional": "Base URL (can be filled in later)",
       "page.keyOptional": "API key (leave empty, fill it on the right later)",
+      "page.modelsField": "Model IDs (at least one)",
+      "page.modelsFieldPlaceholder": "e.g. glm-4.6, qwen-max (comma or space separated)",
+      "page.modelsFieldHint": "DSH's catalog does not describe this route, so the config must list its models — otherwise the route resolves no models. Fill the API address and key, then use Fetch from gateway.",
+      "page.modelsRequired": "List at least one model ID: the catalog does not describe this route, so it cannot resolve without models.",
+      "page.fetchFromGateway": "Fetch from gateway",
+      "page.baseUrlRequired": "Fetch from gateway needs the API address first.",
+      "page.deleteProvider": "Delete provider",
+      "page.deleteProviderHint": "Delete this hand-declared route: its profile and the credential reference this page derived go with it, and it cannot be undone. Built-in routes cannot be deleted here.",
+      "page.deleteProviderBody": "This cannot be undone: the provider's profile is removed and the credential reference this page derived is cleaned up (a key configured elsewhere is left alone).",
+      "page.deleteFailed": "Deleting failed.",
+      "page.test": "Test",
+      "page.testing": "Testing…",
+      "page.testOkShort": "✓ reachable",
+      "page.testMissingShort": "⚠ not listed",
+      "page.testFailShort": "✗ failed",
+      "page.testHint": "Check whether this model works right now",
+      "page.testOk": "Works",
+      "page.testMissing": "Gateway reachable, but this ID is not listed",
+      "page.testFailed": "The test failed.",
+      "page.testNoCatalog": "No API address — cannot test",
+      "page.deleteModel": "Delete model",
+      "page.testNeedsId": "Enter a model ID first",
+      "page.deleteModelHint": "Remove this model from the configuration (every route keeps at least one)",
+      "page.modelDeleted": "Model deleted",
       "page.openOfficial": "Official Models page",
       "page.openOfficialHint": "Hand the Models row back to the shipped page (the menu does not change; switch back any time from the panel)",
       "page.switchFailed": "The settings nav was not found — pick the Models page on the left.",
@@ -329,7 +377,7 @@ window.__ModuleLoader__.load({
        code changes, so a browser can keep running an old build until a hard reload.
        Kept OFF the UI (it is not user-facing): read it as
        `window.__dshModelOrganizerBuild` when a stale build is suspected. */
-    const BUILD = "b54";
+    const BUILD = "b75";
 
     let officialClasses = null;
     let officialClassesSheets = -1;
@@ -422,6 +470,18 @@ window.__ModuleLoader__.load({
           ".dsh-mo-head:focus-visible{outline:none;background:var(--dsw-alias-interactive-bg-hover);}",
           ".dsh-mo-list .dsh-mo-head.dsh-mo-head:focus-visible,.dsh-mo-list .dsh-mo-model.dsh-mo-model:focus-visible,.dsh-mo-list .dsh-mo-row.dsh-mo-row:focus-visible{background:transparent;}",
           ".dsh-mo-panelhead.dsh-mo-panelhead:focus-visible{background:var(--dsw-alias-interactive-bg-hover);}",
+          /* Icon actions (row delete / model test): the kit's icons inherit
+             currentColor, so their colour state lives in these rules. */
+          ".dsh-mo-act{color:var(--dsw-alias-label-secondary);transition:background .12s ease,color .12s ease;}",
+          ".dsh-mo-act:hover{background:var(--dsw-alias-interactive-bg-hover);}",
+          ".dsh-mo-act:disabled{opacity:.45;cursor:not-allowed;background:transparent;}",
+          ".dsh-mo-act-danger{color:var(--dsw-alias-state-error, #f85149);}",
+          ".dsh-mo-act-ok{color:var(--dsw-alias-state-success, #3fb950);}",
+          ".dsh-mo-act-miss{color:var(--dsw-alias-state-warn-label, #d29922);}",
+          /* IconLoadingOutlineRegular is a still glyph; the spin lives here. */
+          "@keyframes dsh-mo-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}",
+          ".dsh-mo-act-busy svg{animation:dsh-mo-spin .9s linear infinite;}",
+
           ".dsh-mo-chev{transition:transform .12s ease;}",
           ".dsh-mo-head[aria-expanded='true'] .dsh-mo-chev{transform:rotate(90deg);}",
           ".dsh-mo-row{border-width:1px;border-style:solid;border-color:transparent;}",
@@ -469,6 +529,35 @@ window.__ModuleLoader__.load({
           ".dsh-mo-model::before{content:'';position:absolute;left:15px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--dsw-alias-label-tertiary);opacity:.5;}",
           ".dsh-mo-model[aria-checked='true']::before{background:var(--dsw-alias-label-primary);opacity:.9;}"
         ];
+
+        /* Every button on this page, in its dialogs, and in the footer panel shares one
+           pointer state. The resting paint is inline (the S.* objects), so the hover
+           paint has to outrank it: `!important` is confined to hover/disabled, and
+           :where() keeps the scope selector at zero specificity so the variant rules
+           below still win. */
+        const BTN_SURFACES = [
+          '[data-mo="page"] button', '[data-mo="panel"] button',
+          '[data-mo="fetch-dialog"] button', '[data-mo="add-dialog"] button',
+          '[data-mo="model-dialog"] button', '[data-mo="provider-delete-dialog"] button'
+        ];
+        const BTN = ":where(" + BTN_SURFACES.join(",") + ")";
+        const byMarker = function (markers) {
+          return ":where(" + markers.map(function (marker) { return "[data-mo='" + marker + "']"; }).join(",") + ")";
+        };
+        rules.push(BTN + "{transition:background .12s ease,border-color .12s ease,color .12s ease,filter .12s ease,box-shadow .12s ease;}");
+        rules.push(BTN + ":not([role='switch']):not(:disabled):hover{background:var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.20))!important;}");
+        rules.push(BTN + ":not(:disabled):active{filter:brightness(.96);}");
+        rules.push(BTN + ":disabled{cursor:not-allowed;opacity:.55;}");
+        /* A switch paints its own on/off fill: repainting it on hover would read as a
+           state change, so it gets a ring instead. */
+        rules.push(BTN + ":is([role='switch']):not(:disabled):hover{box-shadow:0 0 0 2px color-mix(in srgb, var(--dsw-alias-state-accent, #4f8cff) 40%, transparent);}");
+        /* Primary actions keep their accent fill, destructive ones tint the danger
+           colour, and the two quiet cross-links accent their frame. */
+        rules.push(byMarker(["page-key-save", "fetch-adopt", "add-submit", "model-dialog-save"]) + ":not(:disabled):hover{background:var(--dsw-alias-state-accent, #4f8cff)!important;filter:brightness(1.12);}");
+        rules.push(byMarker(["page-model-delete", "page-provider-delete", "model-dialog-delete", "provider-delete-confirm"]) + ":not(:disabled):hover{background:color-mix(in srgb, var(--dsw-alias-state-error, #f85149) 18%, transparent)!important;border-color:var(--dsw-alias-state-error, #f85149)!important;}");
+        rules.push(byMarker(["page-open-official", "page-provider-add"]) + ":not(:disabled):hover{color:var(--dsw-alias-label-primary)!important;border-color:var(--dsw-alias-state-accent, #4f8cff)!important;}");
+        rules.push(BTN + "[role='radio'][aria-checked='true']:not(:disabled):hover{filter:brightness(1.12);}");
+        rules.push(BTN + "[data-mo$='-close']:not(:disabled):hover{color:var(--dsw-alias-label-primary)!important;}");
         /* The shipped check alone is easy to miss: bold the selected row's name
            wherever the official sheet is in use. Settings rows carry no
            aria-checked, so the drag lists are untouched. */
@@ -495,6 +584,39 @@ window.__ModuleLoader__.load({
       return h(P[name], props ? Object.assign({}, props) : {});
     }
 
+    /* The shipped kit (94 icons) is reached through the primitives module, same as the
+       official pages do. Outside the app (headless harness, or a build without it) keep a
+       neutral glyph in the same box so nothing collapses. */
+    function kitIcon(name, glyph, size) {
+      const rendered = icon(name, { size: size });
+      if (rendered !== null) return rendered;
+      return h("span", { "aria-hidden": "true", style: { fontSize: size - 3, lineHeight: 1 } }, glyph);
+    }
+
+    /* One box for the three icon actions: the provider head's delete and each model
+       row's test / delete. Height is the switch's (17) on purpose — a taller icon
+       button beside the switch is what the page screenshot called out. Width is a
+       nudge above the proportional shrink (the same screenshot then called 20 a hair
+       too narrow); the height stays equal to the switch so the row never looks taller. */
+    const ACTION_BOX = {
+      boxSizing: "border-box", flex: "none", width: 19, height: 17, borderRadius: 6,
+      /* The detail head aligns its TEXT on the baseline; an icon-only box has no real
+         text baseline, so it must opt into center alignment or it floats a pixel or two
+         above the switch (the cropped screenshot that showed them out of line). */
+      alignSelf: "center",
+      display: "inline-flex", alignItems: "center", justifyContent: "center", padding: 0,
+      borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
+      background: "transparent", cursor: "pointer"
+    };
+    /* The destructive sibling: identical geometry, danger frame. */
+    const DELETE_ACTION = Object.assign({}, ACTION_BOX, { borderColor: "var(--dsw-alias-state-error, #f85149)" });
+    /* The diagnostic button is a NORMAL button to the eye: same box as the two above,
+       but it wears the page buttons' tinted fill (S.pageButton) instead of a transparent
+       frame. Its verdict stays in the icon colour (.dsh-mo-act-ok/-miss/-danger). */
+    const TEST_ACTION = Object.assign({}, ACTION_BOX, {
+      background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.10))"
+    });
+
     /* --------------------------------- styles --------------------------------- */
     const S = {
       chip: {
@@ -607,15 +729,6 @@ window.__ModuleLoader__.load({
         background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.10))",
         borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)"
       },
-      switchLabel: {
-        display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11,
-        color: "var(--dsw-alias-label-secondary)", cursor: "pointer", userSelect: "none"
-      },
-      linkPillOn: {
-        color: "var(--dsw-alias-label-primary)",
-        background: "var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.20))",
-        borderColor: "var(--dsw-alias-state-accent, #4f8cff)"
-      },
       pageTitle: { margin: 0, fontSize: 16, fontWeight: 600, color: "var(--dsw-alias-label-primary)" },
       pageSubtitle: { margin: 0, fontSize: 12, lineHeight: "18px", color: "var(--dsw-alias-label-tertiary)" },
       pageGrid: { display: "grid", gridTemplateColumns: "minmax(170px, 210px) minmax(0, 1fr)", gap: 14, alignItems: "start" },
@@ -637,21 +750,10 @@ window.__ModuleLoader__.load({
       pageDetailHead: { display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" },
       pageDetailTitle: { margin: 0, fontSize: 15, fontWeight: 600 },
       pageDetailRoute: { fontSize: 11, color: "var(--dsw-alias-label-tertiary)" },
-      pageFacts: { display: "flex", flexDirection: "column", gap: 6 },
-      pageFact: { display: "grid", gridTemplateColumns: "84px minmax(0, 1fr)", gap: 10, alignItems: "baseline", fontSize: 12 },
-      pageFactLabel: { color: "var(--dsw-alias-label-tertiary)" },
-      pageFactValue: { color: "var(--dsw-alias-label-secondary)", wordBreak: "break-all" },
       pageSectionHead: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8 },
       pageSectionLabel: { fontSize: 12, fontWeight: 600 },
       pageHint: { fontSize: 10, color: "var(--dsw-alias-label-tertiary)" },
       pageEmpty: { margin: 0, fontSize: 12, lineHeight: "18px", color: "var(--dsw-alias-label-tertiary)" },
-      pageModels: { display: "flex", flexDirection: "column", gap: 4 },
-      pageModelRow: {
-        display: "flex", alignItems: "center", gap: 8, minWidth: 0, padding: "5px 8px", borderRadius: 8,
-        fontSize: 12, background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.06))"
-      },
-      pageModelId: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
-      pageModelName: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--dsw-alias-label-tertiary)" },
       pageSpacer: { flex: "1 1 auto", minWidth: 0 },
       pageChip: { flex: "none", padding: "1px 6px", borderRadius: 6, fontSize: 10, border: "1px solid var(--dsw-alias-border-l1)", color: "var(--dsw-alias-label-tertiary)" },
       pageLoading: { margin: 0, fontSize: 12, color: "var(--dsw-alias-label-tertiary)" },
@@ -704,8 +806,6 @@ window.__ModuleLoader__.load({
         outline: "none"
       },
       pageInputMono: { flex: "1 1 auto", minWidth: 0, fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" },
-      pageModelTop: { display: "flex", alignItems: "center", gap: 6, minWidth: 0 },
-      pageModelFields: { display: "grid", gridTemplateColumns: "92px 92px auto", gap: 6, alignItems: "center", paddingLeft: 18 },
       /* A native <select> popup is painted by the platform: in this theme its list came
          out white-on-white. Three radio-style segments are painted by us, so the choice
          is legible whatever the platform does. */
@@ -713,6 +813,9 @@ window.__ModuleLoader__.load({
          "vision", but a switch reads as an on/off state at a glance. */
       switchTrack: {
         boxSizing: "border-box", flex: "none", width: 30, height: 17, padding: 2, borderRadius: 9,
+        /* Same reason as ACTION_BOX: the knob gives this flex box a baseline that is
+           NOT its box bottom, so baseline rows would offset it from the icon button. */
+        alignSelf: "center",
         display: "inline-flex", alignItems: "center", justifyContent: "flex-start", cursor: "pointer",
         background: "var(--dsw-alias-interactive-bg, rgba(127,127,127,.25))",
         borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)",
@@ -748,12 +851,6 @@ window.__ModuleLoader__.load({
         background: "var(--dsw-alias-interactive-bg-hover, rgba(127,127,127,.20))",
         borderColor: "var(--dsw-alias-state-accent, #4f8cff)"
       },
-      pageSelect: {
-        boxSizing: "border-box", padding: "4px 8px", borderRadius: 7, fontSize: 12,
-        color: "var(--dsw-alias-label-primary)",
-        background: "var(--dsw-alias-bg-module, rgba(127,127,127,.08))",
-        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-border-l1)"
-      },
       pageButton: {
         boxSizing: "border-box", flex: "none", padding: "4px 10px", borderRadius: 7, fontSize: 12, cursor: "pointer",
         color: "var(--dsw-alias-label-secondary)",
@@ -766,6 +863,20 @@ window.__ModuleLoader__.load({
         background: "var(--dsw-alias-state-accent, #4f8cff)",
         borderWidth: 1, borderStyle: "solid", borderColor: "transparent"
       },
+      /* Row-level actions and the one destructive action on this page. */
+      pageModelActions: { flex: "none", display: "flex", alignItems: "center", gap: 4 },
+      /* The diagnostic action: same box as the trash, but it wears the normal page
+         button's tinted fill; its verdict colour rides the icon (.dsh-mo-act-*), never
+         the frame. */
+      pageIconAction: TEST_ACTION,
+      /* The one trash box; the provider head and the model rows share this object. */
+      pageIconDelete: DELETE_ACTION,
+
+      pageButtonDanger: {
+        boxSizing: "border-box", flex: "none", padding: "4px 10px", borderRadius: 7, fontSize: 12, cursor: "pointer",
+        borderWidth: 1, borderStyle: "solid", borderColor: "var(--dsw-alias-state-error, #f85149)",
+        background: "transparent", color: "var(--dsw-alias-state-error, #f85149)"
+      },
       pageIconButton: {
         boxSizing: "border-box", flex: "none", width: 22, height: 22, lineHeight: "18px", padding: 0, borderRadius: 6, fontSize: 11,
         cursor: "pointer", color: "var(--dsw-alias-label-tertiary)", background: "transparent",
@@ -773,7 +884,6 @@ window.__ModuleLoader__.load({
       },
       pageKeyRow: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
       pageActions: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" },
-      pageHandle: { flex: "none", color: "var(--dsw-alias-label-tertiary)", fontSize: 12, userSelect: "none" },
       pageCheckLabel: { flex: "none", display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11, color: "var(--dsw-alias-label-tertiary)", cursor: "pointer" },
       /* Built-in rail rows: readable, obviously not ours to edit, and never draggable
          (they sit outside the drag list for exactly that reason). */
@@ -2531,6 +2641,22 @@ window.__ModuleLoader__.load({
     /* Draft rows keep what the user typed (text), and only the write parses. The
        reasoning mode is three-valued because the schema is: absent inherits the catalog,
        `false` declares a non-reasoning model, an object declares the levels. */
+    /* Split a model-id list typed by a human ("glm-4.6, qwen-max" or one per line) into
+       ids, dropping empties and duplicates. Used by the create dialog, because a declared
+       route with no models cannot resolve at all (the host refuses it). */
+    function parseModelIds(text) {
+      const out = [];
+      const seen = {};
+      const parts = String(text === undefined || text === null ? "" : text).split(/[\s,，;；]+/);
+      for (let i = 0; i < parts.length; i++) {
+        const id = parts[i].trim();
+        if (id === "" || seen[id] === true) continue;
+        seen[id] = true;
+        out.push(id);
+      }
+      return out;
+    }
+
     /* A blank row for the "add model" dialog: the same shape modelDraftRows projects. */
     function emptyModelRow() {
       return { id: "", original: "", name: "", context: "", maxTokens: "", vision: false, reasoning: { mode: "inherit", levels: [] } };
@@ -2606,6 +2732,168 @@ window.__ModuleLoader__.load({
       return { models: out };
     }
 
+    /* ---------------------------- modal focus shell ---------------------------- */
+    /* Every dialog on this page is portalled to <body>, so its nodes sit AFTER the
+       whole settings page in the document's tab order. Two things went wrong with the
+       first attempt (a card-level keydown handler that only intervened at the edges):
+       the host shell could still pull focus out, and any step that did not start or end
+       exactly on a tracked element let the browser continue through the page behind the
+       backdrop. This shell therefore OWNS Tab while it is open: it listens in the capture
+       phase on the document, always takes the event over and moves focus itself, and a
+       focusin guard drags focus back if anything (host shell, programmatic blur) moves it
+       outside. Escape closes here too, so the page behind never sees it. */
+    const FOCUSABLE_SELECTOR = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled]):not([type='hidden'])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      "[tabindex]:not([tabindex='-1'])"
+    ].join(",");
+
+    function focusableIn(root) {
+      const out = [];
+      if (root === null || root === undefined || typeof root.querySelectorAll !== "function") return out;
+      let nodes = null;
+      try { nodes = root.querySelectorAll(FOCUSABLE_SELECTOR); } catch (e) { return out; }
+      if (nodes === null) return out;
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        /* A hidden control cannot take focus: without this check the ring stops on an
+           element the browser skips, and the next Tab starts from a stale position. */
+        try {
+          if (typeof node.getClientRects === "function" && node.getClientRects().length === 0) continue;
+        } catch (e) {}
+        out.push(node);
+      }
+      return out;
+    }
+
+    /* One manual Tab step inside the dialog, wrapping at both ends. Always returns true:
+       the caller must preventDefault, because the browser's own walk is exactly what
+       escapes to the settings page. */
+    function trapTab(event, card) {
+      const list = focusableIn(card);
+      if (list.length === 0) return true;
+      let index = -1;
+      try { index = list.indexOf(document.activeElement); } catch (e) {}
+      const target = index === -1
+        ? (event.shiftKey === true ? list[list.length - 1] : list[0])
+        : list[(index + (event.shiftKey === true ? -1 : 1) + list.length) % list.length];
+      try { if (target !== undefined && typeof target.focus === "function") target.focus(); } catch (e) {}
+      return true;
+    }
+
+    function DialogShell(props) {
+      const cardRef = useRef(null);
+      const restoreRef = useRef(null);
+      const closeRef = useRef(props.onClose);
+      closeRef.current = props.onClose;
+
+      useEffect(function () {
+        let previous = null;
+        try { previous = document.activeElement; } catch (e) {}
+        restoreRef.current = previous === undefined || previous === null || previous === document.body ? null : previous;
+        const card = cardRef.current;
+        if (card === null || card === undefined) return undefined;
+        const firstControl = function () {
+          let target = null;
+          try { target = typeof card.querySelector === "function" ? card.querySelector("[data-mo-focus]") : null; } catch (e) {}
+          if (target === null || target === undefined) target = focusableIn(card)[0];
+          return target === undefined ? null : target;
+        };
+        const focusFirst = function () {
+          const target = firstControl();
+          try { if (target !== null && typeof target.focus === "function") target.focus(); } catch (e) {}
+          return target;
+        };
+        focusFirst();
+        /* A portal that was just inserted can lose the synchronous focus() to the host
+           shell's own focus pass; re-assert on the next frame when focus did not stick. */
+        let retry = null;
+        try {
+          if (typeof requestAnimationFrame === "function") {
+            retry = requestAnimationFrame(function () {
+              retry = null;
+              let inside = false;
+              try { inside = typeof card.contains === "function" && card.contains(document.activeElement); } catch (e) { inside = false; }
+              if (!inside) focusFirst();
+            });
+          }
+        } catch (e) { retry = null; }
+
+        const onKeyDown = function (event) {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            if (event.stopPropagation) event.stopPropagation();
+            if (typeof closeRef.current === "function") closeRef.current();
+            return;
+          }
+          if (event.key !== "Tab") return;
+          if (event.preventDefault) event.preventDefault();
+          if (event.stopPropagation) event.stopPropagation();
+          trapTab(event, card);
+        };
+        /* The host shell reacts to focus changes; anything that lands outside the card
+           (a stray click, a programmatic blur, another plugin's focus call) is pulled
+           back to the dialog's first control. */
+        const onFocusIn = function (event) {
+          let inside = false;
+          try { inside = typeof card.contains === "function" && card.contains(event.target); } catch (e) { inside = false; }
+          if (inside) return;
+          const list = focusableIn(card);
+          const back = list.length > 0 ? list[0] : card;
+          try { if (back !== undefined && typeof back.focus === "function") back.focus(); } catch (e) {}
+        };
+
+        let wired = false;
+        try {
+          document.addEventListener("keydown", onKeyDown, true);
+          document.addEventListener("focusin", onFocusIn, true);
+          wired = true;
+        } catch (e) { wired = false; }
+
+        return function () {
+          if (retry !== null) { try { if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(retry); } catch (e) {} retry = null; }
+          if (wired) {
+            try { document.removeEventListener("keydown", onKeyDown, true); } catch (e) {}
+            try { document.removeEventListener("focusin", onFocusIn, true); } catch (e) {}
+          }
+          const restore = restoreRef.current;
+          restoreRef.current = null;
+          try {
+            if (restore !== null && restore !== undefined && restore.isConnected !== false && typeof restore.focus === "function") restore.focus();
+          } catch (e) {}
+        };
+      }, []);
+
+      /* Fallback path: environments where the document listeners above never attached
+         (the headless test harness) still get the same manual step from the card. */
+      function onKeyDown(event) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          if (event.stopPropagation) event.stopPropagation();
+          if (typeof props.onClose === "function") props.onClose();
+          return;
+        }
+        if (event.key !== "Tab") return;
+        if (event.preventDefault) event.preventDefault();
+        if (event.stopPropagation) event.stopPropagation();
+        trapTab(event, event.currentTarget);
+      }
+
+      return h("div", {
+        ref: cardRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": props.label,
+        "data-mo": props.marker,
+        tabIndex: -1,
+        onKeyDown: onKeyDown,
+        style: S.pickCard
+      }, props.children);
+    }
+
     function ModelsPage(props) {
       const C = resolveOfficialClasses();
       ensureOwnStyles(C);
@@ -2648,6 +2936,16 @@ window.__ModuleLoader__.load({
       const keyFactsState = useState(null);
       const keyFacts = keyFactsState[0];
       const setKeyFacts = keyFactsState[1];
+      /* Deleting a route is destructive (its profile plus the credential this page
+         derived), so it goes through a confirm dialog; deleting a model is one click and
+         re-addable. Connection tests are per model id and never persisted. */
+      const deleteState = useState(null);
+      const deleteTarget = deleteState[0];
+      const setDeleteTarget = deleteState[1];
+      const testState = useState({});
+      const modelTests = testState[0];
+      const setModelTests = testState[1];
+
       /* The model details dialog: null, or one working copy of a model row plus where it
          came from. There is no page-level draft any more — Save writes straight through. */
       const modelState = useState(null);
@@ -2790,6 +3088,150 @@ window.__ModuleLoader__.load({
         writeProvider({ [key]: next }, function () { setField(null); });
       }
 
+      function stopRowEvent(event) {
+        if (event === null || event === undefined) return;
+        if (typeof event.stopPropagation === "function") event.stopPropagation();
+      }
+
+      function testMark(row) {
+        return modelTests[current + "/" + String(row.id)];
+      }
+
+      function testStateOf(row) {
+        const mark = testMark(row);
+        return mark === undefined ? "idle" : mark.state;
+      }
+
+      /* One icon per verdict, all from the shipped kit and all the same size, so the button
+         never changes shape when the answer arrives. */
+      const TEST_ICONS = {
+        idle: "IconLinkOutlineRegular",
+        busy: "IconLoadingOutlineRegular",
+        ok: "IconCheckOutlineRegular",
+        miss: "IconWarningTriangleOutlineRegular",
+        fail: "IconCloseOutlineRegular"
+      };
+
+      /* A one-click connection check. The host exposes no "send a request" seam, so this
+         asks the adapter the question it can answer: what models does this route serve?
+         For a hand-declared gateway that is a real round-trip with the stored credential
+         (GET {baseURL}/models); for a catalog route the adapter answers from its registry.
+         The row's id is then checked against that answer. */
+      /* A local gateway answers in tens of milliseconds, and React coalesces the busy paint
+         with the verdict one — the spin then never reaches the screen. The busy state is
+         therefore held for at least this long. */
+      const TEST_SPIN_MS = 450;
+
+      function testModel(row) {
+        const llm = bridge.llm;
+        const id = String(row.id || "").trim();
+        if (id === "") { setNote(t("page.testNeedsId")); return; }
+        if (llm === undefined || llm === null) { setNote(t("page.fetchUnavailable")); return; }
+        const key = current + "/" + id;
+        const mark = function (state, message) {
+          const next = Object.assign({}, modelTests);
+          next[key] = { state: state, message: message };
+          setModelTests(next);
+        };
+        const startedAt = Date.now();
+        const settle = function (state, message) {
+          const wait = Math.max(0, TEST_SPIN_MS - (Date.now() - startedAt));
+          if (wait === 0) { mark(state, message); return; }
+          setTimeout(function () { mark(state, message); }, wait);
+        };
+        mark("busy", t("page.testing"));
+        /* The draft must carry the endpoint: for a route the catalog does not describe,
+           discovery hits {baseURL}/models and refuses to run without one ("pi-ai ships no
+           catalog for provider X"), which is exactly the route an operator wants to test. */
+        const request = { provider: current };
+        const liveBase = field !== null && field.baseURL !== undefined ? field.baseURL : profileString(profile, "baseURL");
+        const liveApi = field !== null && field.api !== undefined ? field.api : profileString(profile, "api");
+        if (liveBase !== "") request.baseURL = liveBase;
+        if (liveApi !== "") request.api = liveApi;
+        Promise.resolve(llm.discoverModels(namespace, request)).then(function (response) {
+          if (!response || !response.ok) {
+            const reason = (response && response.error && response.error.message) || "";
+            settle("fail", /ships no catalog/i.test(reason) ? t("page.testNoCatalog") : (reason || t("page.testFailed")));
+            return;
+          }
+          const found = Array.isArray(response.value) ? response.value : [];
+          const hit = found.some(function (entry) {
+            return entry !== null && entry !== undefined && String(entry.id) === id;
+          });
+          settle(hit ? "ok" : "miss", hit ? t("page.testOk") : t("page.testMissing"));
+        }, function (error) {
+          settle("fail", String((error && error.message) || error));
+        });
+      }
+
+      /* The animation must begin on the click itself. A class added by the React state
+         update only animates once that commit is painted, which can be a frame later (and
+         the whole request may finish inside that frame). Touching the DOM here starts the
+         spin in the same task; React's own className keeps it for the rest of the run. */
+      function startSpinNow(event) {
+        try {
+          const node = event && event.currentTarget;
+          if (node === null || node === undefined) return;
+          if (node.classList && typeof node.classList.add === "function") node.classList.add("dsh-mo-act-busy");
+          const svg = typeof node.querySelector === "function" ? node.querySelector("svg") : null;
+          if (svg !== null && svg !== undefined && svg.style) svg.style.animation = "dsh-mo-spin .9s linear infinite";
+        } catch (e) {}
+      }
+
+      function deleteModelRow(row) {
+        if (!writable) { setNote(t("page.readonly")); return; }
+        const target = row.original !== undefined ? row.original : row.id;
+        writeModels(draftRows.filter(function (item) { return String(item.original) !== String(target); }), function (error) {
+          if (error !== undefined) return;
+          setNote(t("page.modelDeleted"));
+        });
+      }
+
+      /* Drop a hand-declared route: the credential this page derived first (a key the user
+         configured elsewhere is not ours to remove, and a failed cleanup must not block the
+         delete), then the profile itself. Official routes never reach here. */
+      function confirmDeleteProvider() {
+        const route = deleteTarget;
+        if (route === null || route === undefined) return;
+        if (!writable) { setDeleteTarget(null); setNote(t("page.readonly")); return; }
+        setBusy("delete");
+        const after = function () {
+          const nextOrder = readProviderOrder().filter(function (id) { return providerKey(id) !== providerKey(route); });
+          writeProviderOrder(nextOrder);
+          const nextHidden = Object.assign({}, hidden.providers);
+          delete nextHidden[providerKey(route)];
+          writeHidden(HIDDEN_PROVIDERS_KEY, nextHidden);
+          setHidden({ providers: nextHidden, models: hidden.models });
+          setPicked(null);
+          setField(null);
+          setDeleteTarget(null);
+          setBusy("");
+          setNote("ok");
+        };
+        const drop = function () {
+          Promise.resolve(mutate([{ op: "unset", path: ["providers", route] }], revision)).then(function (result) {
+            if (!result || !result.ok) {
+              setBusy("");
+              setDeleteTarget(null);
+              setNote((result && result.error && result.error.message) || t("page.deleteFailed"));
+              return;
+            }
+            after();
+          }, function (error) {
+            setBusy("");
+            setDeleteTarget(null);
+            setNote(String((error && error.message) || error));
+          });
+        };
+        const credentials = bridge.credentials;
+        /* Clear the reference the profile actually names; a profile that named its own
+           (e.g. an env-style key) must not leave the derived one as the target. */
+        const named = route === current ? profileString(profile, "apiKeyEnv") : "";
+        const ref = named !== "" ? named : deriveKeyRef(route);
+        if (credentials === undefined || credentials === null || typeof credentials.unset !== "function") { drop(); return; }
+        Promise.resolve(credentials.unset(ref)).then(drop, drop);
+      }
+
       /* Every model change goes through here — the dialog's save, a drag reorder, the
          fetch picker and a delete all rewrite the same array, so there is exactly one
          writer and one revision source per pass (no draft to reconcile). */
@@ -2797,6 +3239,13 @@ window.__ModuleLoader__.load({
         if (!writable) { setNote(t("page.readonly")); return; }
         const built = modelsFromDraft(nextRows, t);
         if (built.error !== undefined) { setNote(built.error); if (done !== undefined) done(built.error); return; }
+        /* Emptying the list would leave the route unresolvable, which the host reports as a
+           resolution error on the next reload — refuse here, with the reason. */
+        if (built.models.length === 0) {
+          setNote(t("page.modelsRequired"));
+          if (done !== undefined) done(t("page.modelsRequired"));
+          return;
+        }
         let pending;
         try {
           pending = mutate([{ op: "set", path: ["providers", current, "models"], value: built.models }], revision);
@@ -2861,6 +3310,37 @@ window.__ModuleLoader__.load({
         }, function (error) { setBusy(""); setNote(String((error && error.message) || error)); });
       }
 
+      /* Discovery for a route that does not exist yet: the draft dialog carries the
+         endpoint, protocol and one-shot credential, which is exactly what the discovery
+         seam accepts (it never reads stored settings). Filling the ids here is what makes
+         the create button able to satisfy "a declared route must list its models". */
+      function fetchAddModels() {
+        const llm = bridge.llm;
+        if (llm === undefined || llm === null) { setAdd(Object.assign({}, addDialog, { error: t("page.fetchUnavailable") })); return; }
+        const route = addDialog.route.trim();
+        const baseURL = addDialog.baseURL.trim();
+        if (baseURL === "") { setAdd(Object.assign({}, addDialog, { error: t("page.baseUrlRequired") })); return; }
+        const request = { baseURL: baseURL, api: addDialog.api };
+        if (route !== "") request.provider = route;
+        const secret = addDialog.key.trim();
+        if (secret !== "") request.apiKey = secret;
+        setBusy("addfetch");
+        Promise.resolve(llm.discoverModels(namespace, request)).then(function (response) {
+          setBusy("");
+          if (!response || !response.ok) {
+            setAdd(Object.assign({}, addDialog, { error: (response && response.error && response.error.message) || "fetch failed" }));
+            return;
+          }
+          const found = Array.isArray(response.value) ? response.value : [];
+          const ids = parseModelIds(found.map(function (row) { return row !== null && row !== undefined && typeof row.id === "string" ? row.id : ""; }).join(","));
+          if (ids.length === 0) { setAdd(Object.assign({}, addDialog, { error: t("page.fetchEmpty") })); return; }
+          setAdd(Object.assign({}, addDialog, { models: ids.join(", "), error: "" }));
+        }, function (error) {
+          setBusy("");
+          setAdd(Object.assign({}, addDialog, { error: String((error && error.message) || error) }));
+        });
+      }
+
       /* A brand-new route: the profile and the key reference go in ONE mutate (one
          revision, so a concurrent edit cannot land between them), the secret goes to the
          credentials service, and the page then selects what it just created. */
@@ -2871,7 +3351,12 @@ window.__ModuleLoader__.load({
         if (providers[route] !== undefined) { setAdd(Object.assign({}, addDialog, { error: t("page.routeTaken") })); return; }
         const displayName = addDialog.displayName.trim();
         const baseURL = addDialog.baseURL.trim();
-        const profile = { api: addDialog.api };
+        /* A hand-declared route has no catalog entry, so the host refuses a profile whose
+           models list is empty ("resolves no models"). The dialog therefore requires the
+           ids up front instead of creating a route that cannot resolve. */
+        const modelIds = parseModelIds(addDialog.models);
+        if (modelIds.length === 0) { setAdd(Object.assign({}, addDialog, { error: t("page.modelsRequired") })); return; }
+        const profile = { api: addDialog.api, models: modelIds.map(function (id) { return { id: id }; }) };
         if (displayName !== "") profile.displayName = displayName;
         if (baseURL !== "") profile.baseURL = baseURL;
         const secret = addDialog.key.trim();
@@ -3041,7 +3526,7 @@ window.__ModuleLoader__.load({
           disabled: !writable,
           title: t("page.addProvider"),
           onClick: function () {
-            setAdd({ route: "", displayName: "", baseURL: "", api: apiChoices[0], key: "", error: "" });
+            setAdd({ route: "", displayName: "", baseURL: "", api: apiChoices[0], key: "", models: "", error: "" });
           },
           style: S.pageAddButton
         }, "+ " + t("page.addProvider"))
@@ -3107,7 +3592,37 @@ window.__ModuleLoader__.load({
               style: enabled ? S.pageDot : Object.assign({}, S.pageDot, S.pageDotMuted)
             }),
             h("span", { style: S.pageRowName }, row.name !== "" ? row.name : row.id),
-            h("span", { style: S.pageRowCount }, meta)
+            h("span", { style: S.pageRowCount }, meta),
+            h("span", { style: S.pageModelActions },
+              h("button", {
+                "data-mo": "page-model-test",
+                type: "button",
+                "data-mo-id": row.id,
+                "data-mo-state": testStateOf(row),
+                className: cx(
+                  "dsh-mo-act",
+                  testStateOf(row) === "busy" ? "dsh-mo-act-busy" : "",
+                  testStateOf(row) === "ok" ? "dsh-mo-act-ok" : testStateOf(row) === "miss" ? "dsh-mo-act-miss" : testStateOf(row) === "fail" ? "dsh-mo-act-danger" : ""
+                ),
+                "aria-label": t("page.test"),
+                title: testMark(row) === undefined ? t("page.testHint") : testMark(row).message,
+                disabled: busy === "models",
+                onMouseDown: stopRowEvent,
+                onClick: function (event) { stopRowEvent(event); startSpinNow(event); testModel(row); },
+                style: S.pageIconAction
+              }, kitIcon(TEST_ICONS[testStateOf(row)], "▶", 13)),
+              h("button", {
+                "data-mo": "page-model-delete",
+                type: "button",
+                "data-mo-id": row.id,
+                "aria-label": t("page.deleteModel"),
+                title: t("page.deleteModelHint"),
+                disabled: !writable || busy === "models",
+                onMouseDown: stopRowEvent,
+                className: "dsh-mo-act dsh-mo-act-danger",
+                onClick: function (event) { stopRowEvent(event); deleteModelRow(row); },
+                style: S.pageIconDelete
+              }, kitIcon("IconTrashOutlineRegular", "🗑", 13)))
           );
         }
       });
@@ -3126,6 +3641,16 @@ window.__ModuleLoader__.load({
           h("h3", { style: S.pageDetailTitle }, profile.displayName || current),
           h("span", { style: S.pageDetailRoute }, current),
           h("span", { style: S.pageSpacer }),
+          h("button", {
+            "data-mo": "page-provider-delete",
+            type: "button",
+            disabled: !writable,
+            "aria-label": t("page.deleteProvider"),
+            title: t("page.deleteProviderHint"),
+            className: "dsh-mo-act dsh-mo-act-danger",
+            onClick: function () { setDeleteTarget(current); },
+            style: S.pageIconDelete
+          }, kitIcon("IconTrashOutlineRegular", "🗑", 13)),
           h(Switch, {
             marker: "page-provider-switch",
             id: current,
@@ -3252,7 +3777,7 @@ window.__ModuleLoader__.load({
             style: S.pickBackdrop,
             onMouseDown: function (event) { if (event.target === event.currentTarget) setPicker(null); }
           },
-            h("div", { style: S.pickCard, role: "dialog", "aria-label": t("page.fetchTitle") },
+            h(DialogShell, { label: t("page.fetchTitle"), onClose: function () { setPicker(null); } },
               h("div", { style: S.pickHead },
                 h("h3", { style: S.pickTitle }, t("page.fetchTitle")),
                 h("button", {
@@ -3266,6 +3791,7 @@ window.__ModuleLoader__.load({
               h("div", { style: S.pickTools },
                 h("input", {
                   "data-mo": "fetch-search",
+                  "data-mo-focus": "true",
                   value: picker.query,
                   placeholder: t("page.fetchSearch"),
                   spellCheck: false,
@@ -3335,7 +3861,7 @@ window.__ModuleLoader__.load({
             style: S.pickBackdrop,
             onMouseDown: function (event) { if (event.target === event.currentTarget) setAdd(null); }
           },
-            h("div", { style: S.pickCard, role: "dialog", "aria-label": t("page.newTitle") },
+            h(DialogShell, { label: t("page.newTitle"), onClose: function () { setAdd(null); } },
               h("div", { style: S.pickHead },
                 h("h3", { style: S.pickTitle }, t("page.newTitle")),
                 h("button", {
@@ -3350,6 +3876,7 @@ window.__ModuleLoader__.load({
                 h("span", { style: S.pageFieldLabel }, t("page.route")),
                 h("input", {
                   "data-mo": "add-route",
+                  "data-mo-focus": "true",
                   value: addDialog.route,
                   placeholder: "my-gateway",
                   spellCheck: false,
@@ -3404,6 +3931,27 @@ window.__ModuleLoader__.load({
                   onKeyDown: function (event) { if (event.key === "Enter") createProvider(); },
                   style: S.pageInputWide
                 })),
+              h("label", { style: S.pageField },
+                h("span", { style: S.pageFieldLabel }, t("page.modelsField")),
+                h("input", {
+                  "data-mo": "add-models",
+                  value: addDialog.models,
+                  placeholder: t("page.modelsFieldPlaceholder"),
+                  spellCheck: false,
+                  onChange: function (event) { setAdd(Object.assign({}, addDialog, { models: event.target.value, error: "" })); },
+                  onKeyDown: function (event) { if (event.key === "Enter") createProvider(); },
+                  style: S.pageInputWide
+                }),
+                h("div", { style: S.pageKeyRow },
+                  h("button", {
+                    "data-mo": "add-fetch",
+                    type: "button",
+                    disabled: busy === "addfetch",
+                    title: t("page.modelsFieldHint"),
+                    onClick: fetchAddModels,
+                    style: S.pageButton
+                  }, busy === "addfetch" ? t("page.fetching") : t("page.fetchFromGateway")),
+                  h("span", { style: S.pageHint }, t("page.modelsFieldHint")))),
               addDialog.error === "" ? null : h("p", { "data-mo": "add-error", style: S.pageError }, addDialog.error),
               h("div", { style: S.pickFoot },
                 h("button", {
@@ -3510,7 +4058,7 @@ window.__ModuleLoader__.load({
             style: S.pickBackdrop,
             onMouseDown: function (event) { if (event.target === event.currentTarget) closeModel(); }
           },
-            h("div", { style: S.pickCard, role: "dialog", "aria-label": t("page.modelDialogTitle"), "data-mo": "model-dialog-card" },
+            h(DialogShell, { label: t("page.modelDialogTitle"), marker: "model-dialog-card", onClose: closeModel },
               h("div", { style: S.pickHead },
                 h("h3", { style: S.pickTitle }, modelDialog.mode === "new" ? t("page.modelDialogNew") : t("page.modelDialogTitle")),
                 h("button", {
@@ -3526,6 +4074,7 @@ window.__ModuleLoader__.load({
                   h("span", { style: S.pageFieldLabel }, t("page.modelId")),
                   h("input", {
                     "data-mo": "model-dialog-id",
+                    "data-mo-focus": "true",
                     value: row.id,
                     placeholder: t("page.modelId"),
                     spellCheck: false,
@@ -3656,6 +4205,43 @@ window.__ModuleLoader__.load({
           document.body);
       }
 
+      /* ----------------------- the delete-provider confirm ----------------------- */
+      let deleteNode = null;
+      if (deleteTarget !== null) {
+        deleteNode = ReactDOM.createPortal(
+          h("div", {
+            "data-mo": "provider-delete-dialog",
+            style: S.pickBackdrop,
+            onMouseDown: function (event) { if (event.target === event.currentTarget) setDeleteTarget(null); }
+          },
+            h(DialogShell, { label: t("page.deleteProvider"), onClose: function () { setDeleteTarget(null); } },
+              h("div", { style: S.pickHead },
+                h("h3", { style: S.pickTitle }, t("page.deleteProvider") + " · " + deleteTarget),
+                h("button", {
+                  "data-mo": "provider-delete-close",
+                  type: "button",
+                  title: t("page.cancel"),
+                  onClick: function () { setDeleteTarget(null); },
+                  style: S.pageIconButton
+                }, "✕")),
+              h("p", { style: S.pickDesc }, t("page.deleteProviderBody")),
+              h("div", { style: S.pickFoot },
+                h("button", {
+                  "data-mo": "provider-delete-cancel",
+                  type: "button",
+                  onClick: function () { setDeleteTarget(null); },
+                  style: S.pageButton
+                }, t("page.cancel")),
+                h("button", {
+                  "data-mo": "provider-delete-confirm",
+                  type: "button",
+                  disabled: busy === "delete",
+                  onClick: confirmDeleteProvider,
+                  style: S.pageButtonDanger
+                }, busy === "delete" ? t("page.working") : t("page.deleteProvider"))))),
+          document.body);
+      }
+
       return h("section", { "data-mo": "page", "data-mo-build": BUILD, style: S.pageRoot },
         h("header", { style: S.pageHead },
           h("div", { style: S.pageTitleRow },
@@ -3678,7 +4264,8 @@ window.__ModuleLoader__.load({
         h("p", { style: S.pageFooterHint }, t("page.note")),
         pickerNode,
         addNode,
-        modelNode
+        modelNode,
+        deleteNode
       );
     }
 
@@ -3943,7 +4530,7 @@ window.__ModuleLoader__.load({
     }
 
     /* `__test` is a test seam only: the loader reads name/apply/inject and ignores it. */
-    module.exports = { name: "model-organizer", apply: apply, inject: inject, __test: { visibleGroupsFor: visibleGroupsFor } };
+    module.exports = { name: "model-organizer", apply: apply, inject: inject, __test: { visibleGroupsFor: visibleGroupsFor, focusableIn: focusableIn } };
     return module.exports;
   }
 });