feat(ui): добавить плотные контролы для viewer

docs/COMPONENTS.md

@@ -27,6 +27,8 @@ Button используется для всех текстовых действ
 
 Icon-only action по умолчанию круглый. Квадратная кнопка с маленьким радиусом допустима только как кнопка закрытия окна или плотный инструмент, где это зафиксировано контрактом.
 
+`size="dense"` — каноническая плотность для текстовых layer/mode-действий внутри визуализатора. Она уменьшает площадь и подпись контрола, но не меняет hover, active, disabled и focus-состояния. В шапках приложения и обычных формах эта плотность не используется.
+
 Переключаемый IconButton передаёт контролируемое состояние через `aria-pressed`. Активная поверхность и контраст принадлежат дизайн-системе; размер круга и glyph при переключении не меняются.
 
 ## ActivityIndicator
@@ -174,6 +176,8 @@ Read-only link/copy окно из BIM Viewer. React-компонент испо
 
 Pill navigation для верхней панели и компактного переключения режимов. Active segment использует активную поверхность темы; это не обязательно основной accent приложения.
 
+`size="dense"` применяется только в насыщенной панели слоёв или режимов непосредственно над viewer. Шапка приложения сохраняет default-геометрию; consumer не воспроизводит dense-отступы или шрифт локальным CSS.
+
 ## AppHeader
 
 Трёхосевая верхняя панель:

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "build": "npm run build --workspace @nodedc/ui-core && npm run build --workspace @nodedc/ui-dom && npm run build --workspace @nodedc/ui-react && npm run build --workspace @nodedc/page-patterns && npm run build --workspace @nodedc/map-cesium-react && npm run build --workspace @nodedc/ui-catalog",
     "build:packages": "npm run build --workspace @nodedc/ui-core && npm run build --workspace @nodedc/ui-dom && npm run build --workspace @nodedc/ui-react && npm run build --workspace @nodedc/page-patterns && npm run build --workspace @nodedc/map-cesium-react",
-    "check": "npm run build:packages && npm run typecheck --workspaces --if-present && npm run validate:registry && npm run test:spark-governance && npm run test:activity-indicator && npm run test:icon-contract && npm run test:toast-contract && npm run test:floating-position && npm run test:inspector-select && npm run test:range-control && npm run test:split-pane && npm run test:hgeozone-projection && npm run test:map-grid-lod && npm run test:map-filters && npm run test:map-object-layers && npm run test:map-inspector-overlay-state && npm run test:map-reference-stations && npm run test:map-search && npm run test:map-subject-card && npm run test:map-subject-detail-profile",
+    "check": "npm run build:packages && npm run typecheck --workspaces --if-present && npm run validate:registry && npm run test:spark-governance && npm run test:activity-indicator && npm run test:control-density && npm run test:icon-contract && npm run test:toast-contract && npm run test:floating-position && npm run test:inspector-select && npm run test:range-control && npm run test:split-pane && npm run test:hgeozone-projection && npm run test:map-grid-lod && npm run test:map-filters && npm run test:map-object-layers && npm run test:map-inspector-overlay-state && npm run test:map-reference-stations && npm run test:map-search && npm run test:map-subject-card && npm run test:map-subject-detail-profile",
     "dev": "npm run build:packages && npm run dev --workspace @nodedc/ui-catalog",
     "serve": "node server/catalog-server.mjs",
     "validate:registry": "node scripts/validate-registry.mjs",
@@ -33,6 +33,7 @@
     "test:map-cache-contract": "node --test scripts/map-cache-resource-contract.test.mjs",
     "test:spark-governance": "node --test scripts/spark-governance-contract.test.mjs",
     "test:activity-indicator": "node --test scripts/activity-indicator-contract.test.mjs",
+    "test:control-density": "node --test scripts/control-density-contract.test.mjs",
     "test:icon-contract": "node --test scripts/icon-contract.test.mjs",
     "test:toast-contract": "node --test scripts/toast-contract.test.mjs",
     "test:floating-position": "node --test scripts/floating-position-contract.test.mjs",

packages/tokens/tokens.css

@@ -10,6 +10,7 @@
 
   --nodedc-control-height: 2.875rem;
   --nodedc-control-height-compact: 2.375rem;
+  --nodedc-control-height-dense: 1.875rem;
   --nodedc-icon-button-size: 2.875rem;
   --nodedc-header-row-height: 3rem;
   --nodedc-header-pill-height: 3.45rem;
@@ -61,6 +62,7 @@
 
   --nodedc-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --nodedc-font-size-xs: 0.6875rem;
+  --nodedc-font-size-dense: 0.45rem;
   --nodedc-font-size-sm: 0.75rem;
   --nodedc-font-size-md: 0.8125rem;
   --nodedc-font-size-lg: 1rem;

packages/ui-core/styles.css

@@ -142,6 +142,13 @@
   font-size: var(--nodedc-font-size-sm);
 }
 
+.nodedc-button[data-size="dense"] {
+  min-height: var(--nodedc-control-height-dense);
+  border-radius: var(--nodedc-radius-control-compact);
+  padding-inline: 0.65rem;
+  font-size: var(--nodedc-font-size-dense);
+}
+
 .nodedc-button[data-width="full"] {
   width: 100%;
 }
