SILVER/NODEDC_DESIGN_GUIDELINE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Codex
2026-09-21 08:45:10 +03:00
parent 67025ee209
commit 8dd9190573
15 changed files with 263 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-react/src/ApplicationShell.tsx
+3
View File
@@ -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
+2
View File
@@ -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
+24
View File
@@ -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
+37 -11
View File
@@ -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
+4 -3
View File
@@ -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>
);
}