feat(ui): add spatial clipping scale and compact record actions

packages/ui-core/styles.css

@@ -842,6 +842,33 @@ textarea.nodedc-field__control {
   cursor: default;
 }
 
+.nodedc-select-option-row { display: flex; align-items: stretch; gap: 0.2rem; }
+.nodedc-select-option-row > .nodedc-dropdown-option { flex: 1; min-width: 0; }
+.nodedc-select-option-row > .nodedc-icon-button {
+  width: 2.35rem; height: auto; flex: 0 0 2.35rem;
+  border-radius: 0; background: transparent; box-shadow: none;
+  color: var(--nodedc-text-muted);
+}
+.nodedc-select-option-row > .nodedc-icon-button > svg { width: 15px; height: 15px; transform: none; }
+.nodedc-select-option-row > .nodedc-icon-button:hover:not(:disabled),
+.nodedc-select-option-row > .nodedc-icon-button:focus-visible { background: transparent; color: var(--nodedc-text-primary); }
+.nodedc-select-option-row > .nodedc-icon-button[data-tone="danger"]:hover:not(:disabled),
+.nodedc-select-option-row > .nodedc-icon-button[data-tone="danger"]:focus-visible { color: rgb(var(--nodedc-danger-rgb)); }
+.nodedc-select-option-row > .nodedc-icon-button:active:not(:disabled) { transform: none; }
+.nodedc-range-scale { position: relative; width: calc(var(--nodedc-control-height) * 0.4); height: 100%; min-height: 6rem; }
+.nodedc-range[data-orientation="vertical"] { width: 100%; height: 100%; border: 0; outline: 0; box-shadow: none; }
+.nodedc-range[data-orientation="vertical"]::before { inset: auto 0 0; width: 100%; height: var(--nodedc-range-progress); }
+.nodedc-range[data-orientation="vertical"] input[type="range"] { writing-mode: vertical-lr; direction: rtl; }
+.nodedc-range[data-orientation="vertical"] .nodedc-range__label { left: 50%; max-width: none; font-size: calc(var(--nodedc-font-size-sm) * 0.9); writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); }
+.nodedc-range-scale__limit { position: absolute; left: calc(100% + 0.4rem); color: var(--nodedc-text-primary); font-size: calc(var(--nodedc-font-size-xs) * 0.9); font-weight: var(--nodedc-font-weight-medium); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
+.nodedc-range-scale[data-limit-side="left"] .nodedc-range-scale__limit { right: calc(100% + 0.4rem); left: auto; text-align: right; }
+.nodedc-range-scale__limit--max { top: 0.75rem; }
+.nodedc-range-scale__limit--min { bottom: 0.75rem; }
+.nodedc-range[data-orientation="vertical"] .nodedc-range__fill-text { clip-path: inset(calc(100% - var(--nodedc-range-progress)) 0 0 round var(--nodedc-radius-circle)); }
+/* Native ranges may match focus-visible after pointer input too. Keep every
+   state perimeter-free; underline both contrast layers to identify focus. */
+.nodedc-range[data-orientation="vertical"]:has(input:focus-visible) .nodedc-range__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
+
 .nodedc-range__label,
 .nodedc-range__value {
   position: absolute;
@@ -1627,6 +1654,8 @@ textarea.nodedc-field__control {
 
 .nodedc-application-panel__head {
   display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
   min-height: 3.55rem;
   align-items: flex-start;
   justify-content: space-between;
@@ -1635,6 +1664,7 @@ textarea.nodedc-field__control {
 
 .nodedc-application-panel__titles {
   display: grid;
+  flex: 1 1 18rem;
   min-width: 0;
   gap: 0.24rem;
   padding: 0.2rem 0.25rem;
@@ -1669,12 +1699,17 @@ textarea.nodedc-field__control {
 .nodedc-application-panel__actions {
   display: flex;
   flex: 0 0 auto;
+  flex-wrap: wrap;
+  max-width: 100%;
+  margin-left: auto;
   align-items: center;
   gap: 0.45rem;
 }
 
 .nodedc-application-panel__tools {
   display: flex;
+  min-width: 0;
+  max-width: 100%;
   align-items: center;
   margin-right: 0.1rem;
 }
@@ -3926,6 +3961,20 @@ textarea.nodedc-field__control {
 .nodedc-status[data-variant="indicator"][data-tone="danger"]::before { background: rgb(var(--nodedc-danger-rgb)); }
 .nodedc-status[data-variant="indicator"][data-tone="accent"]::before { background: rgb(var(--nodedc-accent-rgb)); }
 
+.nodedc-status[data-pulse="true"]::before {
+  content: ""; display: block; width: .42rem; height: .42rem; flex: 0 0 .42rem;
+  border-radius: var(--nodedc-radius-circle); background: currentColor;
+  animation: nodedc-status-pulse 1.6s ease-in-out infinite;
+}
+.nodedc-status[data-pulse="true"]:not([data-variant="indicator"]) { gap: .42rem; }
+@keyframes nodedc-status-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: .35; transform: scale(.75); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .nodedc-status[data-pulse="true"]::before { animation: none; }
+}
+
 /* Shared product landing and environment settings. */
 .nodedc-landing-stage {
   position: relative;

packages/ui-react/src/ApplicationShell.tsx

@@ -68,6 +68,7 @@ export interface ApplicationPanelUtilityAction {
   icon: IconName;
   onClick: () => void;
   disabled?: boolean;
+  pressed?: boolean;
 }
 
 export function ApplicationPanel({
@@ -102,6 +103,8 @@ export function ApplicationPanel({
               className="nodedc-application-panel__action"
               data-action="utility"
               aria-label={action.label}
+              aria-pressed={action.pressed}
+              data-active={action.pressed ? "true" : undefined}
               disabled={action.disabled}
               onClick={action.onClick}
             >

packages/ui-react/src/Icon.tsx

@@ -21,6 +21,7 @@ import {
   Globe2,
   Image,
   Inbox,
+  Info,
   KeyRound,
   Layers,
   LayoutDashboard,
@@ -80,6 +81,7 @@ const icons = {
   grid: LayoutDashboard,
   image: Image,
   inbox: Inbox,
+  info: Info,
   key: KeyRound,
   layers: Layers,
   list: ListChecks,

packages/ui-react/src/RangeControl.tsx

@@ -4,6 +4,7 @@ import { Dropdown } from "./Dropdown.js";
 
 export interface RangeControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
   label: string;
+  orientation?: "horizontal" | "vertical";
   value: number;
   min: number;
   max: number;
@@ -12,6 +13,10 @@ export interface RangeControlProps extends Omit<InputHTMLAttributes<HTMLInputEle
     max?: number;
   };
   formatValue?: (value: number) => string;
+  /** Unit-free endpoint labels beside the vertical scale. */
+  formatLimit?: (value: number) => string;
+  /** Physical side for vertical endpoint labels; use the inward side of a scene rail. */
+  limitSide?: "left" | "right";
   onChange: (value: number) => void;
 }
 
@@ -52,12 +57,15 @@ const editableNumber = (value: number) => (
 
 export function RangeControl({
   label,
+  orientation = "horizontal",
   value,
   min,
   max,
   exactValueBounds,
   step,
   formatValue = String,
+  formatLimit = String,
+  limitSide = "right",
   onChange,
   className,
   disabled = false,
@@ -132,6 +140,22 @@ export function RangeControl({
     }
   };
 
+  if (orientation === "vertical") return (
+    <div className="nodedc-range-scale" data-limit-side={limitSide}>
+    <div ref={rootRef} className={cn("nodedc-range", className)} style={style} data-orientation="vertical">
+      <input ref={rangeRef} {...props} type="range" value={value} min={min} max={safeMax} step={step}
+        disabled={disabled} tabIndex={tabIndex} aria-label={label} aria-orientation="vertical"
+        aria-valuetext={displayValue} onChange={(event) => onChange(Number(event.target.value))} />
+      <span className="nodedc-range__label">{label} · {displayValue}</span>
+      <span className="nodedc-range__fill-text" aria-hidden="true">
+        <span className="nodedc-range__label">{label} · {displayValue}</span>
+      </span>
+    </div>
+    <span className="nodedc-range-scale__limit nodedc-range-scale__limit--max">{formatLimit(max)}</span>
+    <span className="nodedc-range-scale__limit nodedc-range-scale__limit--min">{formatLimit(min)}</span>
+    </div>
+  );
+
   return (
     <div ref={rootRef} className={cn("nodedc-range", className)} style={style} data-editing={editing || undefined}>
       <input

packages/ui-react/src/Select.tsx

@@ -1,6 +1,7 @@
-import { useContext, useMemo, useState, type KeyboardEvent, type ReactNode } from "react";
+import { useContext, useMemo, useRef, useState, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
 import type { FloatingPlacement } from "@nodedc/ui-core";
 import { Dropdown } from "./Dropdown.js";
+import { IconButton } from "./Button.js";
 import { InspectorSelectPolicyContext } from "./InspectorContext.js";
 import { cn } from "./cn.js";
 
@@ -10,6 +11,7 @@ export interface SelectOption<T extends string> {
   description?: string;
   icon?: ReactNode;
   disabled?: boolean;
+  action?: { label: string; icon: ReactNode; disabled?: boolean; tone?: "neutral" | "danger"; onAction: () => void };
 }
 
 export type SelectVariant = "integrated" | "split" | "inline";
@@ -52,7 +54,11 @@ export function Select<T extends string>({
   const inspectorSplitRequired = useContext(InspectorSelectPolicyContext);
   const resolvedVariant: SelectVariant = inspectorSplitRequired ? "split" : variant;
   const [query, setQuery] = useState("");
+  const triggerButton = useRef<HTMLButtonElement | null>(null);
   const selected = options.find((option) => option.value === value) ?? options[0];
+  // Row actions are siblings, never nested interactive listbox options.
+  const withActions = options.some((option) => option.action);
+  const popupRole = withActions ? "dialog" : "listbox";
   const visibleOptions = useMemo(() => {
     const normalized = query.trim().toLocaleLowerCase();
     if (!normalized) return options;
@@ -66,10 +72,15 @@ export function Select<T extends string>({
       minWidth={minMenuWidth}
       width={menuWidth}
       disabled={disabled}
-      surfaceRole="listbox"
+      surfaceRole={popupRole}
       surfaceClassName={cn(resolvedVariant === "split" && "nodedc-select__menu", menuClassName)}
       trigger={({ open, toggle, setAnchorRef, setTriggerRef, surfaceId }) => {
+        const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+          triggerButton.current = event.currentTarget;
+          toggle();
+        };
         const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+          triggerButton.current = event.currentTarget;
           if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
             event.preventDefault();
             if (!open) toggle();
@@ -88,11 +99,11 @@ export function Select<T extends string>({
                   type="button"
                   className="nodedc-select__toggle"
                   aria-label={label}
-                  aria-haspopup="listbox"
+                  aria-haspopup={popupRole}
                   aria-controls={surfaceId}
                   aria-expanded={open}
                   disabled={disabled}
-                  onClick={toggle}
+                  onClick={handleClick}
                   onKeyDown={handleKeyDown}
                 >
                   <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
@@ -109,11 +120,11 @@ export function Select<T extends string>({
               type="button"
               className={cn("nodedc-select-inline", triggerClassName)}
               aria-label={label}
-              aria-haspopup="listbox"
+              aria-haspopup={popupRole}
               aria-controls={surfaceId}
               aria-expanded={open}
               disabled={disabled}
-              onClick={toggle}
+              onClick={handleClick}
               onKeyDown={handleKeyDown}
             >
               {selected?.icon ? <span className="nodedc-select-trigger__icon">{selected.icon}</span> : null}
@@ -128,11 +139,11 @@ export function Select<T extends string>({
             type="button"
             className={cn("nodedc-select-trigger", triggerClassName)}
             aria-label={label}
-            aria-haspopup="listbox"
+            aria-haspopup={popupRole}
             aria-controls={surfaceId}
             aria-expanded={open}
             disabled={disabled}
-            onClick={toggle}
+            onClick={handleClick}
             onKeyDown={handleKeyDown}
           >
             {selected?.icon ? <span className="nodedc-select-trigger__icon">{selected.icon}</span> : <span className="nodedc-select-trigger__icon" aria-hidden="true" />}
@@ -151,12 +162,13 @@ export function Select<T extends string>({
             </label>
           ) : null}
           {visibleOptions.map((option) => (
+            <div key={option.value} className="nodedc-select-option-row">
             <button
-              key={option.value}
               type="button"
               className="nodedc-dropdown-option"
-              role="option"
-              aria-selected={option.value === value}
+              role={withActions ? undefined : "option"}
+              aria-selected={withActions ? undefined : option.value === value}
+              aria-pressed={withActions ? option.value === value : undefined}
               data-selected={option.value === value ? "true" : undefined}
               disabled={option.disabled}
               onClick={() => {
@@ -173,6 +185,20 @@ export function Select<T extends string>({
               </span>
               {option.value === value ? <span className="nodedc-dropdown-option__check" aria-hidden="true">•</span> : null}
             </button>
+            {option.action ? <IconButton
+              label={option.action.label}
+              data-tone={option.action.tone ?? "neutral"}
+              disabled={option.action.disabled}
+              onClick={() => {
+                setQuery("");
+                close();
+                // A modal must restore focus to a surviving trigger, not this
+                // row action which disappears when the menu closes.
+                triggerButton.current?.focus();
+                option.action?.onAction();
+              }}
+            >{option.action.icon}</IconButton> : null}
+            </div>
           ))}
           {visibleOptions.length === 0 ? <div className="nodedc-empty-state">{emptyLabel}</div> : null}
         </>

packages/ui-react/src/StatusBadge.tsx

@@ -6,13 +6,14 @@ export type StatusTone = "neutral" | "success" | "warning" | "danger" | "accent"
 export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
   tone?: StatusTone;
   variant?: "badge" | "indicator";
+  /** Attention signal on the lamp only; respects reduced-motion preferences. */
+  pulse?: boolean;
 }
 
-export function StatusBadge({ tone = "neutral", variant = "badge", className, children, ...props }: StatusBadgeProps) {
+export function StatusBadge({ tone = "neutral", variant = "badge", pulse = false, className, children, ...props }: StatusBadgeProps) {
   return (
-    <span className={cn("nodedc-status", className)} data-tone={tone === "neutral" ? undefined : tone} data-variant={variant === "indicator" ? variant : undefined} {...props}>
+    <span className={cn("nodedc-status", className)} data-tone={tone === "neutral" ? undefined : tone} data-variant={variant === "indicator" ? variant : undefined} data-pulse={pulse ? "true" : undefined} {...props}>
       {variant === "indicator" ? null : children}
     </span>
   );
 }
-