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

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}
         </>