diff --git a/apps/catalog/src/CatalogApp.tsx b/apps/catalog/src/CatalogApp.tsx index e57ee98..85d347f 100644 --- a/apps/catalog/src/CatalogApp.tsx +++ b/apps/catalog/src/CatalogApp.tsx @@ -1421,6 +1421,7 @@ export function CatalogApp() {
  • } title="Сохранённый результат" metadata="Сегодня · доступен для просмотра" actions={ setProjectName("Сохранённый результат")}>} />
  • +
  • } title="Подключённая камера" description="Индикатор перед названием" statusPlacement="leading" status={} actions={ setProjectName("Подключённая камера")}>} />
  • } title="Подготовка камеры" metadata="Проверка потоков" progress={{label:"Подготовка камеры",value:0.8}} aria-busy="true" actions={} />
  • diff --git a/docs/RESOURCE_ROW.md b/docs/RESOURCE_ROW.md index daa9c50..9fd6e2d 100644 --- a/docs/RESOURCE_ROW.md +++ b/docs/RESOURCE_ROW.md @@ -25,3 +25,10 @@ disabled и keyboard/focus остаются у общего контрола. С Для длительных операций с линейной индикацией используйте `progress` (ProgressBar: label, value, valueText). Он заменяет status, оставляет действия справа и занимает промежуток после названия. + +`statusPlacement="leading"` размещает компактный индикатор после иконки и +перед всем текстовым блоком, с выравниванием по вертикальному центру строки. +По умолчанию остаётся `trailing` перед действиями. Статус не дублируется; +во время `progress` он скрыт в любом положении. Для одной лампы используйте +StatusBadge variant="indicator" с aria-label и title. Это согласованное +06.09.2026 расположение индикатора устройств Mission Core / Node. diff --git a/packages/ui-core/styles.css b/packages/ui-core/styles.css index 55b9d47..46b4ea7 100644 --- a/packages/ui-core/styles.css +++ b/packages/ui-core/styles.css @@ -3790,9 +3790,11 @@ textarea.nodedc-field__control { .nodedc-resource-row__copy > small { color: var(--nodedc-text-muted); font-size: var(--nodedc-font-size-xs); } .nodedc-resource-row__actions { display: flex; align-items: center; gap: .85rem; } .nodedc-resource-row__status { font-size: var(--nodedc-font-size-sm); } +.nodedc-resource-row--leading-status > .nodedc-resource-row__status { display: flex; align-items: center; flex: 0 0 auto; } @media (max-width: 540px) { .nodedc-resource-row { flex-wrap: wrap; } .nodedc-resource-row__copy { flex-basis: calc(100% - 3rem); } + .nodedc-resource-row--leading-status > .nodedc-resource-row__copy { flex: 1 1 0; } .nodedc-resource-row__actions { margin-left: auto; } } diff --git a/packages/ui-react/src/ResourceRow.tsx b/packages/ui-react/src/ResourceRow.tsx index 755700e..5fd3674 100644 --- a/packages/ui-react/src/ResourceRow.tsx +++ b/packages/ui-react/src/ResourceRow.tsx @@ -8,22 +8,25 @@ export interface ResourceRowProps extends Omit, " description?: ReactNode; metadata?: ReactNode; status?: ReactNode; + statusPlacement?: "leading" | "trailing"; actions?: ReactNode; progress?: Pick; } /** Compact resource presentation extracted from Mission Core AI Inference. * Actions stay canonical controls; the row itself is not a nested button. */ -export function ResourceRow({ title, icon, description, metadata, status, actions, progress, className, ...props }: ResourceRowProps) { - return
    +export function ResourceRow({ title, icon, description, metadata, status, statusPlacement = "trailing", actions, progress, className, ...props }: ResourceRowProps) { + const leadingStatus = !progress && !!status && statusPlacement === "leading"; + return
    {icon ? : null} + {leadingStatus ?
    {status}
    : null}
    {title} {description ? {description} : null} {metadata ? {metadata} : null}
    {progress ? : null} - {!progress && status ?
    {status}
    : null} + {!progress && status && statusPlacement === "trailing" ?
    {status}
    : null} {actions ?
    {actions}
    : null}
    ; } diff --git a/registry/components.json b/registry/components.json index 2d512a1..6cbf83c 100644 --- a/registry/components.json +++ b/registry/components.json @@ -39,6 +39,7 @@ "behavior": [ "wrapping title", "optional metadata and status", + "optional leading status between icon and copy, vertically centered", "canonical action controls", "responsive action placement" ],