@objectivex666/dsh-settings-search 1.3.0 → 1.4.1

package/README.en.md

@@ -16,6 +16,7 @@
 - 📂 **In-page option search (v1.2.0)** — search beyond pages and reach the specific options inside them: Plugins-page tabs (`settings.plugins.tab`), Web UI plugin cards (`web-ui.plugin.item`), general rows, and more, each shown with a "page › option" breadcrumb.
 - 🧭 **Click-to-jump** — selecting a result clicks the matching left-nav entry to open its section; for tab options it also opens the tab and flashes the target row. A manual-path hint appears if automatic navigation is not possible.
 - 🌱 **Progressive indexing** — self-drawing settings rows are harvested from the rendered DOM (via their `[data-slot]` anchors) the first time their page is visited, then stay searchable.
+- 🛠 **Built-in settings page (v1.4.0)** — a "Settings Search" page in the left navigation shows the current version and checks npm for a newer release on demand; when one exists it hands you a copy-ready `dsh plugin update` command.
 - 🌐 **i18n** — built-in Chinese/English dictionaries that follow the DSH localization system and are easy to extend.
 - 🎨 **Theme-aware** — styled entirely with CSS variables, automatically following the DSH theme (light/dark).
 - ⚡ **Reactive** — subscribes to settings entries being added, removed, or changed, and refreshes results automatically.
