feat(ui): add bounded workspace windows

apps/catalog/src/CatalogApp.tsx

@@ -43,9 +43,11 @@ import {
   useApplicationWorkspace,
   Window,
   WindowFooterActions,
+  WorkspaceWindow,
   type IconName,
   type ShareAccessMember,
   type ToolbarPlacement,
+  type WorkspaceWindowRect,
 } from "@nodedc/ui-react";
 import { applyFaviconAssets, createIcoBlob, generateFavicons, type FaviconAssetUrls, type GeneratedFavicon } from "./favicon.js";
 import {
@@ -371,6 +373,10 @@ export function CatalogApp() {
   const [strokeColor, setStrokeColor] = useState("#2b2b36");
   const [strokeOpacity, setStrokeOpacity] = useState(100);
   const [inspectorOpen, setInspectorOpen] = useState(false);
+  const workspaceWindowDemoRef = useRef<HTMLDivElement>(null);
+  const [workspaceWindowDemoOpen, setWorkspaceWindowDemoOpen] = useState(true);
+  const [workspaceWindowDemoMaximized, setWorkspaceWindowDemoMaximized] = useState(false);
+  const [workspaceWindowDemoRect, setWorkspaceWindowDemoRect] = useState<WorkspaceWindowRect>({ x: 24, y: 24, width: 340, height: 230 });
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [shareAccessOpen, setShareAccessOpen] = useState(false);
@@ -1296,6 +1302,44 @@ export function CatalogApp() {
                 <IconButton label="Закрыть"><Icon name="close" /></IconButton>
               </div>
             </Preview>
+            <Preview title="Workspace window" note="inline / bounded / controlled" className="catalog-preview--wide catalog-workspace-window-preview">
+              <div ref={workspaceWindowDemoRef} className="catalog-workspace-window-demo">
+                {workspaceWindowDemoOpen ? (
+                  <WorkspaceWindow
+                    boundsRef={workspaceWindowDemoRef}
+                    rect={workspaceWindowDemoRect}
+                    onRectChange={setWorkspaceWindowDemoRect}
+                    maximized={workspaceWindowDemoMaximized}
+                    onMaximizedChange={setWorkspaceWindowDemoMaximized}
+                    onActivate={() => undefined}
+                    onClose={() => {
+                      setWorkspaceWindowDemoOpen(false);
+                      setWorkspaceWindowDemoMaximized(false);
+                    }}
+                    title="Визуальный канал"
+                    subtitle="WORKSPACE / AUXILIARY VIEW"
+                    status="LIVE"
+                    footer={<span className="catalog-workspace-window-demo__hint">Стрелки — позиция · Shift + стрелки — 10 px</span>}
+                    active
+                    zIndex={2}
+                  >
+                    <div className="catalog-workspace-window-demo__media">
+                      <Icon name="video" size={24} />
+                      <strong>Рабочая поверхность</strong>
+                      <span>Перемещается, изменяет размер и разворачивается только внутри сцены.</span>
+                    </div>
+                  </WorkspaceWindow>
+                ) : (
+                  <Button
+                    className="catalog-workspace-window-demo__reopen"
+                    shape="pill"
+                    icon={<Icon name="plus" />}
+                    onClick={() => setWorkspaceWindowDemoOpen(true)}
+                  >Открыть окно</Button>
+                )}
+              </div>
+              <p className="catalog-preview__explanation">Rectangle, maximize, close и stacking остаются состоянием приложения; дизайн-система владеет одинаковой bounded-геометрией и доступным управлением.</p>
+            </Preview>
             <Preview title="Inspector" note="modeless / draggable" className="catalog-preview--wide catalog-preview--compact catalog-inspector-launcher">
               <p className="catalog-preview__explanation">Настройки приложения и Toolbar открываются в отдельном перемещаемом Inspector и сохраняются одним серверным layout.</p>
               <Button variant="primary" shape="pill" icon={<Icon name="panel" />} onClick={() => setInspectorOpen(true)}>Открыть Inspector</Button>

apps/catalog/src/styles.css

@@ -897,6 +897,65 @@ textarea {
   grid-column: 1 / -1;
 }
 
+.catalog-workspace-window-preview .catalog-preview__body {
+  align-content: stretch;
+}
+
+.catalog-workspace-window-demo {
+  position: relative;
+  min-height: 24rem;
+  overflow: hidden;
+  border-radius: var(--nodedc-radius-card);
+  background:
+    linear-gradient(color-mix(in srgb, var(--nodedc-text-primary) 5%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--nodedc-text-primary) 5%, transparent) 1px, transparent 1px),
+    color-mix(in srgb, var(--nodedc-canvas) 88%, var(--nodedc-glass-panel-bg-soft));
+  background-size: 2.5rem 2.5rem;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nodedc-text-primary) 8%, transparent);
+}
+
+.catalog-workspace-window-demo .nodedc-workspace-window__body {
+  display: grid;
+  padding: 0.25rem 0.75rem 0.5rem;
+}
+
+.catalog-workspace-window-demo__media {
+  display: grid;
+  min-height: 0;
+  place-content: center;
+  justify-items: center;
+  gap: 0.45rem;
+  border-radius: calc(var(--nodedc-radius-card) * 0.72);
+  background:
+    radial-gradient(circle at 62% 30%, color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 18%, transparent), transparent 38%),
+    color-mix(in srgb, var(--nodedc-canvas) 72%, transparent);
+  color: var(--nodedc-text-secondary);
+  text-align: center;
+}
+
+.catalog-workspace-window-demo__media strong {
+  color: var(--nodedc-text-primary);
+  font-size: 0.82rem;
+}
+
+.catalog-workspace-window-demo__media span,
+.catalog-workspace-window-demo__hint {
+  color: var(--nodedc-text-muted);
+  font-size: 0.66rem;
+  line-height: 1.4;
+}
+
+.catalog-workspace-window-demo__media span {
+  max-width: 16rem;
+}
+
+.catalog-workspace-window-demo__reopen {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .catalog-inspector-launcher .nodedc-button {
   width: 100%;
 }

docs/COMPONENTS.md

@@ -86,6 +86,14 @@ Window — единая механика открытия modal и правой
 
 Для modeless Inspector доступен `draggable`: окно двигается за header, не блокирует приложение и ограничивается viewport. Modal-окна не становятся draggable автоматически.
 
+## WorkspaceWindow
+
+`WorkspaceWindow` — modeless-окно внутри рабочей сцены приложения. Оно рендерится непосредственно в переданном workspace, не использует portal и не может перекрыть шапку, навигацию или соседние панели за пределами этого workspace.
+
+Приложение контролирует `rect`, `maximized`, видимость, active-state и `zIndex`. Компонент владеет pointer/keyboard-механикой перемещения и изменения размера, кнопками maximize/restore и close, а также повторно ограничивает геометрию при изменении размеров workspace через `ResizeObserver`. Родительский bounds-контейнер должен быть позиционированным и обрезать содержимое (`position: relative; overflow: hidden`).
+
+Окно предназначено для вспомогательных камер, инструментов и сопоставляемых представлений внутри сцены. Modal workflow, подтверждение и viewport-level Inspector по-прежнему используют `Window`.
+
 ## Toolbar
 
 `Toolbar` — канонический dock из нового Engine с требованиями BIM Viewer. Он поддерживает позиции `left`, `right`, `bottom`, lens magnification и autohide. Контролируются фон, border, outline, минимальный/максимальный размер и количество иконок линзы.

docs/WINDOWS_AND_LAYERS.md

@@ -69,8 +69,26 @@ Side window использует ту же механику, но placement `end
 
 По умолчанию это modeless-слой: он не затемняет страницу, не перехватывает клики по основной области, не закрывается по backdrop, не блокирует body scroll и не удерживает Tab внутри панели. Escape и кнопка закрытия остаются доступны. Если конкретный workflow должен быть modal, это задаётся явно, а не получается случайно из placement.
 
+## Workspace window
+
+`WorkspaceWindow` отличается от modal и side inspector границей слоя: это inline modeless-окно, ограниченное конкретной рабочей сценой приложения.
+
+Обязательное поведение:
+
+1. окно рендерится внутри bounds-контейнера без portal;
+2. приложение контролирует rectangle, maximized-state, visibility, active-state и z-order;
+3. drag доступен за header мышью, touch/pen pointer и стрелками клавиатуры;
+4. resize выполняется нижней правой ручкой pointer-ом или стрелками клавиатуры;
+5. move и resize всегда ограничены текущими размерами workspace;
+6. `ResizeObserver` повторно ограничивает rectangle после изменения layout;
+7. maximize заполняет только workspace, а restore возвращает сохранённый приложением rectangle;
+8. close сообщает intent приложению и не создаёт внутренний store;
+9. родительский bounds-контейнер использует `position: relative` и `overflow: hidden`.
+
+Workspace window используется для вспомогательных камер, инструментов и сопоставляемых представлений внутри stage. Оно не заменяет modal `Window`, viewport-level Inspector или `ApplicationPanel`.
+
 ## Управление состоянием
 
 Библиотека не создаёт глобальный store окон. Приложение владеет тем, какое окно открыто и какие данные в нём загружены. Библиотека владеет одинаковым поведением самого слоя.
 
-Если приложению позже потребуется stack нескольких modeless-окон, это будет отдельный пакетный контракт, а не расширение локального z-index.
+Stack workspace-окон остаётся контролируемым приложением: оно передаёт active-state и `zIndex`, а компонент отвечает только за одинаковую геометрию и взаимодействие. Глобальный stack viewport-level modeless-окон остаётся отдельным будущим контрактом.

packages/ui-core/styles.css

@@ -15,13 +15,13 @@
   box-sizing: border-box;
 }
 
-:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close) {
+:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close, .nodedc-workspace-window__action, .nodedc-workspace-window__resize) {
   border: 0;
   outline: 0;
   font: inherit;
 }
 
-:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close):focus-visible {
+:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close, .nodedc-workspace-window__action, .nodedc-workspace-window__resize):focus-visible {
   background-color: var(--nodedc-focus-surface);
   box-shadow: var(--nodedc-glass-control-shadow), inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.22);
 }
@@ -2163,6 +2163,174 @@ textarea.nodedc-field__control {
   gap: var(--nodedc-space-2);
 }
 
+.nodedc-workspace-window {
+  position: absolute;
+  isolation: isolate;
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--nodedc-radius-modal);
+  animation: nodedc-window-in var(--nodedc-duration-normal) var(--nodedc-ease-standard);
+  touch-action: none;
+}
+
+.nodedc-workspace-window[data-active="true"] {
+  box-shadow: var(--nodedc-modal-shadow), 0 0 0 1px color-mix(in srgb, var(--nodedc-text-primary) 16%, transparent);
+}
+
+.nodedc-workspace-window[data-maximized="true"] {
+  border-radius: inherit;
+}
+
+.nodedc-workspace-window__head {
+  display: grid;
+  min-height: 3.45rem;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--nodedc-space-3);
+  padding: 0.62rem 0.65rem 0.5rem 1rem;
+  cursor: grab;
+  outline: 0;
+  touch-action: none;
+  user-select: none;
+}
+
+.nodedc-workspace-window__head:focus-visible {
+  background: var(--nodedc-focus-surface);
+  box-shadow: inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.22);
+}
+
+.nodedc-workspace-window[data-maximized="true"] .nodedc-workspace-window__head {
+  cursor: default;
+}
+
+.nodedc-workspace-window[data-interaction="move"] .nodedc-workspace-window__head {
+  cursor: grabbing;
+}
+
+.nodedc-workspace-window__titles {
+  display: grid;
+  min-width: 0;
+  gap: 0.2rem;
+}
+
+.nodedc-workspace-window__title-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--nodedc-space-2);
+}
+
+.nodedc-workspace-window__title,
+.nodedc-workspace-window__subtitle {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nodedc-workspace-window__title {
+  color: var(--nodedc-text-primary);
+  font-size: var(--nodedc-font-size-md);
+  font-weight: var(--nodedc-font-weight-strong);
+  line-height: 1.2;
+}
+
+.nodedc-workspace-window__subtitle,
+.nodedc-workspace-window__status {
+  color: var(--nodedc-text-muted);
+  font-size: var(--nodedc-font-size-xs);
+  font-weight: var(--nodedc-font-weight-medium);
+  line-height: 1.25;
+}
+
+.nodedc-workspace-window__status {
+  flex: 0 0 auto;
+}
+
+.nodedc-workspace-window__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.nodedc-workspace-window__action {
+  display: inline-grid;
+  width: 2rem;
+  height: 2rem;
+  place-items: center;
+  border-radius: var(--nodedc-radius-circle);
+  background: var(--nodedc-glass-control-bg);
+  color: var(--nodedc-text-secondary);
+  box-shadow: var(--nodedc-glass-control-shadow);
+  cursor: pointer;
+}
+
+.nodedc-workspace-window__action:hover {
+  background: var(--nodedc-glass-control-hover);
+  color: var(--nodedc-text-primary);
+}
+
+.nodedc-workspace-window__body {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: 0.25rem 1rem 0.8rem;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
+  touch-action: auto;
+}
+
+.nodedc-workspace-window__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--nodedc-space-2);
+  padding: 0.55rem 1rem 0.8rem;
+}
+
+.nodedc-workspace-window__resize {
+  position: absolute;
+  z-index: 3;
+  right: 0.2rem;
+  bottom: 0.2rem;
+  width: 1.55rem;
+  height: 1.55rem;
+  border-radius: 0.4rem;
+  background: transparent;
+  color: var(--nodedc-text-muted);
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
+.nodedc-workspace-window__resize::before,
+.nodedc-workspace-window__resize::after {
+  position: absolute;
+  right: 0.32rem;
+  bottom: 0.32rem;
+  border-right: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  content: "";
+}
+
+.nodedc-workspace-window__resize::before {
+  width: 0.72rem;
+  height: 0.72rem;
+}
+
+.nodedc-workspace-window__resize::after {
+  width: 0.36rem;
+  height: 0.36rem;
+}
+
+.nodedc-workspace-window[data-interaction="resize"] .nodedc-workspace-window__resize {
+  color: var(--nodedc-text-primary);
+}
+
 .nodedc-toolbar-wrap {
   position: fixed;
   z-index: calc(var(--nodedc-layer-header) + 20);
@@ -2823,6 +2991,7 @@ textarea.nodedc-field__control {
   .nodedc-dropdown-surface,
   .nodedc-overlay,
   .nodedc-window,
+  .nodedc-workspace-window,
   .nodedc-application-panel,
   .nodedc-inspector__section-content {
     animation: none;

packages/ui-react/src/WorkspaceWindow.tsx

@@ -0,0 +1,343 @@
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { cn } from "./cn.js";
+import { Icon } from "./Icon.js";
+
+export interface WorkspaceWindowRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface WorkspaceWindowProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onResize"> {
+  boundsRef: RefObject<HTMLElement | null>;
+  rect: WorkspaceWindowRect;
+  onRectChange: (rect: WorkspaceWindowRect) => void;
+  maximized: boolean;
+  onMaximizedChange: (maximized: boolean) => void;
+  onActivate?: () => void;
+  onClose: () => void;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  status?: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+  minWidth?: number;
+  minHeight?: number;
+  resizable?: boolean;
+  active?: boolean;
+  zIndex?: number;
+  closeLabel?: string;
+  maximizeLabel?: string;
+  restoreLabel?: string;
+  moveLabel?: string;
+  resizeLabel?: string;
+}
+
+type WorkspaceBounds = { width: number; height: number };
+
+type WorkspaceInteraction = {
+  kind: "move" | "resize";
+  pointerId: number;
+  startClientX: number;
+  startClientY: number;
+  startRect: WorkspaceWindowRect;
+};
+
+const rectEquals = (left: WorkspaceWindowRect, right: WorkspaceWindowRect) => (
+  left.x === right.x
+  && left.y === right.y
+  && left.width === right.width
+  && left.height === right.height
+);
+
+const clamp = (value: number, minimum: number, maximum: number) => (
+  Math.min(Math.max(value, minimum), maximum)
+);
+
+const clampDimension = (value: number, minimum: number, available: number) => {
+  const limit = Math.max(0, available);
+  const effectiveMinimum = Math.min(Math.max(0, minimum), limit);
+  return clamp(value, effectiveMinimum, limit);
+};
+
+const normalizeRect = (
+  rect: WorkspaceWindowRect,
+  bounds: WorkspaceBounds,
+  minWidth: number,
+  minHeight: number,
+): WorkspaceWindowRect => {
+  const width = clampDimension(rect.width, minWidth, bounds.width);
+  const height = clampDimension(rect.height, minHeight, bounds.height);
+  return {
+    x: clamp(rect.x, 0, Math.max(0, bounds.width - width)),
+    y: clamp(rect.y, 0, Math.max(0, bounds.height - height)),
+    width,
+    height,
+  };
+};
+
+const resizeRect = (
+  rect: WorkspaceWindowRect,
+  deltaX: number,
+  deltaY: number,
+  bounds: WorkspaceBounds,
+  minWidth: number,
+  minHeight: number,
+): WorkspaceWindowRect => {
+  const normalized = normalizeRect(rect, bounds, minWidth, minHeight);
+  return {
+    ...normalized,
+    width: clampDimension(normalized.width + deltaX, minWidth, bounds.width - normalized.x),
+    height: clampDimension(normalized.height + deltaY, minHeight, bounds.height - normalized.y),
+  };
+};
+
+const keyboardStep = (event: KeyboardEvent<HTMLElement>) => event.shiftKey ? 10 : 1;
+
+export function WorkspaceWindow({
+  boundsRef,
+  rect,
+  onRectChange,
+  maximized,
+  onMaximizedChange,
+  onActivate,
+  onClose,
+  title,
+  subtitle,
+  status,
+  footer,
+  children,
+  minWidth = 260,
+  minHeight = 180,
+  resizable = true,
+  active = false,
+  zIndex,
+  closeLabel = "Закрыть окно",
+  maximizeLabel = "Развернуть окно",
+  restoreLabel = "Восстановить окно",
+  moveLabel = "Переместить окно",
+  resizeLabel = "Изменить размер окна",
+  className,
+  style,
+  onPointerDownCapture,
+  onFocusCapture,
+  ...props
+}: WorkspaceWindowProps) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const interactionRef = useRef<WorkspaceInteraction | null>(null);
+  const rectRef = useRef(rect);
+  const onRectChangeRef = useRef(onRectChange);
+  const [interactionKind, setInteractionKind] = useState<WorkspaceInteraction["kind"] | null>(null);
+
+  rectRef.current = rect;
+  onRectChangeRef.current = onRectChange;
+
+  const readBounds = (): WorkspaceBounds | null => {
+    const bounds = boundsRef.current;
+    if (!bounds) return null;
+    return { width: bounds.clientWidth, height: bounds.clientHeight };
+  };
+
+  const emitRect = (nextRect: WorkspaceWindowRect) => {
+    if (rectEquals(rectRef.current, nextRect)) return;
+    rectRef.current = nextRect;
+    onRectChangeRef.current(nextRect);
+  };
+
+  useEffect(() => {
+    const bounds = boundsRef.current;
+    if (!bounds || maximized) return;
+
+    const clampToBounds = () => {
+      const nextBounds = readBounds();
+      if (nextBounds) emitRect(normalizeRect(rectRef.current, nextBounds, minWidth, minHeight));
+    };
+
+    clampToBounds();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(clampToBounds);
+    observer?.observe(bounds);
+    window.addEventListener("resize", clampToBounds);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", clampToBounds);
+    };
+  }, [boundsRef, maximized, minHeight, minWidth, rect.height, rect.width, rect.x, rect.y]);
+
+  useEffect(() => {
+    const handlePointerMove = (event: globalThis.PointerEvent) => {
+      const interaction = interactionRef.current;
+      if (!interaction || event.pointerId !== interaction.pointerId) return;
+      const bounds = readBounds();
+      if (!bounds) return;
+
+      const deltaX = event.clientX - interaction.startClientX;
+      const deltaY = event.clientY - interaction.startClientY;
+      const nextRect = interaction.kind === "move"
+        ? normalizeRect({
+            ...interaction.startRect,
+            x: interaction.startRect.x + deltaX,
+            y: interaction.startRect.y + deltaY,
+          }, bounds, minWidth, minHeight)
+        : resizeRect(interaction.startRect, deltaX, deltaY, bounds, minWidth, minHeight);
+      emitRect(nextRect);
+      event.preventDefault();
+    };
+
+    const endInteraction = (event: globalThis.PointerEvent) => {
+      if (interactionRef.current?.pointerId !== event.pointerId) return;
+      interactionRef.current = null;
+      setInteractionKind(null);
+    };
+
+    window.addEventListener("pointermove", handlePointerMove, { passive: false });
+    window.addEventListener("pointerup", endInteraction);
+    window.addEventListener("pointercancel", endInteraction);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", endInteraction);
+      window.removeEventListener("pointercancel", endInteraction);
+    };
+  }, [boundsRef, minHeight, minWidth]);
+
+  useEffect(() => {
+    if ((!resizable && interactionRef.current?.kind === "resize") || maximized) {
+      interactionRef.current = null;
+      setInteractionKind(null);
+    }
+  }, [maximized, resizable]);
+
+  const beginInteraction = (kind: WorkspaceInteraction["kind"], event: PointerEvent<HTMLElement>) => {
+    if (maximized || event.button !== 0 || (kind === "resize" && !resizable)) return;
+    if (kind === "move" && (event.target as HTMLElement).closest("button, input, select, textarea, a")) return;
+    const bounds = readBounds();
+    if (!bounds) return;
+    const startRect = normalizeRect(rectRef.current, bounds, minWidth, minHeight);
+    emitRect(startRect);
+    interactionRef.current = {
+      kind,
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startRect,
+    };
+    setInteractionKind(kind);
+    event.currentTarget.focus();
+    event.preventDefault();
+  };
+
+  const handleMoveKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (maximized || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    const bounds = readBounds();
+    if (!bounds) return;
+    const step = keyboardStep(event);
+    const next = { ...rectRef.current };
+    if (event.key === "ArrowLeft") next.x -= step;
+    if (event.key === "ArrowRight") next.x += step;
+    if (event.key === "ArrowUp") next.y -= step;
+    if (event.key === "ArrowDown") next.y += step;
+    emitRect(normalizeRect(next, bounds, minWidth, minHeight));
+    event.preventDefault();
+  };
+
+  const handleResizeKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (maximized || !resizable || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    const bounds = readBounds();
+    if (!bounds) return;
+    const step = keyboardStep(event);
+    const deltaX = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
+    const deltaY = event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
+    emitRect(resizeRect(rectRef.current, deltaX, deltaY, bounds, minWidth, minHeight));
+    event.preventDefault();
+  };
+
+  const geometryStyle = maximized
+    ? { left: 0, top: 0, width: "100%", height: "100%" }
+    : { left: rect.x, top: rect.y, width: rect.width, height: rect.height };
+
+  return (
+    <div
+      {...props}
+      className={cn("nodedc-workspace-window nodedc-glass-material nodedc-material-rim nodedc-ui-root", className)}
+      data-active={active ? "true" : undefined}
+      data-maximized={maximized ? "true" : undefined}
+      data-resizable={resizable ? "true" : undefined}
+      data-interaction={interactionKind ?? undefined}
+      role="dialog"
+      aria-modal="false"
+      aria-labelledby={titleId}
+      aria-describedby={subtitle ? descriptionId : undefined}
+      style={{ ...style, ...geometryStyle, zIndex: zIndex ?? style?.zIndex }}
+      onPointerDownCapture={(event) => {
+        onActivate?.();
+        onPointerDownCapture?.(event);
+      }}
+      onFocusCapture={(event) => {
+        onActivate?.();
+        onFocusCapture?.(event);
+      }}
+    >
+      <header
+        className="nodedc-workspace-window__head"
+        tabIndex={maximized ? -1 : 0}
+        role="group"
+        aria-roledescription="Перемещаемая область окна"
+        aria-label={moveLabel}
+        aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight"
+        onPointerDown={(event) => beginInteraction("move", event)}
+        onKeyDown={handleMoveKeyDown}
+      >
+        <div className="nodedc-workspace-window__titles">
+          <div className="nodedc-workspace-window__title-row">
+            <h2 id={titleId} className="nodedc-workspace-window__title">{title}</h2>
+            {status ? <span className="nodedc-workspace-window__status">{status}</span> : null}
+          </div>
+          {subtitle ? <p id={descriptionId} className="nodedc-workspace-window__subtitle">{subtitle}</p> : null}
+        </div>
+        <div className="nodedc-workspace-window__actions">
+          <button
+            type="button"
+            className="nodedc-workspace-window__action"
+            aria-label={maximized ? restoreLabel : maximizeLabel}
+            title={maximized ? restoreLabel : maximizeLabel}
+            onClick={() => onMaximizedChange(!maximized)}
+          >
+            <Icon name={maximized ? "minimize" : "expand"} size={15} strokeWidth={1.6} />
+          </button>
+          <button
+            type="button"
+            className="nodedc-workspace-window__action"
+            aria-label={closeLabel}
+            title={closeLabel}
+            onClick={onClose}
+          >
+            <Icon name="close" size={15} strokeWidth={1.6} />
+          </button>
+        </div>
+      </header>
+      <div className="nodedc-workspace-window__body">{children}</div>
+      {footer ? <footer className="nodedc-workspace-window__footer">{footer}</footer> : null}
+      {resizable && !maximized ? (
+        <button
+          type="button"
+          className="nodedc-workspace-window__resize"
+          aria-label={resizeLabel}
+          title={resizeLabel}
+          onPointerDown={(event) => beginInteraction("resize", event)}
+          onKeyDown={handleResizeKeyDown}
+        />
+      ) : null}
+    </div>
+  );
+}

packages/ui-react/src/index.ts

@@ -20,3 +20,4 @@ export * from "./Settings.js";
 export * from "./SharingModals.js";
 export * from "./Toolbar.js";
 export * from "./Window.js";
+export * from "./WorkspaceWindow.js";

registry/components.json

@@ -131,6 +131,22 @@
         "A draggable inspector moves by its header and remains clamped to the viewport."
       ]
     },
+    {
+      "id": "workspace-window",
+      "status": "baseline",
+      "package": "@nodedc/ui-react",
+      "exports": ["WorkspaceWindow", "WorkspaceWindowRect", "WorkspaceWindowProps"],
+      "domContract": ["nodedc-workspace-window"],
+      "summary": "Controlled modeless window for media, tools and synchronized views constrained to an application-owned workspace.",
+      "anatomy": ["controlled local rectangle", "title and optional status", "maximize and close actions", "scrollable body", "optional footer", "keyboard-accessible resize handle"],
+      "behavior": ["inline render without portal", "parent-bound dragging", "bottom-right resizing", "maximize within parent", "ResizeObserver reclamp", "pointer and keyboard geometry control", "application-owned activation and stacking"],
+      "rules": [
+        "The bounds element is an application-owned positioned and clipped workspace; WorkspaceWindow never escapes it or renders into document.body.",
+        "Rectangle, maximized state, visibility, activation and z-order are controlled by the application.",
+        "Use WorkspaceWindow for auxiliary views inside a stage; modal workflows and viewport inspectors continue to use Window.",
+        "Dragging and resizing remain clamped when the workspace changes size, including when it becomes smaller than the requested minimum."
+      ]
+    },
     {
       "id": "confirmation-modal",
       "status": "baseline",