Refine glass material and environment controls

packages/ui-react/src/ConfirmationModal.tsx

@@ -59,7 +59,7 @@ export function ConfirmationModal({
           <span />
           <WindowFooterActions>
             <Button disabled={pending} onClick={onClose}>{cancelLabel}</Button>
-            <Button variant={danger ? "danger" : "accent"} disabled={pending} onClick={handleConfirm}>
+            <Button variant={danger ? "danger" : "primary"} disabled={pending} onClick={handleConfirm}>
               {pending ? pendingLabel : confirmLabel}
             </Button>
           </WindowFooterActions>
@@ -73,4 +73,3 @@ export function ConfirmationModal({
     </Window>
   );
 }
-

packages/ui-react/src/Inspector.tsx

@@ -88,15 +88,22 @@ export function Inspector({
 export interface ControlRowProps {
   label: ReactNode;
   children: ReactNode;
+  /** Optional trailing action, for example a per-control save-to-layout affordance. */
+  action?: ReactNode;
   layout?: "inline" | "stack";
   className?: string;
 }
 
-export function ControlRow({ label, children, layout = "inline", className }: ControlRowProps) {
+export function ControlRow({ label, children, action, layout = "inline", className }: ControlRowProps) {
   return (
-    <div className={cn("nodedc-control-row", className)} data-layout={layout === "inline" ? undefined : layout}>
+    <div
+      className={cn("nodedc-control-row", className)}
+      data-layout={layout === "inline" ? undefined : layout}
+      data-action={action ? "true" : undefined}
+    >
       <div className="nodedc-control-row__label">{label}</div>
       <div className="nodedc-control-row__control">{children}</div>
+      {action ? <div className="nodedc-control-row__action">{action}</div> : null}
     </div>
   );
 }

packages/ui-react/src/RangeControl.tsx

@@ -4,6 +4,8 @@ import { Dropdown } from "./Dropdown.js";
 
 export interface RangeControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
   label: string;
+  /** Keeps the accessible name while letting a parent ControlRow render the visible label. */
+  showLabel?: boolean;
   value: number;
   min: number;
   max: number;
@@ -13,6 +15,7 @@ export interface RangeControlProps extends Omit<InputHTMLAttributes<HTMLInputEle
 
 export function RangeControl({
   label,
+  showLabel = true,
   value,
   min,
   max,
@@ -26,7 +29,7 @@ export function RangeControl({
   const progress = Math.max(0, Math.min(100, ((value - min) / (safeMax - min)) * 100));
   const style = { "--nodedc-range-progress": `${progress}%` } as CSSProperties;
   return (
-    <label className={cn("nodedc-range", className)} style={style}>
+    <label className={cn("nodedc-range", className)} data-label-hidden={showLabel ? undefined : "true"} style={style}>
       <input
         type="range"
         value={value}
@@ -37,10 +40,10 @@ export function RangeControl({
         onChange={(event) => onChange(Number(event.target.value))}
         {...props}
       />
-      <span className="nodedc-range__label">{label}</span>
+      {showLabel ? <span className="nodedc-range__label">{label}</span> : null}
       <span className="nodedc-range__value">{formatValue(value)}</span>
       <span className="nodedc-range__fill-text" aria-hidden="true">
-        <span className="nodedc-range__label">{label}</span>
+        {showLabel ? <span className="nodedc-range__label">{label}</span> : null}
         <span className="nodedc-range__value">{formatValue(value)}</span>
       </span>
     </label>

packages/ui-react/src/SharingModals.tsx

@@ -97,7 +97,7 @@ export function ShareAccessModal<Role extends string>({
         <WindowFooterActions>
           <Button onClick={onClose} disabled={pending}>Отменить</Button>
           {canManage ? (
-            <Button variant="accent" onClick={() => void onInvite()} disabled={pending || !inviteEmail.trim()}>
+            <Button variant="primary" onClick={() => void onInvite()} disabled={pending || !inviteEmail.trim()}>
               {pending ? "Сохранение..." : "Поделиться"}
             </Button>
           ) : null}
@@ -233,7 +233,7 @@ export function ShareLinkModal({
         <>
           <Button onClick={onClose}>Закрыть</Button>
           <WindowFooterActions>
-            <Button variant="accent" icon={<Icon name={copied ? "check" : "copy"} />} onClick={() => void copy()} disabled={!link}>
+            <Button variant="primary" icon={<Icon name={copied ? "check" : "copy"} />} onClick={() => void copy()} disabled={!link}>
               {copied ? "Скопировано" : copyLabel}
             </Button>
           </WindowFooterActions>