elcrm 1.1.13 → 1.1.15

package/templates/orbit/src/style/theme-dark.css

@@ -0,0 +1,148 @@
+/**
+ * Тёмная тема panel: ТОЛЬКО цвета / тени / hover / border с цветом.
+ * Размеры — theme.css
+ */
+html[data-theme="dark"],
+body[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* —— палитра —— */
+  --bg: #0f1216;
+  --panel: #171b22;
+  --panel-elevated: #1e2430;
+  --text: #e8eaed;
+  --muted: #9aa3af;
+  --line: #2a3140;
+  --accent: #5b8cff;
+  --danger: #ff6b6b;
+  --success: #3dd68c;
+  --warning: #f59e0b;
+  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+
+  /* —— button —— */
+  --button-focus-ring: rgba(91, 140, 255, 0.55);
+  --button-border-primary: 1px solid transparent;
+  --button-primary-bg: var(--accent);
+  --button-primary-fg: #ffffff;
+  --button-primary-hover-bg: #7aa3ff;
+  --button-primary-hover-fg: #ffffff;
+  --button-primary-active-bg: #3d74e0;
+  --button-primary-active-fg: #ffffff;
+  --button-secondary-bg: rgba(255, 255, 255, 0.08);
+  --button-secondary-fg: rgba(255, 255, 255, 0.92);
+  --button-secondary-hover-bg: rgba(255, 255, 255, 0.12);
+  --button-secondary-hover-fg: #ffffff;
+  --button-secondary-active-bg: rgba(255, 255, 255, 0.16);
+  --button-secondary-active-fg: #ffffff;
+  --button-border-secondary: 1px solid var(--line);
+  --button-positive-bg: var(--success);
+  --button-positive-fg: #0f1216;
+  --button-positive-hover-bg: #52e0a0;
+  --button-positive-hover-fg: #0f1216;
+  --button-positive-active-bg: #2bb872;
+  --button-positive-active-fg: #0f1216;
+  --button-border-positive: 1px solid transparent;
+  --button-negative-bg: var(--danger);
+  --button-negative-fg: #ffffff;
+  --button-negative-hover-bg: #ff8585;
+  --button-negative-hover-fg: #ffffff;
+  --button-negative-active-bg: #e05555;
+  --button-negative-active-fg: #ffffff;
+  --button-border-negative: 1px solid transparent;
+  --button-ghost-bg: transparent;
+  --button-ghost-fg: var(--muted);
+  --button-ghost-hover-bg: rgba(255, 255, 255, 0.06);
+  --button-ghost-hover-fg: var(--text);
+  --button-ghost-active-bg: rgba(255, 255, 255, 0.1);
+  --button-ghost-active-fg: var(--text);
+  --button-border-ghost: transparent;
+  --button-disabled-bg: rgba(255, 255, 255, 0.08);
+  --button-disabled-fg: rgba(255, 255, 255, 0.4);
+  --button-border-disabled: 1px solid transparent;
+  --button-await-bg: rgba(255, 255, 255, 0.08);
+  --button-await-fg: rgba(255, 255, 255, 0.4);
+  --button-border-await: 1px solid transparent;
+
+  /* —— form / control —— */
+  --field-border: 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;
+  --field-background-focus: #0c0f14;
+  --field-background-disabled: #141820;
+  --field-background-active: var(--accent);
+  --field-color: var(--text);
+  --field-color-disabled: #5c6575;
+  --field-placeholder: var(--muted);
+  --field-label-color: var(--muted);
+  --field-icon-color: var(--muted);
+
+  --field-check-box-border: 2px solid var(--muted);
+  --field-error-border: var(--danger);
+  --field-error-color: #ff8e8e;
+  --field-error-background: rgba(255, 107, 107, 0.12);
+  --select-background: var(--panel-elevated);
+  --select-color: var(--text);
+  --select-separator: 1px solid var(--line);
+  --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);
+  --modal-box-shadow: rgba(0, 0, 0, 0.5);
+  --modal-shadow: rgba(0, 0, 0, 0.35);
+  --modal-color: var(--text);
+  --modal-text: var(--text);
+  --modal-exit: var(--muted);
+  --modal-disabled: #5c6575;
+  --modal-shade: var(--panel);
+  --modal-tinge: rgba(255, 255, 255, 0.04);
+  --modal-border: var(--line);
+
+  --alert-color: var(--text);
+  --alert-overlay: rgba(0, 0, 0, 0.55);
+  --alert-background: rgba(23, 27, 34, 0.96);
+  --alert-button-color: var(--accent);
+
+  --notice-background: rgba(23, 27, 34, 0.96);
+  --notice-color: var(--text);
+
+  --color-text: var(--text);
+  --color-field-focus: var(--field-background);
+
+  /* —— @elcrm/components: shell (общие) + узкие avatar —— */
+  --shell-color: var(--text);
+  --shell-color-muted: var(--muted);
+  --shell-color-accent: var(--accent);
+  --shell-color-danger: var(--danger);
+  --shell-color-success: var(--success);
+  --shell-color-warning: var(--warning);
+  --shell-border: var(--line);
+  --shell-background: var(--panel);
+  --shell-background-muted: var(--bg);
+  --shell-bg: var(--bg);
+  --sidebar-block-bg: var(--shell-background);
+  --sidebar-block-border: var(--shell-border);
+  --sidebar-block-shadow: none;
+  --sidebar-item-active: var(--shell-color);
+  --sidebar-item-active-bg: var(--shell-background-selected);
+  --sidebar-icon-active: var(--shell-color-accent);
+  --shell-background-hover: color-mix(in srgb, var(--text) 8%, transparent);
+  --shell-background-selected: color-mix(in srgb, var(--accent) 14%, transparent);
+  --shell-shadow: var(--shadow);
+
+  --avatar-background: var(--shell-color-accent);
+  --avatar-color: var(--button-primary-fg);
+  --avatar-name-title-color: var(--shell-color);
+  --avatar-name-description-color: var(--shell-color-muted);
+  --avatar-border: 1px solid var(--shell-border);
+  --avatar-outline-active: 2px solid
+    color-mix(in srgb, var(--accent) 70%, white);
+}

