poe-svelte-ui-lib 1.51.0 → 1.53.0

package/README.md

@@ -55,7 +55,9 @@ npm install poe-svelte-ui-lib
 /* дальше — только собственные отличия приложения, например :root { min-width: 640px; } */
 ```
 
-**Предпросмотр темы** — вкладка «Тема» на главной витрины (`src/routes/ThemePreview.svelte`): типовой интерфейс облака (шапка устройства, палитра токенов, кнопки во всех ролях, поля, таблица, виджеты, типографика, Markdown); тема переключается кнопкой в шапке витрины. Правьте `theme.css` и смотрите результат там.
+**Поверхности — четыре ступени, заметные в обеих темах:** фон страницы `--bg-body` → панель `--back-color` → блок внутри панели `--container-color` → поле `--field-color` (в тёмной теме поле темнее блока — «утоплено»). Готовые рецепты — классы `ui-panel` (блок прямо на фоне страницы: карточка, шапка раздела, холст, область чата — заливка панели, волосяная рамка, лёгкая тень) и `ui-inset` (блок внутри панели: группа полей, шапка карточки, подложка сообщения). Отступы и скругление задаёт страница классами Tailwind. Панели не делаются полупрозрачными (`bg-(--back-color)/50` сливается с фоном): выпадающие меню и всплывающие блоки — `ui-panel` с тенью `--elevation-3`, свои сообщения в чатах — `--accent-soft`, чужие — `--container-color`.
+
+**Предпросмотр темы** — вкладка «Тема» на главной витрины (`src/routes/ThemePreview.svelte`): палитра токенов и состояния, затем все компоненты и виджеты в порядке меню витрины — каждый тип в своём разделе с живыми демо-данными (графики, видео, полёт для PFD и карты), в конце типографика и Markdown; тема переключается кнопкой в шапке витрины. Правьте `theme.css` и смотрите результат там.
 
 Текст в Markdown, таблицы и код переносятся по ширине контейнера — горизонтальной прокрутки быть не должно, только вертикальная. Markdown рендерится с `breaks: true` (как в облаке), поэтому абзац и пункт списка пишутся одной строкой — ручной перенос внутри абзаца превращается в разрыв строки.
 
@@ -110,7 +112,7 @@ npm install poe-svelte-ui-lib
 
 **README компонента** (`src/lib/<Компонент>/README.md`, вкладка «Инфо» витрины) — развёрнутая документация для разработчика. Первые разделы повторяют описание (i) и не должны ему противоречить, дальше идут разработческие: `## Назначение` (плюс заметка о размерах) → `## Пакет данных` (плюс `### Протокол устройства` / пример кода прошивки) → `## Ключи` (таблица «Ключ / Описание», те же формулировки, что в (i)) → `## Особенности` (поведение, ограничения) → `## Пропсы` (таблица «Название / Тип / По умолчанию / Описание», колбэки — `### Колбэки`) → `## Примеры` (Svelte) → `## Конструктор свойств (<Компонент>Props.svelte)` → `## Внутреннее устройство`.
 