@@ -79,7 +80,6 @@ lib/index.js        Host half (no-op — makes the package a valid Cordis plugin
 lib/client.js       Browser half (search UI, __ModuleLoader__ format)
 cordis.patch.yml    Composition patch: inserts the settings-search plugin row
 scripts/check.mjs   Structural self-checks (npm test)
-dsh-settings-search.js  Dynamic-plugin source (optional: in-session cordis_define usage)
 ```
 
 ## Development
@@ -88,6 +88,7 @@ dsh-settings-search.js  Dynamic-plugin source (optional: in-session cordis_defin
 npm test   # validates the host half, the dsh.client manifest, and the client bundle handoff
 ```
 
-## Dynamic-plugin usage (optional)
-
-Legacy usage: register the contents of `dsh-settings-search.js` as `code.client` through DSH's dynamic plugin system (`cordis_define`) — session-only and temporary. For anything persistent, use the profile-bundle install above.
+> Historical note: up to v1.1 the repo shipped `dsh-settings-search.js` (an
+> in-session `cordis_define` dynamic-plugin source). Because keeping it in
+> sync with the shipping package kept drifting silently, it was removed in
+> v1.4.1; retrieve it from git history (tag `v1.4.0`) if you need a reference.

package/README.md

@@ -16,6 +16,7 @@
 - 📂 **页内选项搜索（v1.2.0）**：不只搜页面，还能直达每个设置页内部的具体选项——插件页的标签页（`settings.plugins.tab`）、Web UI 插件的卡片（`web-ui.plugin.item`）、通用设置行等，结果以「页面 › 选项」面包屑展示。
 - 🧭 **点击即达**：选中结果后自动点击对应的左侧导航项打开所在分区；若是页内标签页会继续点开对应标签，并高亮闪烁目标选项行。无法自动跳转时显示手动路径提示。
 - 🌱 **渐进索引**：自绘界面的设置行会在其所在页面首次被访问时从渲染 DOM 中收割标题并加入索引（此后始终可搜）。
+- 🛠 **自带设置页（v1.4.0）**：左侧导航新增「设置搜索」页——展示当前版本，一键检查 npm 注册表上的最新版本；有更新时直接给出复制就用的 `dsh plugin update` 命令。
 - 🌐 **多语言支持**：内置中英文国际化，可跟随 DSH 本地化系统扩展。
 - 🎨 **主题适配**：完全使用 CSS 变量，自动跟随 DSH 主题（亮/暗）。
 - ⚡ **动态响应**：实时订阅设置项的新增/删除/变更，搜索结果自动刷新。
@@ -79,7 +80,6 @@ lib/index.js        Host half（空实现，保证作为合法 Cordis 插件行
 lib/client.js       Browser half（搜索框 UI，__ModuleLoader__ 格式）
 cordis.patch.yml    组合补丁：插入 settings-search 插件行
 scripts/check.mjs   结构自检（npm test）
-dsh-settings-search.js  动态插件源（可选：DSH 会话内 cordis_define 用法）
 ```
 
 ## 开发
@@ -88,8 +88,6 @@ dsh-settings-search.js  动态插件源（可选：DSH 会话内 cordis_define
 npm test   # 校验 host 半、dsh.client 清单、client bundle handoff
 ```
 
-## 动态插件用法（可选）
-
-旧版用法：把 `dsh-settings-search.js` 的内容作为 `code.client` 通过 DSH 的
-动态插件系统（`cordis_define`）注册，仅供会话内临时使用；命令行安装请使用
-上文的 profile bundle 方式。
+> 历史说明：v1.1 及之前仓库曾附带 `dsh-settings-search.js`（会话内
+> `cordis_define` 动态插件源）。因与正式包代码长期双份维护漂移，已于 v1.4.1
+> 移除；如需动态用法可从 git 历史（tag `v1.4.0`）取回参考。

package/lib/client.js

@@ -29,6 +29,9 @@ window.__ModuleLoader__.load({
     const React = require('react')
 
     const NS = 'settings-search-v5'
+    /** Single source of truth is package.json — scripts/check.mjs asserts this matches. */
+    const PKG_VERSION = '1.4.1'
+    const NPM_NAME = '@objectivex666/dsh-settings-search'
     const zh = {
       title: '设置',
       placeholder: '搜索设置…',
@@ -38,6 +41,17 @@ window.__ModuleLoader__.load({
       page: '页面',
       option: '选项',
       jumpFail: '未能自动跳转，请手动打开：{path}',
+      updn: '设置搜索',
+      updDesc: '设置面板顶部搜索框由本插件提供。在此检查插件的版本与更新。',
+      updCurrent: '当前版本',
+      updLatestKnown: 'npm 最新版',
+      updCheck: '检查更新',
+      updChecking: '正在检查…',
+      updNewest: '已是最新版本 ✓',
+      updFound: '发现新版本 {ver}，可执行以下命令更新后重启 DSH：',
+      updErr: '检查失败（网络或注册表不可达），请稍后重试。',
+      updCopy: '复制命令',
+      updCopied: '已复制 ✓',
     }
     const en = {
       title: 'Settings',
@@ -48,6 +62,17 @@ window.__ModuleLoader__.load({
       page: 'Page',
       option: 'Option',
       jumpFail: 'Could not navigate automatically — open it here: {path}',
+      updn: 'Settings Search',
+      updDesc: "The search box atop the settings panel comes from this plugin. Check its version and updates here.",
+      updCurrent: 'Current version',
+      updLatestKnown: 'npm latest',
+      updCheck: 'Check for updates',
+      updChecking: 'Checking…',
+      updNewest: 'You are on the latest version ✓',
+      updFound: 'Version {ver} available. Run the command below, then restart DSH:',
+      updErr: 'Check failed (network or registry unreachable). Try again later.',
+      updCopy: 'Copy command',
+      updCopied: 'Copied ✓',
     }
 
     /** Inner-row slots that represent specific options inside one page. */
@@ -80,6 +105,19 @@ window.__ModuleLoader__.load({
       .sss-guide { padding: 7px 10px; border-radius: 8px; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 18px; }
       @keyframes sssFlashBg { 0% { background-color: var(--dsw-alias-interactive-bg-hover); } 100% { background-color: transparent; } }
       .sss-flash { animation: sssFlashBg 1.8s ease-out; border-radius: 8px; }
+      .sss-upd { display: flex; flex-direction: column; gap: 12px; padding: 16px; max-width: 560px; }
+      .sss-upd-title { font-size: 15px; font-weight: 600; line-height: 22px; color: var(--dsw-alias-label-primary); margin: 0; }
+      .sss-upd-desc { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
+      .sss-upd-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; background: var(--dsw-alias-bg-layer-1); }
+      .sss-upd-row { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; }
+      .sss-upd-key { flex-shrink: 0; width: 88px; color: var(--dsw-alias-label-secondary); }
+      .sss-upd-val { color: var(--dsw-alias-label-primary); }
+      .sss-upd-badge { flex-shrink: 0; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 18px; }
+      .sss-btn { height: 28px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); font-size: 12px; cursor: pointer; }
+      .sss-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+      .sss-btn:disabled { opacity: .55; cursor: default; }
+      .sss-cmd { user-select: all; font-family: ui-monospace, Consolas, 'Courier New', monospace; font-size: 11.5px; line-height: 20px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; padding: 4px 8px; word-break: break-all; }
+      .sss-upd-note { margin: 0; font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-secondary); }
     `
     let stylesInstalled = false
     function installStyles() {
@@ -463,6 +501,94 @@ window.__ModuleLoader__.load({
         ])
       }
 
+      const compareSemver = (a, b) => {
+        const pa = String(a).split('.').map((n) => parseInt(n, 10) || 0)
+        const pb = String(b).split('.').map((n) => parseInt(n, 10) || 0)
+        for (let i = 0; i < 3; i += 1) {
+          if ((pa[i] ?? 0) !== (pb[i] ?? 0)) return (pa[i] ?? 0) - (pb[i] ?? 0)
+        }
+        return 0
+      }
+
+      function UpdatePanel() {
+        const [state, setState] = React.useState('idle') // idle | loading | newest | outdated | error
+        const [latest, setLatest] = React.useState('')
+        const [copied, setCopied] = React.useState(false)
+
+        React.useEffect(() => {
+          if (!copied) return
+          const off = setTimeout(() => setCopied(false), 1600)
+          return () => clearTimeout(off)
+        }, [copied])
+
+        const check = async () => {
+          setState('loading')
+          setCopied(false)
+          try {
+            const res = await fetch(`https://registry.npmjs.org/${NPM_NAME}/latest?t=${Date.now()}`)
+            if (!res.ok) throw new Error(`HTTP ${res.status}`)
+            const data = await res.json()
+            const ver = typeof data?.version === 'string' ? data.version : ''
+            if (ver === '') throw new Error('no version in registry response')
+            setLatest(ver)
+            setState(compareSemver(ver, PKG_VERSION) > 0 ? 'outdated' : 'newest')
+          } catch {
+            setState('error')
+          }
+        }
+
+        const copyCmd = async () => {
+          const cmd = `dsh plugin update ${NPM_NAME}`
+          try { await navigator.clipboard.writeText(cmd); setCopied(true) } catch { /* user can copy manually */ }
+        }
+
+        const statusNode = {
+          idle: React.createElement('span', { className: 'sss-upd-val' }, '—'),
+          loading: React.createElement('span', { className: 'sss-upd-val' }, t('updChecking')),
+          newest: React.createElement('span', { className: 'sss-upd-val' }, t('updNewest')),
+          error: React.createElement('span', { className: 'sss-upd-val' }, t('updErr')),
+          outdated: latest === '' ? null : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, [
+            React.createElement('p', { className: 'sss-upd-note' }, t('updFound').replace('{ver}', `v${latest}`)),
+            React.createElement('code', { className: 'sss-cmd' }, `dsh plugin update ${NPM_NAME}`),
+            React.createElement('div', null,
+              React.createElement('button', { className: 'sss-btn', type: 'button', onClick: () => { void copyCmd() } },
+                copied ? t('updCopied') : t('updCopy'))),
+          ]),
+        }
+
+        return React.createElement('div', { className: 'sss-upd' }, [
+          React.createElement('h3', { className: 'sss-upd-title' }, `${t('updn')} v${PKG_VERSION}`),
+          React.createElement('p', { className: 'sss-upd-desc' }, t('updDesc')),
+          React.createElement('div', { className: 'sss-upd-card' }, [
+            React.createElement('div', { className: 'sss-upd-row' }, [
+              React.createElement('span', { className: 'sss-upd-key' }, t('updCurrent')),
+              React.createElement('code', { className: 'sss-cmd' }, PKG_VERSION),
+              state === 'newest' ? React.createElement('span', { className: 'sss-upd-badge' }, 'npm ✓') : null,
+            ]),
+            state === 'outdated' || state === 'loading'
+              ? React.createElement('div', { className: 'sss-upd-row' }, [
+                  React.createElement('span', { className: 'sss-upd-key' }, t('updLatestKnown')),
+                  state === 'loading' ? React.createElement('span', { className: 'sss-upd-val' }, '…') : React.createElement('code', { className: 'sss-cmd' }, latest),
+                ])
+              : null,
+            state === 'outdated' || state === 'loading' || state === 'error' || state === 'idle' || state === 'newest'
+              ? (state === 'outdated' ? statusNode.outdated : statusNode[state])
+              : null,
+            React.createElement('div', { className: 'sss-upd-row' },
+              React.createElement('button', { className: 'sss-btn', type: 'button', disabled: state === 'loading', onClick: () => { void check() } },
+                state === 'loading' ? t('updChecking') : t('updCheck'))),
+          ]),
+        ])
+      }
+
+      ctx.slots.inject('settings.section', () => ctx.slots.register({
+        name: 'settings.section',
+        id: 'settings-search',
+        order: 1600,
+        locale: NS,
+        label: () => t('updn'),
+      }, UpdatePanel))
+
       ctx.slots.inject('settings.header', () => ctx.slots.register({
         name: 'settings.header',
         priority: -1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@objectivex666/dsh-settings-search",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "DSH settings panel search plugin – instantly filter setting sections and general items with navigation guidance. Installable via `dsh plugin add`.",
   "keywords": [
     "dsh",
@@ -33,7 +33,6 @@
     "lib",
     "cordis.patch.yml",
     "scripts",
-    "dsh-settings-search.js",
     "README.md",
     "README.en.md",
     "LICENSE"

package/scripts/check.mjs

@@ -54,6 +54,12 @@ check(typeof client.apply === 'function', 'client half must export apply(ctx)')
 check(Array.isArray(client.inject) && client.inject.includes('slots') && client.inject.includes('locale'),
   'client half inject must include "slots" and "locale"')
 
+// 4. embedded version constant matches the manifest (update panel displays it)
+const versionMatch = /const PKG_VERSION = '([^']+)'/.exec(source)
+check(versionMatch !== null, 'lib/client.js must define const PKG_VERSION')
+check(versionMatch?.[1] === pkg.version,
+  `PKG_VERSION (${versionMatch?.[1]}) must equal package.json version (${pkg.version})`)
+
 if (failed > 0) {
   console.error(`${failed} check(s) failed`)
   process.exit(1)

package/dsh-settings-search.js

@@ -1,179 +0,0 @@
-/**
- * settings-search 动态插件源文件（legacy，仅会话内临时使用）
- *
- * 说明：
- * - 这是 DSH 动态 Cordis 插件（Client half）的源码，通过 cordis_define 注册到运行中的
- *   DSH 进程，不落盘。仅供会话内临时使用；命令行安装请改用本仓库的 profile bundle
- *   形态（`dsh plugin add`，见 README），其浏览器半位于 lib/client.js，与本文件等价。
- * - 功能：在设置面板左侧导航栏顶部（settings.header 槽，priority:-1 shadow）添加搜索框，
- *   输入关键词实时搜索所有已注册设置页（settings.section）与通用设置项
- *   （settings.general.item），浮层展示结果，点击后显示左侧导航定位引导。
- * - 图标：SVG 放大镜（fill=currentColor），随主题文字颜色。
- * - 源码是 cordis_define 的 code.client 字段值：一个返回 Cordis Plugin 的纯 JS 函数体，
- *   无 TypeScript / JSX / import。
- *
- * 重新注册方式（会话内）：
- *   cordis_define({ kind: 'new', idPrefix: 'set' }, ...) 传入本文件的 code.client 内容。
- */
-
-return {
-  inject: ['slots', 'locale'],
-  apply(ctx) {
-    const NS = 'settings-search-v4'
-    ctx.effect(() => ctx.locale.register(NS, {
-      zh: {
-        title: '设置',
-        placeholder: '搜索设置…',
-        empty: '没有匹配的设置',
-        pages: '设置页',
-        rows: '通用设置项',
-        guide: '该设置位于左侧导航「{label}」，点击左侧导航项即可打开',
-        page: '设置页',
-        row: '设置项',
-      },
-      en: {
-        title: 'Settings',
-        placeholder: 'Search settings…',
-        empty: 'No matching settings',
-        pages: 'Settings pages',
-        rows: 'General items',
-        guide: 'This setting lives in "{label}" — open it from the left navigation',
-        page: 'Page',
-        row: 'Item',
-      },
-    }), 'settings-search: dictionaries')
-    const t = ctx.locale.bind(NS)
-
-    styles.insert(`
-      .sss-wrap { position: relative; display: flex; flex-direction: column; gap: 8px; }
-      .sss-title { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--dsw-alias-label-primary); }
-      .sss-box { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; height: 32px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-1); }
-      .sss-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--dsw-alias-label-tertiary); }
-      .sss-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; line-height: 22px; color: var(--dsw-alias-label-primary); }
-      .sss-input::placeholder { color: var(--dsw-alias-label-dimmed); }
-      .sss-clear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none; border-radius: 4px; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 1; cursor: pointer; }
-      .sss-clear:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
-      .sss-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--dsw-alias-bg-overlay); border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; box-shadow: var(--dsw-shadow-lv3); padding: 6px; max-height: 300px; overflow: auto; }
-      .sss-groups { display: flex; flex-direction: column; gap: 8px; }
-      .sss-group-title { font-size: 11px; color: var(--dsw-alias-label-secondary); letter-spacing: .05em; padding: 2px 6px; }
-      .sss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
-      .sss-item { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
-      .sss-item:hover { background: var(--dsw-alias-interactive-bg-hover); }
-      .sss-item-label { flex: 1; min-width: 0; color: var(--dsw-alias-label-primary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-      .sss-item-id { font-size: 10px; color: var(--dsw-alias-label-secondary); flex-shrink: 0; }
-      .sss-empty { margin: 0; padding: 10px 8px; color: var(--dsw-alias-label-secondary); font-size: 13px; }
-      .sss-guide { padding: 7px 10px; border-radius: 8px; background: var(--dsw-alias-bg-layer-1); border: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-primary); font-size: 12px; line-height: 18px; }
-    `)
-
-    const resolveLabel = (entry) => {
-      const raw = entry.options.label
-      if (typeof raw === 'function') return String(raw())
-      return raw == null ? '' : String(raw)
-    }
-    const readSections = () => ctx.slots.entries('settings.section')
-      .filter((e) => e.options.id !== 'settings-search')
-      .map((e) => ({ id: e.options.id, order: e.options.order ?? 0, label: resolveLabel(e) }))
-      .sort((a, b) => a.order - b.order)
-    const readRows = () => ctx.slots.entries('settings.general.item')
-      .map((e) => ({ id: e.options.id, order: e.options.order ?? 0, label: resolveLabel(e) }))
-      .sort((a, b) => a.order - b.order)
-
-    const SearchIcon = React.createElement('svg', {
-      className: 'sss-icon',
-      viewBox: '0 0 16.5 16.5',
-      width: 16,
-      height: 16,
-      xmlns: 'http://www.w3.org/2000/svg',
-      'aria-hidden': 'true',
-    }, [
-      React.createElement('path', {
-        d: 'M11.894845 6.647401C11.894845 3.725463 9.534486 1.356779 6.623219 1.35657C3.711786 1.35657 1.351635 3.725338 1.351635 6.647401C1.351843 9.569296 3.711911 11.938273 6.623219 11.938273C9.534361 11.938064 11.894637 9.569171 11.894845 6.647401ZM13.245462 6.647401C13.245254 10.317935 10.280401 13.293613 6.623219 13.293821C2.965871 13.293821 0.000204 10.31806 0 6.647401C0 2.976574 2.965746 0 6.623219 0C10.280526 0.000205 13.245462 2.9767 13.245462 6.647401Z',
-        fill: 'currentColor',
-      }),
-      React.createElement('path', {
-        d: 'M16.000417 15.041079L15.044449 16.000433L11.530434 12.473588L12.486298 11.514234L16.000417 15.041079Z',
-        fill: 'currentColor',
-      }),
-    ])
-
-    function SettingsHeaderSearch() {
-      const [query, setQuery] = React.useState('')
-      const [open, setOpen] = React.useState(false)
-      const [sections, setSections] = React.useState(readSections)
-      const [rows, setRows] = React.useState(readRows)
-      const [selected, setSelected] = React.useState(null)
-      React.useEffect(() => {
-        const refresh = () => {
-          setSections(readSections())
-          setRows(readRows())
-        }
-        const offs = [
-          ctx.slots.subscribe('settings.section', refresh),
-          ctx.slots.subscribe('settings.general.item', refresh),
-          ctx.locale.subscribe(refresh),
-        ]
-        return () => { for (const off of offs) off() }
-      }, [])
-
-      const q = query.trim().toLowerCase()
-      const tokens = q.split(/\s+/).filter(Boolean)
-      const match = (label, id) => tokens.every((tok) => (label + ' ' + id).toLowerCase().includes(tok))
-      const shownSections = tokens.length ? sections.filter((s) => match(s.label, s.id)) : []
-      const shownRows = tokens.length ? rows.filter((r) => match(r.label, r.id)) : []
-      const none = tokens.length > 0 && shownSections.length === 0 && shownRows.length === 0
-
-      const renderItem = (item, kind) => React.createElement('li', {
-        key: item.id,
-        className: 'sss-item',
-        onMouseDown: () => { setSelected(item); setOpen(false) },
-      }, [
-        React.createElement('span', { className: 'sss-item-label' }, item.label || item.id),
-        React.createElement('span', { className: 'sss-item-id' }, kind),
-      ])
-
-      return React.createElement('div', { className: 'sss-wrap' }, [
-        React.createElement('div', { className: 'sss-title' }, t('title')),
-        React.createElement('div', { className: 'sss-box' }, [
-          SearchIcon,
-          React.createElement('input', {
-            className: 'sss-input',
-            value: query,
-            placeholder: t('placeholder'),
-            spellCheck: false,
-            onChange: (e) => { setQuery(e.target.value); setOpen(true) },
-            onFocus: () => setOpen(true),
-            onBlur: () => setOpen(false),
-          }),
-          query !== '' ? React.createElement('button', {
-            className: 'sss-clear',
-            type: 'button',
-            onClick: () => { setQuery(''); setSelected(null); setOpen(false) },
-          }, '✕') : null,
-        ]),
-        open && tokens.length > 0 ? React.createElement('div', { className: 'sss-pop' }, [
-          none
-            ? React.createElement('p', { className: 'sss-empty' }, t('empty'))
-            : React.createElement('div', { className: 'sss-groups' }, [
-                shownSections.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
-                  React.createElement('div', { className: 'sss-group-title' }, t('pages')),
-                  React.createElement('ul', { className: 'sss-list' }, shownSections.map((s) => renderItem(s, t('page')))),
-                ]) : null,
-                shownRows.length > 0 ? React.createElement('div', { className: 'sss-group' }, [
-                  React.createElement('div', { className: 'sss-group-title' }, t('rows')),
-                  React.createElement('ul', { className: 'sss-list' }, shownRows.map((r) => renderItem(r, t('row')))),
-                ]) : null,
-              ]),
-        ]) : null,
-        selected !== null
-          ? React.createElement('div', { className: 'sss-guide' }, t('guide').replace('{label}', selected.label || selected.id))
-          : null,
-      ])
-    }
-
-    ctx.slots.inject('settings.header', () => ctx.slots.register({
-      name: 'settings.header',
-      priority: -1,
-      locale: NS,
-    }, SettingsHeaderSearch))
-  },
-}