package/templates/orbit/src/style/theme-light.css

@@ -0,0 +1,148 @@
+/**
+ * Светлая тема panel: ТОЛЬКО цвета / тени / hover / border с цветом.
+ * Размеры — theme.css
+ */
+html[data-theme="light"],
+body[data-theme="light"] {
+  color-scheme: light;
+
+  /* —— палитра —— */
+  --bg: #f4f6f9;
+  --panel: #ffffff;
+  --panel-elevated: #ffffff;
+  --text: #1a1f29;
+  --muted: #6b7380;
+  --line: #d8dee8;
+  --accent: #111111;
+  --danger: #d64545;
+  --success: #1f9d62;
+  --warning: #d97706;
+  --shadow: 0 8px 24px rgba(26, 31, 41, 0.1);
+
+  /* —— button —— */
+  --button-focus-ring: rgba(59, 110, 245, 0.55);
+  --button-border-primary: 1px solid transparent;
+  --button-primary-bg: var(--text);
+  --button-primary-fg: #ffffff;
+  --button-primary-hover-bg: #2a2f38;
+  --button-primary-hover-fg: #ffffff;
+  --button-primary-active-bg: #111111;
+  --button-primary-active-fg: #ffffff;
+  --button-secondary-bg: #eef1f6;
+  --button-secondary-fg: var(--text);
+  --button-secondary-hover-bg: #e2e7ef;
+  --button-secondary-hover-fg: var(--text);
+  --button-secondary-active-bg: #d8dee8;
+  --button-secondary-active-fg: var(--text);
+  --button-border-secondary: 1px solid var(--line);
+  --button-positive-bg: var(--success);
+  --button-positive-fg: #ffffff;
+  --button-positive-hover-bg: #198a55;
+  --button-positive-hover-fg: #ffffff;
+  --button-positive-active-bg: #157348;
+  --button-positive-active-fg: #ffffff;
+  --button-border-positive: 1px solid transparent;
+  --button-negative-bg: var(--danger);
+  --button-negative-fg: #ffffff;
+  --button-negative-hover-bg: #c03c3c;
+  --button-negative-hover-fg: #ffffff;
+  --button-negative-active-bg: #a83434;
+  --button-negative-active-fg: #ffffff;
+  --button-border-negative: 1px solid transparent;
+  --button-ghost-bg: transparent;
+  --button-ghost-fg: var(--muted);
+  --button-ghost-hover-bg: rgba(26, 31, 41, 0.06);
+  --button-ghost-hover-fg: var(--text);
+  --button-ghost-active-bg: rgba(26, 31, 41, 0.1);
+  --button-ghost-active-fg: var(--text);
+  --button-border-ghost: transparent;
+  --button-disabled-bg: #e6e6e6;
+  --button-disabled-fg: #6b6b6b;
+  --button-border-disabled: 1px solid transparent;
+  --button-await-bg: #e6e6e6;
+  --button-await-fg: #6b6b6b;
+  --button-border-await: 1px solid transparent;
+
+  /* —— form / control —— */
+  --field-border: 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;
+  --field-background-focus: #ffffff;
+  --field-background-disabled: #eef1f6;
+  --field-background-active: var(--accent);
+  --field-color: var(--text);
+  --field-color-disabled: #9aa3af;
+  --field-placeholder: var(--muted);
+  --field-label-color: var(--muted);
+  --field-icon-color: var(--muted);
+
+  --field-check-box-border: 2px solid var(--muted);
+  --field-error-border: var(--danger);
+  --field-error-color: var(--danger);
+  --field-error-background: rgba(214, 69, 69, 0.1);
+  --select-background: #ffffff;
+  --select-color: var(--text);
+  --select-separator: 1px solid var(--line);
+  --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);
+  --modal-box-shadow: rgba(26, 31, 41, 0.18);
+  --modal-shadow: rgba(26, 31, 41, 0.12);
+  --modal-color: var(--text);
+  --modal-text: var(--text);
+  --modal-exit: var(--muted);
+  --modal-disabled: #9aa3af;
+  --modal-shade: #f4f6f9;
+  --modal-tinge: rgba(26, 31, 41, 0.04);
+  --modal-border: var(--line);
+
+  --alert-color: var(--text);
+  --alert-overlay: rgba(26, 31, 41, 0.4);
+  --alert-background: rgba(255, 255, 255, 0.97);
+  --alert-button-color: var(--accent);
+
+  --notice-background: rgba(255, 255, 255, 0.97);
+  --notice-color: var(--text);
+
+  --color-text: var(--text);
+  --color-field-focus: var(--field-background);
+
+  /* —— @elcrm/components: shell (общие) + узкие avatar —— */
+  --shell-color: var(--text);
+  --shell-color-muted: var(--muted);
+  --shell-color-accent: var(--accent);
+  --shell-color-danger: var(--danger);
+  --shell-color-success: var(--success);
+  --shell-color-warning: var(--warning);
+  --shell-border: var(--line);
+  --shell-background: var(--panel);
+  --shell-background-muted: var(--bg);
+  --shell-bg: var(--bg);
+  --sidebar-block-bg: var(--shell-background);
+  --sidebar-block-border: var(--shell-border);
+  --sidebar-block-shadow: none;
+  --sidebar-item-active: var(--shell-color);
+  --sidebar-item-active-bg: var(--shell-background-selected);
+  --sidebar-icon-active: var(--shell-color-accent);
+  --shell-background-hover: color-mix(in srgb, var(--text) 6%, transparent);
+  --shell-background-selected: color-mix(in srgb, var(--accent) 10%, transparent);
+  --shell-shadow: var(--shadow);
+
+  --avatar-background: var(--shell-color-accent);
+  --avatar-color: var(--button-primary-fg);
+  --avatar-name-title-color: var(--shell-color);
+  --avatar-name-description-color: var(--shell-color-muted);
+  --avatar-border: 1px solid var(--shell-border);
+  --avatar-outline-active: 2px solid
+    color-mix(in srgb, var(--accent) 70%, white);
+}