@@ -1039,6 +1046,19 @@ textarea.nodedc-field__control {
   color: var(--nodedc-glass-control-active-text);
 }
 
+.nodedc-segmented[data-size="dense"] {
+  min-height: var(--nodedc-control-height-dense);
+  gap: 0.1rem;
+  padding: 0.16rem;
+}
+
+.nodedc-segmented[data-size="dense"] .nodedc-segmented__item {
+  min-height: calc(var(--nodedc-control-height-dense) - 0.32rem);
+  gap: 0.25rem;
+  padding: 0.1rem 0.68rem;
+  font-size: var(--nodedc-font-size-dense);
+}
+
 .nodedc-header-shell {
   position: relative;
   z-index: var(--nodedc-layer-header);

packages/ui-react/src/Button.tsx

@@ -3,7 +3,7 @@ import { createAccentVariables, type RgbTuple } from "@nodedc/ui-core";
 import { cn } from "./cn.js";
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "accent";
-export type ButtonSize = "default" | "compact";
+export type ButtonSize = "default" | "compact" | "dense";
 export type ButtonShape = "default" | "pill" | "rounded";
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

packages/ui-react/src/SegmentedControl.tsx

@@ -8,10 +8,13 @@ export interface SegmentedItem<T extends string> {
   disabled?: boolean;
 }
 
+export type SegmentedControlSize = "default" | "dense";
+
 export interface SegmentedControlProps<T extends string> {
   value: T;
   items: Array<SegmentedItem<T>>;
   label: string;
+  size?: SegmentedControlSize;
   className?: string;
   onChange: (value: T) => void;
 }
@@ -20,11 +23,17 @@ export function SegmentedControl<T extends string>({
   value,
   items,
   label,
+  size = "default",
   className,
   onChange,
 }: SegmentedControlProps<T>) {
   return (
-    <div className={cn("nodedc-segmented", className)} role="tablist" aria-label={label}>
+    <div
+      className={cn("nodedc-segmented", className)}
+      role="tablist"
+      aria-label={label}
+      data-size={size === "default" ? undefined : size}
+    >
       {items.map((item) => (
         <button
           key={item.value}
@@ -43,4 +52,3 @@ export function SegmentedControl<T extends string>({
     </div>
   );
 }
-

registry/components.json

@@ -28,6 +28,7 @@
       "domContract": ["nodedc-button", "nodedc-icon-button"],
       "summary": "Text and icon actions with shared sizing, states and computed accent contrast.",
       "variants": ["primary", "secondary", "ghost", "danger", "accent"],
+      "sizes": ["default", "compact", "dense"],
       "shapes": ["default", "pill", "rounded"],
       "rules": [
         "Icon-only actions are circular by default.",
@@ -237,7 +238,11 @@
       "package": "@nodedc/ui-react",
       "exports": ["SegmentedControl"],
       "domContract": ["nodedc-segmented"],
-      "summary": "Pill navigation used in the shared top header and compact mode switches."
+      "summary": "Pill navigation used in the shared top header and compact mode switches.",
+      "sizes": ["default", "dense"],
+      "rules": [
+        "Dense is reserved for high-density in-viewer layer and mode toolbars; application headers retain default geometry."
+      ]
     },
     {
       "id": "app-header",

scripts/control-density-contract.test.mjs

@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Button, SegmentedControl } from "../packages/ui-react/dist/index.js";
+
+test("dense viewer controls remain a public Button and SegmentedControl contract", async () => {
+  const button = renderToStaticMarkup(createElement(Button, { size: "dense" }, "Source points"));
+  const segmented = renderToStaticMarkup(createElement(SegmentedControl, {
+    size: "dense",
+    value: "source",
+    items: [{ label: "Source points", value: "source" }],
+    label: "Viewer layer",
+    onChange: () => {},
+  }));
+  const [tokens, styles, registrySource, docs] = await Promise.all([
+    readFile(new URL("../packages/tokens/tokens.css", import.meta.url), "utf8"),
+    readFile(new URL("../packages/ui-core/styles.css", import.meta.url), "utf8"),
+    readFile(new URL("../registry/components.json", import.meta.url), "utf8"),
+    readFile(new URL("../docs/COMPONENTS.md", import.meta.url), "utf8"),
+  ]);
+  const registry = JSON.parse(registrySource);
+  const buttonEntry = registry.components.find((component) => component.id === "button");
+  const segmentedEntry = registry.components.find((component) => component.id === "segmented-control");
+
+  assert.match(button, /data-size="dense"/);
+  assert.match(segmented, /data-size="dense"/);
+  assert.ok(buttonEntry?.sizes.includes("dense"));
+  assert.ok(segmentedEntry?.sizes.includes("dense"));
+  assert.match(tokens, /--nodedc-control-height-dense: 1\.875rem/);
+  assert.match(tokens, /--nodedc-font-size-dense: 0\.45rem/);
+  assert.match(styles, /\.nodedc-button\[data-size="dense"\]/);
+  assert.match(styles, /\.nodedc-segmented\[data-size="dense"\]/);
+  assert.match(docs, /size="dense"/);
+  assert.match(docs, /viewer/);
+});