-**Языки — единственный источник в библиотеке.** Список языков — `LANGUAGES` в `locales/languages.ts`: код, название и флаг (SVG-строка), без Svelte — годится и для серверного кода. **Новый язык — одна запись в `LANGUAGES`**: переключатели языка во всех приложениях (`LOCALES`), колонки окна «Тексты и переводы», многоязычные тексты GUI и словари подхватывают его сами; пока перевода нет — показывается текст языка по умолчанию (`DEFAULT_LANGUAGE`, `ru`). Словари (`Translations`) — строки-объекты по кодам `{ ru: "…", en: "…", zh: "…" }`: обязателен только язык по умолчанию, порядок не важен; недостающие переводы показывает `findMissingTranslations(словарь)`. `locales/i18n.ts` — текущий язык `Language`/`setLanguage` (неизвестный код не применяется, выбор сохраняется в `localStorage` `AppLanguage`), `restoreLanguage()` (сохранённый или язык браузера; стартовое значение всегда язык по умолчанию — серверный рендер совпадает с гидратацией, поэтому SSR-приложения вызывают его в `onMount` корневого layout, SPA — при старте), `LOCALES` (с флагом `flag`) и механизм перевода `createTranslator(словарь)`. Код вне компонентов берёт текущий язык через `getLanguage()` (например, для заголовка `Accept-Language`), ключ хранилища и язык по умолчанию в приложениях не повторяются; серверный код переводит функцией `translate(словарь, язык, ключ)` на язык запроса, разобранный `resolveLanguage(Accept-Language)`. Приложения (DevCloud, WebApp, терминал) свой список языков, хранилище и функцию перевода не держат: берут их из библиотеки и строят свой `$T` из своего словаря — `export const T = createTranslator(translations)`. Одно `setLanguage` переключает и компоненты библиотеки, и приложение. Многоязычные тексты GUI распознаются по виду ключей (коды языков), поэтому данные с языком, убранным из списка, не ломаются.
+**Языки — единственный источник в библиотеке.** Список языков — `LANGUAGES` в `locales/languages.ts`: код, название и флаг (SVG-строка), без Svelte — годится и для серверного кода. **Новый язык — одна запись в `LANGUAGES`**: переключатели языка во всех приложениях (`LOCALES`), колонки окна «Тексты и переводы», многоязычные тексты GUI и словари подхватывают его сами; пока перевода нет — показывается текст языка по умолчанию (`DEFAULT_LANGUAGE`, `ru`). Словари (`Translations`) — строки-объекты по кодам `{ ru: "…", en: "…", zh: "…" }`: обязателен только язык по умолчанию, порядок не важен; недостающие переводы показывает `findMissingTranslations(словарь)`. `locales/i18n.ts` — текущий язык `Language`/`setLanguage` (неизвестный код не применяется, выбор сохраняется в `localStorage` `AppLanguage`), `restoreLanguage()` (сохранённый или язык браузера; стартовое значение всегда язык по умолчанию — серверный рендер совпадает с гидратацией, поэтому SSR-приложения вызывают его в `onMount` корневого layout, SPA — при старте), `LOCALES` (с флагом `flag`) и механизм перевода `createTranslator(словарь)`. Код вне компонентов берёт текущий язык через `getLanguage()` (например, для заголовка `Accept-Language`), ключ хранилища и язык по умолчанию в приложениях не повторяются; серверный код переводит функцией `translate(словарь, язык, ключ)` на язык запроса, разобранный `resolveLanguage(Accept-Language)`. Серверный код, который Node запускает без Vite (например WebSocket-сервер облака через `tsx`), импортирует языки и перевод из `poe-svelte-ui-lib/locales` — корень пакета экспортируется только для Svelte (условие `svelte`) и тянет компоненты, Node его не загрузит. Приложения (DevCloud, WebApp, терминал) свой список языков, хранилище и функцию перевода не держат: берут их из библиотеки и строят свой `$T` из своего словаря — `export const T = createTranslator(translations)`. Одно `setLanguage` переключает и компоненты библиотеки, и приложение. Многоязычные тексты GUI распознаются по виду ключей (коды языков), поэтому данные с языком, убранным из списка, не ломаются.
 
 **Языки (ru/en/zh) — два слоя:**
 

package/dist/locales/i18n.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from "svelte/store";
-import { type LanguageCode, type Translations } from "./languages";
+import { type LanguageCode, type Translations } from "./languages.js";
 export declare const Language: import("svelte/store").Writable<string>;
 export declare const getLanguage: () => LanguageCode;
 export declare function restoreLanguage(): void;

package/dist/locales/i18n.js

@@ -1,6 +1,6 @@
 import { derived, get, writable } from "svelte/store";
-import translations from "./translations";
-import { DEFAULT_LANGUAGE, LANGUAGES, isLanguageCode, resolveLanguage } from "./languages";
+import translations from "./translations.js";
+import { DEFAULT_LANGUAGE, LANGUAGES, isLanguageCode, resolveLanguage } from "./languages.js";
 /* Язык и механизм перевода — общие для библиотеки и приложений: приложение берёт отсюда Language/setLanguage/LOCALES и строит свой $T
    из своего словаря через createTranslator (см. README «Языки»); переключение языка одним setLanguage меняет и компоненты, и приложение */
 /*

package/dist/locales/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./languages.js";
+export * from "./i18n.js";
+export * from "./localize.js";

package/dist/locales/index.js

@@ -0,0 +1,6 @@
+/* $lib/locales/index.ts */
+/* Языки и механизм перевода без Svelte-компонентов — точка входа "poe-svelte-ui-lib/locales" для серверного кода, который Node запускает без Vite
+   (tsx: WebSocket-сервер облака); импорты с расширением .js, чтобы их разрешал сам Node */
+export * from "./languages.js";
+export * from "./i18n.js";
+export * from "./localize.js";

package/dist/locales/localize.d.ts

@@ -1,4 +1,4 @@
-import { type LanguageCode } from "./languages";
+import { type LanguageCode } from "./languages.js";
 export type LocalizedText = string | Partial<Record<LanguageCode, string>>;
 export declare const isLocalizedText: (value: unknown) => value is Partial<Record<LanguageCode, string>>;
 export declare const localizeText: (value: LocalizedText | undefined, lang: string) => string;

package/dist/locales/localize.js

