elcrm 1.0.0 → 1.1.2

package/templates/panel/api/src/routes/auth.ts

@@ -1,4 +1,10 @@
-import { createRouter, rpcErr, rpcOk } from "@elcrm/server";
+import {
+  createRouter,
+  rpcErr,
+  rpcLogout,
+  rpcOk,
+  type Middleware,
+} from "@elcrm/server";
 import { db } from "../lib/db";
 import { jwt } from "../lib/jwt";
 
@@ -32,8 +38,19 @@ function publicUser(
   };
 }
 
+/**
+ * createServer уже разобрал ssid → params.user.
+ * Не вызываем jwt.init повторно — только наличие user.
+ * publicMethods: pass (логин без сессии).
+ */
+const requireUser: Middleware = async ({ path, user }) => {
+  if (path[1] === "pass") return;
+  if (!user?.id) return rpcLogout();
+};
+
 export function registerAuthRoutes() {
   createRouter("auth")
+    .use(requireUser)
     .use("pass", async ({ body, headers, jwt: jwtCtx }) => {
       const login = String(body?.login ?? "").trim();
       const password = String(body?.password ?? "");
@@ -49,7 +66,7 @@ export function registerAuthRoutes() {
 
       if (!data) return rpcErr("Пользователь не найден");
       if (data.active === 0) {
-        return { status: "delete", data: "Аккаунт заблокирован" };
+        return rpcErr("Аккаунт заблокирован", 403);
       }
       if (!data.password || data.password !== jwt.password(password)) {
         return rpcErr("Данные не верны");
@@ -65,19 +82,14 @@ export function registerAuthRoutes() {
       return rpcOk(pub, { ssid });
     })
     .use("me", async ({ user }) => {
-      if (!user?.id) return { status: "logout", data: null };
       const row = await db.get<UserRow>(
         `SELECT ${USER_PUBLIC_COLS} FROM users WHERE id = ?`,
         [user.id],
       );
-      if (!row || row.active === 0) {
-        return { status: "logout", data: null };
-      }
+      if (!row || row.active === 0) return rpcLogout();
       return rpcOk(publicUser(row));
     })
     .use("profile", async ({ user, body }) => {
-      if (!user?.id) return { status: "logout", data: null };
-
       const display_name = String(
         body?.display_name ?? body?.name ?? "",
       ).trim();

package/templates/panel/web/package.json

@@ -11,14 +11,14 @@
   "dependencies": {
     "@elcrm/alert": "0.1.1",
     "@elcrm/api": "^0.1.55",
-    "@elcrm/button": "1.0.1",
+    "@elcrm/button": "1.0.2",
     "@elcrm/components": "0.0.1",
     "@elcrm/core": "0.1.2",
     "@elcrm/crypto": "0.0.1",
     "@elcrm/error-boundary": "0.0.2",
-    "@elcrm/form": "0.0.88",
-    "@elcrm/modal": "0.0.32",
-    "@elcrm/notice": "0.1.1",
+    "@elcrm/form": "0.1.2",
+    "@elcrm/modal": "0.0.34",
+    "@elcrm/notice": "0.1.3",
     "@elcrm/notifications": "0.3.1",
     "@elcrm/passkey": "^0.0.1",
     "@elcrm/router": "0.0.58",

package/templates/panel/web/src/modules/Account/sections/Profile.tsx

@@ -57,7 +57,6 @@ export default function Profile() {
           form={form}
           label="Имя"
           placeholder="Отображаемое имя"
-          native
         />
         <EmailField
           name="email"

package/templates/panel/web/src/modules/Settings/sections/General.tsx

@@ -32,14 +32,12 @@ export default function General() {
           form={form}
           label="Имя"
           placeholder="Panel"
-          native
         />
         <StringField
           name="description"
           form={form}
           label="Описание"
           placeholder="Краткое описание"
-          native
         />
       </Section>
     </Section>

package/templates/panel/web/src/modules/Settings/sections/Profile.tsx

@@ -68,7 +68,6 @@ export default function Profile() {
           form={form}
           label="Имя"
           placeholder="Отображаемое имя"
-          native
         />
         <EmailField
           name="email"

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

@@ -71,7 +71,6 @@ export default function Auth() {
         name="login"
         form={form}
         placeholder="Логин"
-        native
         autoComplete="username"
       />
       <PasswordField

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

@@ -1,12 +1,13 @@
 /**
  * База пакетов @elcrm/* + обе темы panel.
  * Порядок важен: сначала CSS пакетов, затем theme-* перекрывают токены.
+ *
+ * @elcrm/button@1.0.2+ — только style.css (цвета кнопок в theme-light/dark).
  */
 
 /* структура компонентов */
 @import "@elcrm/notice/style.css";
 @import "@elcrm/alert/style.css";
-@import "@elcrm/button/themes.css";
 @import "@elcrm/button/style.css";
 @import "@elcrm/search/style.css";
 @import "@elcrm/modal/style.css";
@@ -17,6 +18,8 @@
 @import "@elcrm/form/dark.css";
 @import "@elcrm/alert/light.css";
 @import "@elcrm/alert/dark.css";
+@import "@elcrm/notice/light.css";
+@import "@elcrm/notice/dark.css";
 
 /* общие размеры/геометрия, затем цвета light/dark */
 @import "./theme.css";

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

@@ -19,6 +19,8 @@ body[data-theme="dark"] {
   --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;
@@ -29,18 +31,42 @@ body[data-theme="dark"] {
   --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: 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;
@@ -52,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;
@@ -62,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

@@ -19,6 +19,8 @@ body[data-theme="light"] {
   --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(--accent);
   --button-primary-fg: #ffffff;
   --button-primary-hover-bg: #2f5de0;
@@ -29,18 +31,42 @@ body[data-theme="light"] {
   --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: 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;
@@ -52,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);
@@ -62,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

@@ -3,8 +3,23 @@
  * Любой цвет, color-mix, var(--text|--accent|…) — только в theme-light / theme-dark.
  */
 :root {
-  /* —— button —— */
+  /* —— 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;
@@ -12,18 +27,73 @@
   --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-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;