UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: новый канон внешних контуров и стандартизация свойств

HDESIGN-CODE.md

@@ -43,8 +43,15 @@
 - Все кнопки без жёсткого outline.
 - Primary button:
   - фон: акцентный или `active_card_rgb`
-  - текст: чёрный или очень тёмный, если фон светлый
+  - текст: всегда чёрный или очень тёмный, если фон светлый
   - hover: более светлая версия того же цвета
+  - правило распространяется на все filled CTA:
+    - `Добавить`
+    - `Сохранить`
+    - `Обновить`
+    - `Принять`
+    - `Добавить запрос`
+    - любые акцентные toolbar-кнопки
 - Save/update button:
   - если это зафиксированный green CTA, текст должен быть контрастным и читаемым
   - hover осветляет текущий тон, а не уходит в синий
@@ -93,6 +100,70 @@
   - светлый фон, если основной экран тёмный
 - Search shell внутри popup должен использовать тот же стиль, что и сам popup.
 
+### Reusable классы
+- Accent CTA:
+  - `.nodedc-external-primary-button`
+  - текст внутри всегда `#0b1117`
+- Secondary action:
+  - `.nodedc-external-action-button`
+- Secondary icon action:
+  - `.nodedc-external-icon-button`
+- Readonly property/control surface:
+  - `.nodedc-external-readonly-value`
+  - `.nodedc-modal-field`
+- External property rows:
+  - `.nodedc-external-property-row`
+  - `.nodedc-external-property-label`
+  - `.nodedc-external-property-value`
+  - `.nodedc-external-property-control`
+- Dropdown shell:
+  - `.nodedc-dropdown-surface`
+  - `.nodedc-dropdown-search`
+  - `.nodedc-dropdown-option`
+- External contour card/shell:
+  - `.nodedc-external-card`
+  - `.nodedc-external-section`
+  - `.nodedc-external-content-shell`
+
+### Anchor snippets
+```tsx
+<Button className="nodedc-external-primary-button">...</Button>
+```
+
+```tsx
+<IconButton className="nodedc-external-icon-button" ... />
+```
+
+```tsx
+<div className="nodedc-external-readonly-value">
+  <SomeIcon className="h-3.5 w-3.5 text-tertiary" />
+  <span className="text-12 font-medium text-primary">...</span>
+</div>
+```
+
+```tsx
+<div className="nodedc-external-property-row">
+  <div className="nodedc-external-property-label">
+    <SomeIcon className="h-4 w-4 flex-shrink-0" />
+    <span>Label</span>
+  </div>
+  <div className="nodedc-external-property-value">
+    <SomeValue />
+  </div>
+</div>
+```
+
+```tsx
+<Dropdown
+  button={
+    <div className="nodedc-external-property-control text-[13px] font-medium">
+      <SomeIcon className="h-3.5 w-3.5 flex-shrink-0 text-tertiary" />
+      <span className="text-primary">Value</span>
+    </div>
+  }
+/>
+```
+
 ## Drag and drop
 - Drag overlay использует акцентный контур.
 - Delete dropzone:
@@ -109,3 +180,6 @@
 - Сначала используется существующий shared-класс или shared-component.
 - Если shared-слоя нет, создаётся reusable-класс/компонент и уже через него приводятся все похожие места.
 - Цель: не точечная покраска одного окна, а единый системный канон.
+- Если блок визуально расходится со стилем системы, не добавлять поверх временную wrapper-заплатку. Нужно либо перевести блок на shared-компонент, либо переверстать локальную структуру под shared-классы.
+- Для экранов со вкладками/переключателями нельзя оставлять flash старой верстки. Перед refetch нужно очищать stale store-data и показывать loading shell.
+- Если карточки или списки разных модулей должны быть одинаковыми по канону, нельзя лечить это внешней обёрткой. Нужно менять сам внутренний layout item-компонента.