package/templates/orbit/src/style/theme.css

@@ -0,0 +1,177 @@
+/**
+ * Общие токены panel — ТОЛЬКО размеры / радиусы / отступы / gap / тени без цвета.
+ * Любой цвет, color-mix, var(--text|--accent|…) — только в theme-light / theme-dark.
+ */
+:root {
+  /* —— button (@elcrm/button: геометрия без цвета) —— */
+  --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;
+  --button-max-width: 100%;
+  --button-min-width-m: 200px;
+  --button-transition: 0.18s ease;
+  --button-focus-ring-offset: 2px;
+  --button-size-s: 14px;
+  --button-size-m: 16px;
+  --button-size-l: 18px;
+  --button-shadow: none;
+  --button-shadow-hover: none;
+  --button-shadow-active: none;
+  --button-primary-shadow: none;
+  --button-primary-hover-shadow: none;
+  --button-primary-active-shadow: none;
+  --button-secondary-shadow: none;
+  --button-secondary-hover-shadow: none;
+  --button-secondary-active-shadow: none;
+  --button-positive-shadow: none;
+  --button-positive-hover-shadow: none;
+  --button-positive-active-shadow: none;
+  --button-negative-shadow: none;
+  --button-negative-hover-shadow: none;
+  --button-negative-active-shadow: none;
+  --button-ghost-shadow: none;
+  --button-ghost-hover-shadow: none;
+  --button-ghost-active-shadow: none;
+
+  /* —— form / control —— */
+  --control-height: 44px;
+  --control-height-s: 32px;
+  --control-height-m: var(--control-height);
+  --control-height-l: 48px;
+  --control-radius: 10px;
+  --control-font-size: 15px;
+  --field-height: var(--control-height);
+  --field-width: 100%;
+  /* единый 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;
+  --field-search-min-width: 200px;
+  --field-search-expand-min: 180px;
+  --field-search-list-max-height: 240px;
+
+  /* —— modal —— */
+  --modal-radius: 12px;
+
+  /* —— shell (@elcrm/components: общие токены, как --control-* у form) —— */
+  --shell-radius: var(--control-radius);
+  --shell-font-size: var(--control-font-size);
+  --shell-font-size-sm: 13px;
+  --shell-font-size-lg: 18px;
+  --shell-font-weight: 600;
+  --shell-gap: 12px;
+  --shell-gap-sm: 8px;
+  --shell-gap-lg: 16px;
+  --shell-padding-block: 10px;
+  --shell-padding-inline: 14px;
+  --shell-padding: var(--shell-padding-block) var(--shell-padding-inline);
+  --shell-icon-size: 20px;
+  --shell-check-size: 18px;
+  --shell-status-size: 10px;
+  --shell-disabled-opacity: 0.55;
+  --shell-z: 1000;
+  --elcrm-z-popover: 1000;
+
+  /* —— узкие (@elcrm/components) —— */
+  --header-radius: var(--shell-radius);
+  --header-height: 52px;
+  --header-shadow: none;
+  --header-margin: 0;
+  --header-z: 20;
+
+  --section-padding: 1.5rem 1.75rem 2.5rem;
+  --section-title-size: 1.5rem;
+  --section-title-size-md: 1.25rem;
+  --section-auth-card-max-width: 22rem;
+
+  --nav-sections-padding: 1.5rem 1.75rem 2.5rem;
+  --nav-sections-nav-width: 220px;
+  --nav-sections-main-max-width: 720px;
+
+  --avatar-size-s: 1.5rem;
+  --avatar-size-m: 2rem;
+  --avatar-size-l: 2.75rem;
+  --avatar-radius: 999px;
+  --avatar-font-size-s: 0.6rem;
+  --avatar-font-size-m: 0.7rem;
+  --avatar-font-size-l: 0.95rem;
+  --avatar-font-weight: 700;
+  --avatar-outline-offset: 0;
+  --avatar-group-overlap: -0.4rem;
+  --avatar-group-ring: 2px;
+  --avatar-name-title-color: var(--shell-color);
+  --avatar-name-description-color: var(--shell-color-muted);
+
+  --dropdown-min-width: 12rem;
+  --dropdown-max-width: 20rem;
+  --dropdown-max-height: 20rem;
+  --card-pointer: auto;
+  --stack-grid-min: 180px;
+  /* Задаётся Stack через style при columns=…; дефолт — одна колонка */
+  --stack-columns-template: minmax(0, 1fr);
+  --item-column-gap: 12px;
+  --item-column-icon-size: 40px;
+  --item-column-icon-radius: 999px;
+  --stat-value-size: 1.75rem;
+  --sidebar-width: 260px;
+  --sidebar-pad-x: 12px;
+  --sidebar-pad-y: 16px;
+  --sidebar-block-radius: 14px;
+  --sidebar-item-font-size: 13px;
+  --sidebar-item-padding: 6px 10px;
+  --sidebar-icon-size: 16px;
+  --sidebar-group-font-size: 11px;
+  --pricing-card-min-width: 16rem;
+  --pricing-table-label-width: 10rem;
+}
+
+/* —— база приложения (без захардкоженных цветов) —— */
+:root {
+  font-family: "IBM Plex Sans", system-ui, sans-serif;
+  line-height: 1.45;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--text);
+  background: var(--bg);
+}
+
+#root {
+  min-height: 100vh;
+}
+
+#root[data-page="main"] {
+  display: flex;
+  flex-direction: column;
+}
+
+.muted {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.app-error {
+  padding: 2rem;
+  color: var(--text);
+}
+
+.app-error pre {
+  white-space: pre-wrap;
+  color: var(--danger);
+}

package/templates/orbit/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/orbit/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src"]
+}

