- NODE.DC UI baseline
- Один UI-контракт.
-
-
- Один UI-контракт.
Разные приложения.
- Геометрия, окна и поведение остаются общими. Приложение выбирает тему и акцент, затем использует готовые компоненты.
-
-
-
-
+
-
+
Default surface
Strong floating surface
Soft nested surface
-
-
-
-
+
+
{accents.map((item) => (
@@ -295,34 +314,42 @@ export function CatalogApp() {
-
-
-
-
-
-
-
+ );
+ case "windows":
+ return (
+
-
-
+ );
+ case "icons":
+ return (
+ setModalOpen(false)}
- footer={
- <>
-
-
+ const activeDefinition = activeSection ? sectionDefinitions[activeSection] : null;
- setInspectorOpen(false)}
- >
-
+ return (
+ <>
+
+
+ }
+ />
+ }
+ stage={
+
+
+
+
+ }
+ navigation={
+ ).map(([id, item]) => ({
+ id,
+ label: item.title,
+ icon: setActiveSection(null)}
+ >
+
+ ) : null}
+ />
- Конфигурация будет удалена. Это действие нельзя отменить.}
- confirmLabel="Удалить"
- danger
- onClose={() => setConfirmOpen(false)}
- onConfirm={() => setConfirmOpen(false)}
- />
-
+
-
-
-
-
- ⚙
+
+
-
+
+ );
+ case "controls":
+ return (
+
+ Header
+ Navigation
+ Content window
+ Stage
+
+
+
setProjectName(event.target.value)} />
setNotes(event.target.value)} />
-
+
@@ -344,20 +371,20 @@ export function CatalogApp() {
(
-
+ } onClick={toggle}>Действия
)}
>
{({ close }) => (
<>
-
-
-
+
+
+
)}
-
+
`${value}%`} onChange={setBrightness} />
@@ -365,77 +392,239 @@ export function CatalogApp() {
-
+
+
Черновик
- Готово
+ Синхронизировано
Нужна проверка
Ошибка
- В работе
-
-
-
+ }>Сохранить
+ }>Обновить
+ }>Открыть
+ }>Удалить
+
+ Статус сообщает результат операции: нейтрально, успешно, требуется внимание или ошибка. Акцент приложения для этого не переиспользуется.
-
-
-
-
-
+
+
+
+
+
+ );
+ case "modals":
+ return (
+ Обычное окно блокирует фон и удерживает фокус. Правый инспектор не затемняет, не блокирует stage и не превращается в modal.
+
+ } onClick={() => setWindowOpen(true)}>Открыть окно
+ } onClick={() => setInspectorOpen(true)}>Открыть инспектор
+
+
+ }>Обновить источник
+
+
+
+
+
+
+
+ );
+ case "inspector":
+ return (
Поля переходят в одну колонку на узком viewport; footer остаётся видимым, прокручивается только тело окна.
+ } onClick={() => setCreateModalOpen(true)}>Создать проект +Destructive-цвет появляется у подтверждения, а не окрашивает всё окно заранее.
+ } onClick={() => setConfirmOpen(true)}>Проверить удаление +Настройки окруженияENGINE / новый канон
+
+
+ {iconGroups.map((group) => (
+
+ {group.title}{group.note}
+
+ ))}
+
+ );
+ default:
+ return null;
+ }
+ };
-
+
+ Иконка наследует `currentColor`; фон, размер кнопки и active-state задаёт компонент поверхности, а не SVG.
+
+ {group.icons.map((name) => (
+
+
+
+ ))}
+ {name}
+
- setProjectName(event.target.value)} />
-
-
+ NODE.DC
+ DESIGN
GUIDELINE +
+ GUIDELINE +
Общий форм-фактор приложений, компоненты и оконная механика платформы.
+{renderSectionContent()}
+
+ setProjectName(event.target.value)} />
+
+
+ setProjectName(event.target.value)} />
+ setNotes(event.target.value)} />
+
+