color additions

Author: devhelpr

apps/vps-web/src/app/custom-nodes/classes/core-properties-settings-editor.tsx

@@ -1,6 +1,8 @@
 import { createJSXElement } from '@devhelpr/visual-programming-system';
 
 const COLOR_PRESETS: [number, number, number][] = [
+  [0, 0, 0], // black
+  [255, 255, 255], // white
   // Reds & Pinks
   [214, 39, 40], // d3 red (darker)
   [239, 68, 68], // red-500
@@ -82,7 +84,7 @@ export const CorePropertiesSetupEditor = (
   return (
     <element:Fragment>
       <div class="control-group">
-        <label>Border color</label>
+        <label>Stroke color</label>
         <input
           type="color"
           id="strokeColorPicker"

apps/vps-web/src/app/custom-nodes/classes/draw-grid-node.tsx

@@ -56,6 +56,8 @@ class GridDraw {
   };
 
   private readonly COLOR_PRESETS: [number, number, number][] = [
+    [0, 0, 0], // black
+    [255, 255, 255], // white
     // Reds & Pinks
     [214, 39, 40], // d3 red (darker)
     [239, 68, 68], // red-500

apps/vps-web/src/app/custom-nodes/classes/style.css

@@ -128,7 +128,7 @@
 
 .color-presets {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(9, 1fr);
   gap: 4px;
   margin-top: 8px;
   padding: 6px;