@@ -1,7 +1,7 @@
 /* $lib/locales/localize.ts */
 /* Многоязычные тексты, введённые в конструкторе: строка (язык по умолчанию) или объект по кодам языков { ru, en, zh, ... };
    язык по умолчанию (DEFAULT_LANGUAGE) — основной и запасной; набор и порядок языков — LANGUAGES (languages.ts) */
-import { DEFAULT_LANGUAGE, LANGUAGE_CODES } from "./languages";
+import { DEFAULT_LANGUAGE, LANGUAGE_CODES } from "./languages.js";
 /* Ключ многоязычного текста: код языка из LANGUAGES или похожий на код (ru, en, pt-BR) — данные с языком, убранным из списка, не ломаются */
 const LANGUAGE_KEY = /^[a-z]{2,3}(-[A-Z]{2})?$/;
 /* Поля свойств, которые считаются текстом для пользователя — их показывает и правит окно «Тексты и переводы» (TextsEditor) */

package/dist/locales/translations.d.ts

@@ -1,3 +1,3 @@
-import type { Translations } from "./languages";
+import type { Translations } from "./languages.js";
 declare const translations: Translations;
 export default translations;

package/dist/theme.css

@@ -342,12 +342,12 @@
    Градиент на body убран: фон плоский, глубину даёт волосяная линия.
    ════════════════════════════════════════════════════════════════════ */
 .light {
-  --bg-body: #f5f6f8;
+  --bg-body: #e9ecf1;
   --back-color: #ffffff;
-  --container-color: #f0f2f5;
+  --container-color: #f2f4f7;
   --field-color: #ffffff;
-  --border-color: #d5d9e0;
-  --hairline-color: rgb(17 24 39 / 0.09);
+  --border-color: #cfd5de;
+  --hairline-color: rgb(17 24 39 / 0.11);
 
   --font-color: #10141a;
   --muted-color: #545c6b;
@@ -361,7 +361,7 @@
   --shadow-color: #34343a;
   --border-shadow-color: 0 1px 2px rgb(16 24 40 / 0.05);
   --focus-shadow-color: 0 0 0 3px rgb(65 117 200 / 0.18);
-  --elevation-1: 0 1px 2px rgb(16 24 40 / 0.05);
+  --elevation-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 2px 6px rgb(16 24 40 / 0.04);
   --elevation-2: 0 4px 12px rgb(16 24 40 / 0.08);
   --elevation-3: 0 12px 32px rgb(16 24 40 / 0.12);
   --scrollbar-color: #c4c9d2;
@@ -391,11 +391,11 @@
 }
 
 .dark {
-  --bg-body: #0a0c10;
-  --back-color: #13161d;
-  --container-color: #1a1e27;
-  --field-color: #1a1e27;
-  --border-color: #333a47;
+  --bg-body: #0b0d12;
+  --back-color: #171b23;
+  --container-color: #20252f;
+  --field-color: #12151b;
+  --border-color: #384050;
   --hairline-color: rgb(255 255 255 / 0.1);
 
   --font-color: #e9ebf0;
@@ -417,7 +417,7 @@
 
   /* Тёмная тема — тёмные, приглушённые тона (S=50%, L — самая тёмная точка, где контраст
      с белым текстом ещё ≥ 4.5:1 и с --bg-body ещё ≥ 3.2:1), а не светлее светлой темы */
-  --gray-color: #242a35;
+  --gray-color: #2b313d;
   --red-color: #a84038;
   --orange-color: #825a2b;
   --yellow-color: #776128;
@@ -438,6 +438,23 @@
   --pink-soft: rgb(168 56 110 / 0.18);
 }
 
+/* ─── Поверхности: фон страницы (--bg-body) → панель → вложенный блок → поле ───────────────
+   Один рецепт для всех приложений — каждая ступень заметна в обеих темах; панели не делаются полупрозрачными
+   (bg-(--back-color)/50 сливается с фоном), отступы и скругление задаёт сама страница классами Tailwind */
+@layer components {
+  /* Панель на фоне страницы: карточка, шапка раздела, область холста */
+  .ui-panel {
+    background-color: var(--back-color);
+    border: 1px solid var(--hairline-color);
+    box-shadow: var(--elevation-1);
+  }
+  /* Блок внутри панели: группа полей, строка списка, подложка сообщения */
+  .ui-inset {
+    background-color: var(--container-color);
+    border: 1px solid var(--hairline-color);
+  }
+}
+
 /* ─── Утилиты заливки (без изменений в именах) ───────────────────────── */
 .bg-max {
   --bg-color: var(--back-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.51.0",
+  "version": "1.53.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oleg-Perevyshin/ElementsUI.git"
@@ -24,6 +24,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./locales": {
+      "types": "./dist/locales/index.d.ts",
+      "default": "./dist/locales/index.js"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "files": [