Add grayscale slider below color wheel.

Author: adamwych

packages/ui/components/grayscale-slider/grayscale-slider.tsx

@@ -0,0 +1,43 @@
+import HorizontalSlider from "../slider/horizontalSlider";
+
+type Props = {
+    value: number;
+    onChange(value: number): void;
+    onFocus(): void;
+    onBlur(): void;
+};
+
+export default function GrayscaleSlider(props: Props) {
+    return (
+        <div class="flex items-center gap-4">
+            <div>
+                <svg width="100%" height="16px" viewBox="0 0 100% 16px" class="mb-3">
+                    <linearGradient id="grayscaleGradient" x1="0" x2="1" y1="0" y2="0">
+                        <stop offset="0%" stop-color="black" />
+                        <stop offset="100%" stop-color="white" />
+                    </linearGradient>
+
+                    <rect
+                        x="0"
+                        y="0"
+                        rx="2"
+                        ry="2"
+                        width="100%"
+                        height="16"
+                        fill="url(#grayscaleGradient)"
+                    />
+                </svg>
+
+                <HorizontalSlider
+                    min={0}
+                    max={1}
+                    value={props.value}
+                    onChange={props.onChange}
+                    onPointerDown={props.onFocus}
+                    onPointerUp={props.onBlur}
+                />
+            </div>
+            <div class="w-[26px] text-center">{Math.round(props.value * 255)}</div>
+        </div>
+    );
+}

packages/ui/editor/history-panel.tsx

@@ -8,7 +8,7 @@ export default function HistoryPanel() {
 
     return (
         <PanelSection label="History">
-            <div class="h-[340px] overflow-y-auto">
+            <div class="h-[271px] overflow-y-auto">
                 <For each={history.stack().entries}>
                     {(entry) => <HistoryPanelItem entry={entry} />}
                 </For>

packages/ui/editor/inspector/inputs/rgb.tsx

@@ -1,16 +1,33 @@
 import ColorWheel from "../../../components/color-wheel/color-wheel";
 import { RgbParameterInputInfo } from "../../../../material/node-parameter";
 import { InputProps } from "../parameter";
+import GrayscaleSlider from "../../../components/grayscale-slider/grayscale-slider";
 
 export default function MaterialNodeInspectorRGBInput(
     props: InputProps<RgbParameterInputInfo, [number, number, number]>,
 ) {
     return (
-        <ColorWheel
-            value={props.value()}
-            onChange={props.onChange}
-            onFocus={props.onFocus}
-            onBlur={props.onBlur}
-        />
+        <>
+            <ColorWheel
+                value={props.value()}
+                onChange={props.onChange}
+                onFocus={props.onFocus}
+                onBlur={props.onBlur}
+            />
+
+            <div class="h-4" />
+
+            <GrayscaleSlider
+                value={props.value()[0]}
+                onChange={(value) => props.onChange([value, 0, 0])}
+                onFocus={props.onFocus}
+                onBlur={props.onBlur}
+            />
+
+            <div class="text-sm text-gray-800 mt-2">
+                Note: For now, all textures use RGB format and grayscale values are kept in the red
+                channel.
+            </div>
+        </>
     );
 }