package/templates/orbit/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+/**
+ * `@elcrm/crypto` — `export namespace Crypto` из .ts.
+ * Prebundle Vite не даёт `default` → «does not provide an export named 'default'».
+ */
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173 },
+  optimizeDeps: {
+    exclude: ["@elcrm/crypto"],
+  },
+});

package/templates/panel/README.md

@@ -14,7 +14,7 @@ bun run dev
 
 Демо-вход: `admin` / `admin`
 
-Зависимость shell UI: `@elcrm/components@0.0.1` (npm).
+Зависимость shell UI: `@elcrm/components` (npm).
 
 ## Структура
 

package/templates/panel/web/package.json

@@ -10,20 +10,20 @@
   },
   "dependencies": {
     "@elcrm/alert": "0.1.1",
-    "@elcrm/api": "^0.1.55",
-    "@elcrm/button": "1.0.2",
-    "@elcrm/components": "0.0.1",
-    "@elcrm/core": "0.1.2",
-    "@elcrm/crypto": "0.0.1",
+    "@elcrm/api": "0.1.55",
+    "@elcrm/button": "1.1.0",
+    "@elcrm/components": "0.1.2",
+    "@elcrm/core": "0.1.3",
+    "@elcrm/crypto": "0.0.2",
     "@elcrm/error-boundary": "0.0.2",
-    "@elcrm/form": "0.1.2",
+    "@elcrm/form": "0.1.8",
     "@elcrm/modal": "0.0.34",
     "@elcrm/notice": "0.1.3",
     "@elcrm/notifications": "0.3.1",
-    "@elcrm/passkey": "^0.0.1",
+    "@elcrm/passkey": "0.2.3",
     "@elcrm/router": "0.0.58",
-    "@elcrm/search": "0.1.1",
-    "@elcrm/setting": "^0.0.6",
+    "@elcrm/search": "0.1.5",
+    "@elcrm/setting": "0.0.6",
     "@elcrm/state": "0.0.7",
     "@elcrm/tooltip": "0.1.0",
     "react": "^18.2.0",

package/templates/panel/web/src/pages/Auth.tsx

@@ -6,7 +6,7 @@ import { Button } from "@elcrm/button";
 import { Notice } from "@elcrm/notice";
 import { PasswordField, StringField, useForm } from "@elcrm/form";
 import { Crypto } from "@elcrm/crypto";
-import { usePasskeySupport } from "@elcrm/passkey";
+import { usePasskeySupport } from "@elcrm/passkey/react";
 
 /**
  * Экран входа (`Section variant="auth"`).

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

@@ -80,38 +80,6 @@ body[data-theme="dark"] {
   --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;
@@ -159,12 +127,21 @@ body[data-theme="dark"] {
   --shell-border: var(--line);
   --shell-background: var(--panel);
   --shell-background-muted: var(--bg);
+  --shell-bg: var(--bg);
+  --sidebar-block-bg: var(--shell-background);
+  --sidebar-block-border: var(--shell-border);
+  --sidebar-block-shadow: none;
+  --sidebar-item-active: var(--shell-color);
+  --sidebar-item-active-bg: var(--shell-background-selected);
+  --sidebar-icon-active: var(--shell-color-accent);
   --shell-background-hover: color-mix(in srgb, var(--text) 8%, transparent);
   --shell-background-selected: color-mix(in srgb, var(--accent) 14%, transparent);
   --shell-shadow: var(--shadow);
 
   --avatar-background: var(--shell-color-accent);
   --avatar-color: var(--button-primary-fg);
+  --avatar-name-title-color: var(--shell-color);
+  --avatar-name-description-color: var(--shell-color-muted);
   --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);

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

@@ -80,38 +80,6 @@ body[data-theme="light"] {
   --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);
@@ -159,12 +127,21 @@ body[data-theme="light"] {
   --shell-border: var(--line);
   --shell-background: var(--panel);
   --shell-background-muted: var(--bg);
+  --shell-bg: var(--bg);
+  --sidebar-block-bg: var(--shell-background);
+  --sidebar-block-border: var(--shell-border);
+  --sidebar-block-shadow: none;
+  --sidebar-item-active: var(--shell-color);
+  --sidebar-item-active-bg: var(--shell-background-selected);
+  --sidebar-icon-active: var(--shell-color-accent);
   --shell-background-hover: color-mix(in srgb, var(--text) 6%, transparent);
   --shell-background-selected: color-mix(in srgb, var(--accent) 10%, transparent);
   --shell-shadow: var(--shadow);
 
   --avatar-background: var(--shell-color-accent);
   --avatar-color: var(--button-primary-fg);
+  --avatar-name-title-color: var(--shell-color);
+  --avatar-name-description-color: var(--shell-color-muted);
   --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);