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

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>
   );
 }
-