elcrm 1.1.1 → 1.1.2

package/templates/elcrm-docs/ICONS.elCRM.md

@@ -0,0 +1,40 @@
+<!-- Сгенерировано `elcrm docs`. Источник: @elcrm/icons. Обновление: снова elcrm docs. -->
+
+# `@elcrm/icons`
+
+CLI синхронизации SVG с [icons.elpm.dev](https://icons.elpm.dev). **Набор иконок в npm не входит** — только CLI и компонент `Icons`.
+
+## Можно
+
+```bash
+icons remote https://icons.elpm.dev/{login}/{token}.icon   # пишет .icons
+icons update                                               # → src/icons.generated.tsx
+icons app fnqgs                                            # иконка приложения в public/
+icons migrate                                              # старый ./Icons → @elcrm/icons
+icons prune / icons prune --save
+```
+
+Vite (`register`, формат по умолчанию):
+
+```ts
+import { icons } from "@elcrm/icons/vite";
+export default defineConfig({ plugins: [icons(), react()] });
+```
+
+```tsx
+import { Icons } from "@elcrm/icons";
+<Icons.Line name="search" size={20} />
+```
+
+Ручной `import "./icons.generated"` **не нужен** — плагин подставляет файл.
+
+Проверка: `hasIcons()` / `needsRegister()`.
+
+## Нельзя
+
+- Класть SVG-набор в git как «библиотеку пакета» — качайте через `icons update`.
+- Вызывать `icons update` без `.icons` (`icons remote` сначала).
+- Передавать `#` в hash для `icons app` в shell (`#` = комментарий).
+- Импортировать локальный `./Icons`, если уже `@elcrm/icons` (см. `icons migrate`).
+
+Формат `file`: `import { Icons } from "./icons.generated"` — standalone, без vite-плагина.

package/templates/elcrm-docs/MODAL.elCRM.md

@@ -0,0 +1,41 @@
+<!-- Сгенерировано `elcrm docs`. Пакет: @elcrm/modal. -->
+
+# `@elcrm/modal`
+
+Очередь окон. Обязательно `<Modal.Init />` в корне.
+
+## Канон: `Modal.Create`
+
+```tsx
+function EditModal({ id, onClose }: { id: number; onClose?: () => void }) {
+  return (
+    <Modal.Main title="Редактирование" onClose={onClose} size="m">
+      <Modal.Scroll>…</Modal.Scroll>
+    </Modal.Main>
+  );
+}
+const { Open, Icon } = Modal.Create(EditModal, "edit-modal");
+Open({ id: 123 });
+```
+
+Файлы модулей: `modules/<Type>/modal/<Name>.tsx` + `Modal.Open("Type", "Name", params)` или `import_modules` у Init.
+
+## Состав
+
+| API | Зачем |
+| --- | --- |
+| `Modal.Main` | окно + оверлей: `title`, `size`, `button`, `tabs`, `menu`, `shake`, `escape` |
+| `Modal.Panel` | без оверлея |
+| `Modal.Scroll` / `Center` / `Form` / `Column` / `List` | раскладка |
+| `Modal.Close(name?)` | одно или все |
+| `Modal.Shake` | тряска |
+
+`size`: `a` auto · `s` 400 · `m` 500 · `l` 800 · `x` 1000 · `f` full.  
+`escape` закрывает верхнее; клик по оверлею при `shake` (default true) трясёт, не закрывает; крестик закрывает всегда.
+
+## Нельзя
+
+- `Modal.Add` в новом коде — `elcrm migrate modal-create` / `elcrm test` warn. Add ещё работает, но Create задаёт стабильный `name`.
+- `key={Date.now()}` на модалке.
+- Без `Modal.Init`.
+- Нативные input внутри модалки — `@elcrm/form`.

package/templates/elcrm-docs/NOTICE.elCRM.md

@@ -0,0 +1,31 @@
+<!-- Сгенерировано `elcrm docs`. Пакет: @elcrm/notice. -->
+
+# `@elcrm/notice`
+
+Тосты. Один `<Notice.Init position="top-right" durationMs={2200} maxVisible={4} />` в корне.
+
+```tsx
+import { Notice } from "@elcrm/notice";
+
+Notice.Success("Готово");
+Notice.Error("Ошибка");
+Notice.Remark("Подсказка");
+Notice.Copy("Скопировано");
+Notice.Undo("Удалено", { onUndo: () => restore() });
+Notice.Close(id);
+Notice.CloseAll();
+```
+
+## Можно
+
+- `Init`: `durationMs` (≥100), `maxVisible`, `pauseOnHover`, `undoLabel`, `icon` (false = палочка), `position`, `titles`.
+- Второй аргумент: `boolean` hide или `{ hide, actions, … }` (до двух кнопок).
+- `Notice.Send({ type, text, … })` / `Notice.Custom`.
+- Методы возвращают `NoticeId`.
+- `Form.Init onNotice={(msg) => Notice.Remark(String(msg))}` — связка с формой.
+
+## Нельзя
+
+- Несколько Init.
+- `alert()` вместо тоста для немодальных сообщений (модальный вопрос — `@elcrm/alert`).
+- `import "@elcrm/notice/themes.css"`.

package/templates/elcrm-docs/NOTIFICATIONS.elCRM.md

@@ -0,0 +1,39 @@
+<!-- Сгенерировано `elcrm docs`. Пакет: @elcrm/notifications. -->
+
+# `@elcrm/notifications`
+
+In-app inbox + Web Push. Сервер: `@elcrm/server` (subpath notifications), не `web-push`.
+
+```tsx
+import { Notifications, bindRouterNavigate } from "@elcrm/notifications";
+import workerUrl from "@elcrm/notifications/worker?url";
+
+bindRouterNavigate((url) => { /* Router / pathname */ });
+
+<Notifications.Init
+  workerUrl={workerUrl}
+  tenantId="app"
+  groupBy="module"
+  appBadge
+  autoSync
+  getVapidPublicKey={async () => (await Api.query("notifications/vapid")).publicKey}
+  onSubscribe={(sub) => Api.query("notifications/subscribe", sub)}
+  fetchPrefs={async () => (await Api.query("notifications/prefsGet")).prefs}
+  onPrefsChange={(p) => Api.query("notifications/prefsSet", p)}
+/>
+<Notifications.Bell />
+```
+
+## Можно
+
+- Push enable/disable/sync, SW, `subscriptionchange`.
+- Inbox: группировка `module` / `tag`.
+- Quiet hours / mute в Bell.
+- `navigator.setAppBadge` (`appBadge`).
+- Навигация: `onNavigate` / `bindRouterNavigate` / событие `elcrm:navigate`.
+
+## Нельзя
+
+- Пакет `web-push` на сервере — `@elcrm/server/notifications`.
+- Забывать Service Worker URL (`worker?url`).
+- FCM/APNs SDK — этого пакета нет, свой VAPID + сервер elCRM.

package/templates/elcrm-docs/PASSKEY.elCRM.md

@@ -0,0 +1,26 @@
+<!-- Сгенерировано `elcrm docs`. Пакет: @elcrm/passkey. -->
+
+# `@elcrm/passkey`
+
+Клиент WebAuthn. Сервер: `@elcrm/server/passkey`.
+
+```ts
+import { createPasskeyClient } from "@elcrm/passkey";
+import { usePasskeyClient, usePasskeySupport } from "@elcrm/passkey/react";
+
+const passkey = createPasskeyClient({ baseUrl: "https://api.example.com/v1" });
+await passkey.register({ userId, username });
+await passkey.login({ userId });
+await passkey.loginDiscoverable();
+await passkey.remove({ userId, credentialId });
+```
+
+Пути: `/passkey/register|auth|discoverable|remove` + `options`/`verify`. Переопределение: `paths`, `headers`, `fetch`.
+
+Ядро **без React**. Хуки — `@elcrm/passkey/react`. Ошибки: `PasskeyError.code`.
+
+## Нельзя
+
+- `createPasskey` / `authenticateWithPasskey` — **не экспортируются** (`elcrm test` error).
+- Импорт серверного passkey на фронт.
+- Свой fetch на `/passkey/*` в обход клиента, если нет причины.

package/templates/elcrm-docs/ROUTER.elCRM.md

@@ -0,0 +1,34 @@
+<!-- Сгенерировано `elcrm docs`. Пакет: @elcrm/router. -->
+
+# `@elcrm/router`
+
+Состояние `Router.data` + опциональный URL + lazy chunk. Это **не** React Router.
+
+```tsx
+import { Router, LoadRoute } from "@elcrm/router";
+
+Router.createRouter({
+  defaults: { page: "Main", module: "Home" },
+  auth: "Auth",
+  glob: import.meta.glob("./{pages,modules}/**/*.{tsx,ts}", { eager: false }),
+});
+
+<LoadRoute variant="page" defaultName="Main" resolveLazyPage={resolvePage}>
+  <span aria-hidden />
+</LoadRoute>
+```
+
+## Можно
+
+- Состояние: `useRouter`, `setRouter`, `mergeRouter`, `getRouter`, `resetRouter`, `matchesRouter`.
+- Типизация: `declare module "@elcrm/router" { interface RouterDataMap { page: "Auth"|"Main"; module: … } }`.
+- Секции модуля: отдельный ключ (`section` / `listTab` / `accountTab`) — **не один ключ на все вкладки**.
+- `createLazyResolver` + `import(\`./sections/${key}.tsx\`)` (`export default`).
+- Persist sessionStorage (crypto), `urlTemplate` по желанию.
+- `GuardRoute`, `RouteLoader`, `RouterOutletStack`.
+
+## Нельзя
+
+- `react-router` / `window.location` как основной роутер приложения.
+- Смешивать ключи вкладок разных модулей (после смены таба откроется чужая lazy-секция).
+- Нормализовать регистр сегментов самостоятельно, если URL-слой включён — библиотека не нижний регистр.

package/templates/elcrm-docs/SERVER.elCRM.md

@@ -0,0 +1,53 @@
+<!-- Сгенерировано `elcrm docs`. Источник: @elcrm/server + elcrm test (server). Обновление: снова elcrm docs. -->
+
+# `@elcrm/server`
+
+Bun HTTP/RPC. Одна зависимость `@elcrm/server`. Клиент: `@elcrm/api` + `@elcrm/socket`.
+
+## Можно
+
+```ts
+import { createServer, createRouter, rpcOk, rpcLogout } from "@elcrm/server";
+import { initDB, db } from "@elcrm/server/db";
+import { createJWT } from "@elcrm/server/jwt";
+import { cron } from "@elcrm/server/cron";
+import { createSocket, sendSocket } from "@elcrm/server/ws";
+
+createRouter("health").use("ping", async () => rpcOk({ ok: true }));
+
+createSocket("ws")
+  .use("auth", async ({ user }) => ({ id: String(user.id) }));
+
+cron.use(async () => { /* … */ }, 60_000, "name");
+
+await initDB({ type: "sqlite", database: DB_PATH }); // каталог создаёт openSqlite
+await createServer({ port, prefix: "/v1", jwt, cron: true });
+```
+
+Path-RPC: `/{prefix}/{router}/{method}`. Сессия: `createServer({ jwt })` кладёт `user` — в handler не звать `jwt.init` повторно. Гейт: middleware `if (!user?.id) return rpcLogout()`.
+
+Env: `TOKEN` / `JWT_SECRET`, `CORS_ORIGINS` (origins **без path**, через запятую), `PORT`. Секреты: `bunx elcrm-server env seal` → `.env.crypto`.
+
+Файлы: `Bun.file` / `Bun.write`. Почта: `@elcrm/server/mail`. Push: `@elcrm/server/notifications`.
+
+Проверка: `elcrm test --server` или `bunx elcrm-server test .`. Автозамены: `bunx elcrm-server update`.
+
+## Нельзя
+
+| Было | Стало |
+| --- | --- |
+| `@elcrm/db` `@elcrm/jwt` `@elcrm/cron` `@elcrm/tb` | `@elcrm/server/db` `/jwt` `/cron` `/tb` |
+| `createServerFromEnv` | `createServer()` |
+| `createJwtFromEnv` / `createCronFromEnv` / `createTbFromEnv` | `createJWT` / `createCron` / `createTb` |
+| `createWsHub` / `serverConnect` | `createSocket("ws").use(…)` |
+| `hub.sendListen` | `sendSocket` |
+| `Cron.useJob` / namespace `Cron` | `cron.use` |
+| REST `path === "/api/…"` / `handle*(ctx): Promise<Response>` | `createRouter().use()` |
+| `nodemailer` / `web-push` | `@elcrm/server/mail` / `notifications` |
+| `process.env.CORS_ORIGIN` | `CORS_ORIGINS` |
+| `import { mkdirSync } from "node:fs"` для SQLite | `initDB` сам создаёт каталог |
+| `from "node:path"` в app | строки путей / Bun |
+
+Не светить `err.message` клиенту — throw даёт `{ status:"error", data:"internal" }` + 500; детали только в лог.
+
+Структура API (panel): `src/index.ts` (createServer) · `src/routes/*.ts` (createRouter) · `src/lib/db.ts` · `jwt.ts` · `cron.ts` · `config.ts`.

package/templates/elcrm-docs/SOCKET.elCRM.md

@@ -0,0 +1,34 @@
+<!-- Сгенерировано `elcrm docs`. Пакет: @elcrm/socket (клиент). -->
+
+# `@elcrm/socket`
+
+Клиент SharedWorker WebSocket. Сервер: `@elcrm/server/ws` (`createSocket`), **не** этот пакет.
+
+```ts
+import { Socket } from "@elcrm/socket";
+
+Socket.configure({ storageKey: "elcrm-token" }); // тот же ключ, что Api ssid
+await Socket.createFromApiUrl(apiUrl, ukey, "/ws");
+await Socket.connect(ukey);
+Socket.send("inbox", { … });
+await Socket.fetch("inbox", { … });
+```
+
+React: `useConnect` из `@elcrm/socket/react` — сначала `create`/`createFromApiUrl`.
+
+| Метод | |
+| --- | --- |
+| `create` / `createFromApiUrl` | сохранить link (шифруется в localStorage) |
+| `connect` / `detach` / `disconnect` | вкладка / все вкладки |
+| `send(path, data)` | path-RPC |
+| `sendRaw` / `onMessage` / `onStatus` | сырой канал |
+| `fetch` | Promise + listen |
+| `supported` / `isConnected` | |
+
+`ukey` = ssid HTTP. Worker: `@elcrm/socket/worker?sharedworker&url` при отдельном подключении.
+
+## Нельзя
+
+- `serverConnect` / `createWsHub` / `from "@elcrm/socket/server"` / `@elcrm/socket-server` — `elcrm migrate socket-server`.
+- На сервере импортировать `@elcrm/socket` для hub.
+- Другой path WS, чем у `createSocket` на API (часто `/ws`).

package/templates/elcrm-docs/TOOLTIP.elCRM.md

@@ -0,0 +1,25 @@
+<!-- Сгенерировано `elcrm docs`. Пакет: @elcrm/tooltip. -->
+
+# `@elcrm/tooltip`
+
+Подсказка в portal, общий overlay z-index. Не нативный `title`.
+
+```tsx
+import { Tooltip } from "@elcrm/tooltip";
+
+<Tooltip content="Подсказка" placement="top">
+  <Button label="…" />
+</Tooltip>
+```
+
+## Можно
+
+- `placement`: `top` \| `bottom` \| `left` \| `right` (не `orientation` — deprecated).
+- `delay` / `delayHide`, `disabled`, `textAlign`, `open` (отладка).
+- Токены `--tooltip-*` в теме.
+- z-index сам: `acquireOverlayZIndex` вручную не нужен.
+
+## Нельзя
+
+- Атрибут `title` на контролах UI как единственная подсказка.
+- Свой `z-index: 99999` на оверлеях — конфликт с modal/form/alert/notice.

package/templates/panel/web/src/style/theme-dark.css

@@ -64,9 +64,9 @@ body[data-theme="dark"] {
 
   /* —— form / control —— */
   --field-border: 1px solid var(--line);
-  --field-border-hover: 1px solid #3a4558;
-  --field-border-focus: 1px solid var(--accent);
-  --field-border-disabled: 1px solid var(--line);
+  --field-border-hover: #3a4558;
+  --field-border-focus: var(--accent);
+  --field-border-disabled: var(--line);
   --field-focus-ring: rgba(91, 140, 255, 0.28);
   --field-focus-shadow: 0 0 0 3px var(--field-focus-ring);
   --field-background: #0c0f14;
@@ -78,6 +78,39 @@ body[data-theme="dark"] {
   --field-placeholder: var(--muted);
   --field-label-color: var(--muted);
   --field-icon-color: var(--muted);
+
+  /* —— search (@elcrm/search) —— */
+  --search-border: var(--field-border);
+  --search-border-focus: var(--field-border-focus);
+  --search-background: var(--field-background);
+  --search-color: var(--field-color);
+  --search-placeholder: var(--field-placeholder);
+  --search-icon-color: var(--field-icon-color);
+  --search-focus-shadow: var(--field-focus-shadow);
+  --search-clear-hover-color: var(--field-color);
+  --search-clear-hover-bg: rgba(255, 255, 255, 0.08);
+  --search-badge-border: 1px solid var(--line);
+  --search-badge-background: rgba(255, 255, 255, 0.06);
+  --search-badge-color: var(--muted);
+  --search-list-border: 1px solid var(--line);
+  --search-list-background: #12161e;
+  --search-list-color: var(--field-color);
+  --search-list-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
+  --search-option-active-bg: rgba(91, 140, 255, 0.16);
+  --search-option-active-color: var(--text);
+  --search-option-meta-color: var(--muted);
+  --search-ghost-bg: transparent;
+  --search-ghost-bg-focus: rgba(255, 255, 255, 0.06);
+  --search-ghost-fg: var(--text);
+  --search-border-ghost: 1px solid transparent;
+  --search-border-ghost-focus: 1px solid var(--line);
+  --search-ghost-focus-shadow: none;
+  --search-filled-bg: rgba(255, 255, 255, 0.08);
+  --search-filled-bg-focus: rgba(255, 255, 255, 0.12);
+  --search-filled-fg: var(--text);
+  --search-border-filled: 1px solid transparent;
+  --search-border-filled-focus: 1px solid var(--line);
+  --search-filled-focus-shadow: none;
   --field-check-box-border: 2px solid var(--muted);
   --field-error-border: var(--danger);
   --field-error-color: #ff8e8e;
@@ -88,6 +121,9 @@ body[data-theme="dark"] {
   --select-li-hover-bg: rgba(255, 255, 255, 0.06);
   --select-li-selected-bg: rgba(91, 140, 255, 0.18);
 
+  /* @elcrm/form — общая тень попапов (Date / Select / Color / Time) */
+  --popup-shadow: 0 6px 24px 0 #00000040;
+
   /* —— modal / alert / notice —— */
   --modal-background-color: var(--panel-elevated);
   --modal-background-overflow: rgba(0, 0, 0, 0.65);

package/templates/panel/web/src/style/theme-light.css

@@ -64,9 +64,9 @@ body[data-theme="light"] {
 
   /* —— form / control —— */
   --field-border: 1px solid var(--line);
-  --field-border-hover: 1px solid #b8c0ce;
-  --field-border-focus: 1px solid var(--accent);
-  --field-border-disabled: 1px solid var(--line);
+  --field-border-hover: #b8c0ce;
+  --field-border-focus: var(--accent);
+  --field-border-disabled: var(--line);
   --field-focus-ring: rgba(59, 110, 245, 0.22);
   --field-focus-shadow: 0 0 0 3px var(--field-focus-ring);
   --field-background: #ffffff;
@@ -78,6 +78,39 @@ body[data-theme="light"] {
   --field-placeholder: var(--muted);
   --field-label-color: var(--muted);
   --field-icon-color: var(--muted);
+
+  /* —— search (@elcrm/search) —— */
+  --search-border: var(--field-border);
+  --search-border-focus: var(--field-border-focus);
+  --search-background: var(--field-background);
+  --search-color: var(--field-color);
+  --search-placeholder: var(--field-placeholder);
+  --search-icon-color: var(--field-icon-color);
+  --search-focus-shadow: var(--field-focus-shadow);
+  --search-clear-hover-color: var(--field-color);
+  --search-clear-hover-bg: rgba(26, 31, 41, 0.08);
+  --search-badge-border: 1px solid var(--line);
+  --search-badge-background: #eef1f6;
+  --search-badge-color: var(--muted);
+  --search-list-border: 1px solid var(--line);
+  --search-list-background: var(--field-background);
+  --search-list-color: var(--field-color);
+  --search-list-shadow: 0 8px 24px rgba(15, 18, 22, 0.12);
+  --search-option-active-bg: rgba(59, 110, 245, 0.1);
+  --search-option-active-color: var(--text);
+  --search-option-meta-color: var(--muted);
+  --search-ghost-bg: transparent;
+  --search-ghost-bg-focus: rgba(26, 31, 41, 0.04);
+  --search-ghost-fg: var(--text);
+  --search-border-ghost: 1px solid transparent;
+  --search-border-ghost-focus: 1px solid var(--line);
+  --search-ghost-focus-shadow: none;
+  --search-filled-bg: #eef1f6;
+  --search-filled-bg-focus: #e2e7ef;
+  --search-filled-fg: var(--text);
+  --search-border-filled: 1px solid transparent;
+  --search-border-filled-focus: 1px solid var(--line);
+  --search-filled-focus-shadow: none;
   --field-check-box-border: 2px solid var(--muted);
   --field-error-border: var(--danger);
   --field-error-color: var(--danger);
@@ -88,6 +121,9 @@ body[data-theme="light"] {
   --select-li-hover-bg: rgba(26, 31, 41, 0.05);
   --select-li-selected-bg: rgba(59, 110, 245, 0.12);
 
+  /* @elcrm/form — общая тень попапов (Date / Select / Color / Time) */
+  --popup-shadow: 0 6px 24px 0 #00000040;
+
   /* —— modal / alert / notice —— */
   --modal-background-color: #ffffff;
   --modal-background-overflow: rgba(26, 31, 41, 0.4);

package/templates/panel/web/src/style/theme.css

@@ -4,8 +4,12 @@
  */
 :root {
   /* —— button (@elcrm/button: геометрия без цвета) —— */
-  --button-height: var(--control-height);
+  --button-height: var(--control-height-m, var(--control-height));
+  --button-height-s: var(--control-height-s, 32px);
+  --button-height-m: var(--control-height-m, var(--control-height));
+  --button-height-l: var(--control-height-l, 48px);
   --button-padding: 0.65em 1em;
+  --button-padding-s: 0 8px;
   --button-gap: 0.5em;
   --button-radius: 10px;
   --button-border: 1px solid transparent;
@@ -37,15 +41,59 @@
 
   /* —— form / control —— */
   --control-height: 44px;
+  --control-height-s: 32px;
+  --control-height-m: var(--control-height);
+  --control-height-l: 48px;
   --control-radius: 10px;
-  --control-side-padding: 14px;
   --control-font-size: 15px;
   --field-height: var(--control-height);
   --field-width: 100%;
-  --field-padding: 10px 12px;
+  /* единый padding капсулы (size s|m|l → через --field-height) */
+  --field-padding-block: calc(var(--field-height) * 0.18);
+  --field-padding-inline: calc(var(--field-height) * 0.32);
+  --field-padding: var(--field-padding-block) var(--field-padding-inline);
   --field-radius: var(--control-radius);
   --field-label-size: 13px;
 
+  /* —— search (@elcrm/search: геометрия без цвета) —— */
+  --search-height-s: var(--control-height-s);
+  --search-height-m: var(--control-height-m);
+  --search-height-l: var(--control-height-l);
+  --search-size-s: 13px;
+  --search-size-m: var(--control-font-size);
+  --search-size-l: 17px;
+  --search-padding-x: 10px;
+  --search-padding-x-s: 8px;
+  --search-padding-x-l: 12px;
+  --search-gap: 8px;
+  --search-gap-s: 6px;
+  --search-gap-l: 10px;
+  --search-radius: var(--field-radius);
+  --search-min-width-m: 200px;
+  --search-minimal-expand-min: 180px;
+  --search-icon-size: 15px;
+  --search-icon-stroke: 1.5;
+  --search-icon-opacity: 0.85;
+  --search-clear-size: 22px;
+  --search-clear-radius: 6px;
+  --search-transition: 0.22s ease;
+  --search-disabled-opacity: 0.7;
+  --search-spinner-duration: 0.7s;
+  --search-after-gap: 4px;
+  --search-badge-font-size: 11px;
+  --search-badge-padding: 2px 5px;
+  --search-badge-radius: 6px;
+  --search-list-z: 40;
+  --search-list-offset: 6px;
+  --search-list-padding: 6px;
+  --search-list-max-height: 240px;
+  --search-list-radius: 10px;
+  --search-option-padding: 8px 10px;
+  --search-option-radius: 8px;
+  --search-option-meta-size: 12px;
+  --search-border-ghost: 1px solid transparent;
+  --search-border-filled: 1px solid transparent;
+
   /* —— modal —— */
   --modal-radius: 12px;