react-native-shine 0.7.1 → 0.8.0

package/lib/typescript/src/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-shine",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Fast and efficient way of adding interactive effects that are run entirely on shaders using typeGPU.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Content.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PixelRatio, View, type ViewStyle } from 'react-native';
 import Animated, {
   SensorType,
@@ -15,52 +15,22 @@ import {
 } from 'react-native-wgpu';
 import * as d from 'typegpu/data';
 import type {
+  SampledFlag,
+  StorageFlag,
   TextureProps,
-  // TgpuComputePipeline,
-  TgpuRenderPipeline,
   TgpuRoot,
   TgpuTexture,
 } from 'typegpu';
+import { scheduleOnUI } from 'react-native-worklets';
 import {
-  bufferData,
-  type BufferData,
-  // precomputeColorMaskBindGroupLayout,
-  textureBindGroupLayout,
+  colorMaskArraySchema,
+  precomputeColorMaskBindGroupLayout,
+  precomputeColorMaskOutputBindGroupLayout,
+  rotationSchema,
 } from '../shaders/bindGroupLayouts';
 import useAnimationFrame from '../hooks/useAnimationFrame';
-import { TypedBufferMap } from '../shaders/resourceManagement/bufferManager';
-import {
-  createColorMaskBindGroup,
-  createGlareBindGroup,
-  createReverseHoloDetectionChannelFlagsBindGroup,
-  createRotationValuesBindGroup,
-} from '../shaders/bindGroupUtils';
-import colorMaskFragment from '../shaders/fragmentShaders/colorMaskFragment';
-import { newGlareFragment } from '../shaders/fragmentShaders/glareFragment';
-import {
-  attachBindGroups,
-  blend,
-  createMaskPipeline,
-  createRainbowHoloPipeline as createHoloPipeline,
-  createReverseHoloPipeline,
-  getDefaultTarget,
-} from '../shaders/pipelineSetups';
-import mainVertex from '../shaders/vertexShaders/mainVertex';
 import { subscribeToOrientationChange } from '../shaders/utils';
-import type {
-  ColorAttachment,
-  ColorMask,
-  DeepPartiallyOptional,
-  Effect,
-  GlareOptions,
-  PipelineAttachmentPair,
-} from '../types/types';
-import {
-  colorMasksToTyped,
-  createColorMasks,
-  createGlareOptions,
-  createReverseHoloDetectionChannelFlags,
-} from '../types/typeUtils';
+import type { ColorMask } from '../types/types';
 import type { V2d, V3d } from '../types/vector';
 import {
   addV3d,
@@ -77,19 +47,19 @@ import {
   zeroV3d,
 } from '../utils/vector';
 import { baseTextureFragment } from '../shaders/fragmentShaders/baseTextureFragment';
-// import { precomputeColorMask } from '../shaders/computeShaders/precomputeColorMask';
+import { PipelineManager } from '../shaders/resourceManagement/pipelineMap';
+import { blend, type Effect } from '../enums/effectPresets';
+import { createColorMasks } from '../types/typeUtils';
+import { createColorMaskBindGroup } from '../shaders/bindGroupUtils';
+import colorMaskFragment from '../shaders/fragmentShaders/colorMaskFragment';
+import { precomputeColorMask } from '../shaders/computeShaders/precomputeColorMask';
 
 export interface SharedProps {
   width: number;
   height: number;
-  glareOptions?: Partial<GlareOptions>;
-  enableGlare?: boolean;
-  highlightColors?: DeepPartiallyOptional<ColorMask, 'baseColor'>[];
+  highlightColors?: ColorMask[];
   isHighlightInclusive?: boolean;
   lightPosition?: SharedValue<V2d>;
-  // addReverseHolo?: boolean;
-  // reverseHoloDetectionChannelOptions?: Partial<ReverseHoloDetectionChannelFlags>;
-  // addHolo?: boolean;
   translateViewIn3d?:
     | boolean
     | {
@@ -105,27 +75,13 @@ interface ContentProps extends SharedProps {
   root: TgpuRoot;
   imageTexture: TgpuTexture<TextureProps>;
   maskTexture?: TgpuTexture<TextureProps>;
-}
-
-interface PipelineMap {
-  baseTexture: TgpuRenderPipeline;
-  glare: TgpuRenderPipeline | void;
-  colorMask: TgpuRenderPipeline | void;
-  mask: TgpuRenderPipeline | void;
-  reverseHolo: TgpuRenderPipeline | void;
-  holo: TgpuRenderPipeline | void;
-  // precomputeColorMaskPipeline: TgpuComputePipeline | void;
+  colorMaskStorageTexture?: TgpuTexture<any> & StorageFlag;
 }
 
 export default function Content({
-  // addHolo,
-  // addReverseHolo,
-  // reverseHoloDetectionChannelOptions,
-  effects,
+  effects = [{ name: 'glare' }],
   highlightColors,
   isHighlightInclusive = true,
-  glareOptions,
-  enableGlare = true,
   height,
   imageTexture,
   maskTexture,
@@ -135,26 +91,19 @@ export default function Content({
   translateViewIn3d = false,
   style,
   containerStyle,
+  colorMaskStorageTexture,
 }: ContentProps) {
   const { device } = root;
   // const { ref, context } = useGPUContext();
   const ref = useRef<CanvasRef>(null);
   const [context, setContext] = useState<RNCanvasContext | null>(null);
-  // const context = ref.current!.getContext('webgpu')!;
 
   useEffect(() => {
     if (ref) setContext(ref.current?.getContext('webgpu')!);
   }, [ref]);
 
   const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-  const renderRef = useRef<() => void>(null);
-
-  //changing canvas size to prevent blur
-  const pixelRatio = PixelRatio.get();
-  const size = { x: width, y: height };
-  const pixelSize = transformV2d(scaleV2d(size, pixelRatio), (v) =>
-    Math.max(1, Math.round(v))
-  );
+  const isCanvasReady = useSharedValue(true);
 
   const landscape = useSharedValue<boolean>(false);
   const rotation = useSharedValue<V3d>(zeroV3d); // final GPU offsets
@@ -166,9 +115,10 @@ export default function Content({
   const calibrated = useSharedValue<boolean>(false);
   const gravitySensor = useAnimatedSensor(SensorType.GRAVITY, { interval: 20 });
 
-  const bufferMap = useMemo(
-    () => new TypedBufferMap<BufferData>(bufferData),
-    []
+  const pipelineCache = useMemo(
+    () =>
+      new PipelineManager(root, presentationFormat, imageTexture, maskTexture),
+    [imageTexture, maskTexture, presentationFormat, root]
   );
 
   const animatedStyle = useAnimatedStyle(() => {
@@ -255,11 +205,88 @@ export default function Content({
     );
   });
 
-  // Render loop
+  //TODO: is this needed here?
+  const effectsCache =
+    JSON.stringify(effects) + JSON.stringify(highlightColors);
+
+  useEffect(() => {
+    const initPipelines = async () => {
+      pipelineCache.pipelinesMap.clear();
+
+      pipelineCache.addPipeline(baseTextureFragment);
+
+      effects.forEach(({ name, options }) => {
+        pipelineCache.addPipelineWithBuffer(name, options);
+      });
+
+      //TODO: move to effect definition
+      if (highlightColors) {
+        const colorMaskBuffer = pipelineCache.buffersMap.syncUniformBuffer(
+          colorMaskArraySchema,
+          createColorMasks(highlightColors, isHighlightInclusive)
+        );
+        const colorMaskBindGroup = createColorMaskBindGroup(
+          root,
+          colorMaskBuffer
+        );
+
+        if (colorMaskStorageTexture) {
+          const precomputeColorMaskBindGroup = root.createBindGroup(
+            precomputeColorMaskBindGroupLayout,
+            {
+              colorMaskStorage: colorMaskStorageTexture as TgpuTexture<{
+                size: readonly number[];
+                format: 'rgba8unorm';
+              }> &
+                StorageFlag,
+            }
+          );
+          const precomputeColorMaskOutputBindGroup = root.createBindGroup(
+            precomputeColorMaskOutputBindGroupLayout,
+            {
+              colorMaskOutput: colorMaskStorageTexture as TgpuTexture<{
+                size: readonly number[];
+                format: 'rgba8unorm';
+              }> &
+                SampledFlag,
+            }
+          );
+          pipelineCache.addComputePipeline(precomputeColorMask, [
+            colorMaskBindGroup,
+            precomputeColorMaskBindGroup,
+          ]);
+          await pipelineCache.runComputePipeline(precomputeColorMask);
+          // colorMaskOutputTexture.write(colorMaskStorageTexture);
+
+          pipelineCache.addPipeline(
+            colorMaskFragment,
+            [colorMaskBindGroup, precomputeColorMaskOutputBindGroup],
+            blend
+          );
+        }
+      }
+    };
+    initPipelines();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    effectsCache,
+    isHighlightInclusive,
+    pipelineCache,
+    root,
+    colorMaskStorageTexture,
+  ]);
+
   useEffect(() => {
-    if (!context) return;
+    if (!context) {
+      return;
+    }
+    // changing canvas size to prevent blur
+    const pixelRatio = PixelRatio.get();
+    const size = { x: width, y: height };
+    const pixelSize = transformV2d(scaleV2d(size, pixelRatio), (v) =>
+      Math.max(1, Math.round(v))
+    );
 
-    //this sets the underlying resolution of the canvas to prevent blurriness
     const canvasElement = context.canvas;
 
     if (
@@ -269,230 +296,33 @@ export default function Content({
       canvasElement.width = pixelSize.x;
       canvasElement.height = pixelSize.y;
     }
-
-    context.configure({
-      device,
-      format: presentationFormat,
-      alphaMode: 'premultiplied',
+    //this is a workaround to prevent error logs but it should be handled by webgpu
+    scheduleOnUI(() => {
+      'worklet';
+      context.configure({
+        device,
+        format: presentationFormat,
+        alphaMode: 'premultiplied',
+      });
+      isCanvasReady.value = true;
     });
+  }, [context, device, height, presentationFormat, width, isCanvasReady]);
 
-    // const sampler = device.createSampler({
-    //   magFilter: 'linear',
-    //   minFilter: 'linear',
-    //   mipmapFilter: 'linear',
-    // });
-
-    const sampler = root['~unstable'].createSampler({
-      magFilter: 'linear',
-      minFilter: 'linear',
-      mipmapFilter: 'linear',
-    }) as any as GPUSampler; //TODO: delete this cast when TgpuFixedSampler gets exposed
-
-    const imageTextureBindGroup = root.createBindGroup(textureBindGroupLayout, {
-      texture: root.unwrap(imageTexture).createView(),
-      sampler,
-    });
-
-    const rotationBuffer = bufferMap.addBuffer(root, 'rotation', d.vec3f(0.0));
-
-    const rotationBindGroup = createRotationValuesBindGroup(
-      root,
-      rotationBuffer
-    );
-
-    const glareBuffer = bufferMap.addBuffer(
-      root,
-      'glare',
-      createGlareOptions(glareOptions ?? {})
-    );
-    const glareBindGroup = createGlareBindGroup(root, glareBuffer);
-
-    const colorMaskBuffer = bufferMap.addBuffer(
-      root,
-      'colorMask',
-      colorMasksToTyped(
-        createColorMasks(
-          highlightColors ?? [{ baseColor: [-20, -20, -20], useHSV: false }]
-        ),
-        highlightColors && highlightColors.length
-          ? isHighlightInclusive
-          : !isHighlightInclusive
-      )
-    );
-    const colorMaskBindGroup = createColorMaskBindGroup(root, colorMaskBuffer);
-
-    const reverseHoloEffect = effects
-      ? effects.find((e) => e.name === 'reverseHolo')
-      : undefined;
-    const reverseHoloDetectionChannelFlagsBuffer = bufferMap.addBuffer(
-      root,
-      'reverseHoloDetectionChannelFlags',
-      createReverseHoloDetectionChannelFlags(reverseHoloEffect?.options)
-    );
-    const reverseHoloDetectionChannelFlagsBindGroup =
-      createReverseHoloDetectionChannelFlagsBindGroup(
-        root,
-        reverseHoloDetectionChannelFlagsBuffer,
-        glareBuffer
-      );
-
-    const holoEffect = effects
-      ? effects.find((e) => e.name === 'holo')
-      : undefined;
-
-    // const precomputeColorMaskBindGroup = root.createBindGroup(
-    //   precomputeColorMaskBindGroupLayout,
-    //   {
-    //     colorMaskTextureDst: colorMaskStorageTexture,
-    //   }
-    // );
-
-    const pipelineMap: PipelineMap = {
-      baseTexture: attachBindGroups(
-        root['~unstable']
-          .withVertex(mainVertex, {})
-          .withFragment(
-            baseTextureFragment,
-            getDefaultTarget(presentationFormat)
-          )
-          .createPipeline(),
-        [imageTextureBindGroup, rotationBindGroup]
-      ),
-      glare: attachBindGroups(
-        root['~unstable']
-          .withVertex(mainVertex, {})
-          .withFragment(newGlareFragment, getDefaultTarget(presentationFormat))
-          .createPipeline(),
-        [
-          imageTextureBindGroup,
-          rotationBindGroup,
-          glareBindGroup,
-          colorMaskBindGroup,
-        ]
-      ),
-      colorMask: attachBindGroups(
-        root['~unstable']
-          .withVertex(mainVertex, {})
-          .withFragment(
-            colorMaskFragment,
-            getDefaultTarget(presentationFormat, blend)
-          )
-          .createPipeline(),
-        [imageTextureBindGroup, colorMaskBindGroup, rotationBindGroup]
-      ),
-      mask: createMaskPipeline(
-        root,
-        maskTexture,
-        [imageTextureBindGroup, rotationBindGroup],
-        sampler,
-        presentationFormat
-      ),
-      reverseHolo: createReverseHoloPipeline(
-        root,
-        maskTexture,
-        [
-          imageTextureBindGroup,
-          rotationBindGroup,
-          reverseHoloDetectionChannelFlagsBindGroup,
-        ],
-        sampler,
-        presentationFormat
-      ),
-      holo: createHoloPipeline(
-        root,
-        imageTexture,
-        [rotationBindGroup],
-        sampler,
-        presentationFormat
-      ),
-      // precomputeColorMaskPipeline: attachBindGroups(
-      //   root['~unstable'].withCompute(precomputeColorMask).createPipeline(),
-      //   [
-      //     imageTextureBindGroup,
-      //     colorMaskBindGroup,
-      //     precomputeColorMaskBindGroup,
-      //   ]
-      // ),
-    };
-
-    const modifyBuffers = () => {
-      rotationBuffer.write(d.vec3f(...componentsFromV3d(rotation.value)));
-    };
-
-    const renderPipelines = () => {
-      const view = context.getCurrentTexture().createView();
-      const initialAttachment: ColorAttachment = {
-        view,
-        clearValue: [0, 0, 0, 0],
-        loadOp: 'clear',
-        storeOp: 'store',
-      };
-      const loadingAttachment: ColorAttachment = {
-        view,
-        clearValue: [0, 0, 0, 0],
-        loadOp: 'load',
-        storeOp: 'store',
-      };
-
-      const {
-        baseTexture,
-        glare,
-        mask,
-        colorMask,
-        holo,
-        reverseHolo,
-        // precomputeColorMaskPipeline,
-      } = pipelineMap;
-
-      //TODO: delete this from here after testing
-      // precomputeColorMaskPipeline!.dispatchWorkgroups(8, 8);
-
-      const pairs: PipelineAttachmentPair[] = [
-        [baseTexture, initialAttachment],
-      ];
-
-      if ((glareOptions || enableGlare) && glare) {
-        pairs.push([glare, loadingAttachment]);
-      }
-      if (mask) pairs.push([mask, loadingAttachment]);
-      if (reverseHoloEffect && reverseHolo)
-        pairs.push([reverseHolo, loadingAttachment]);
-      if (holoEffect && holo) pairs.push([holo, loadingAttachment]);
-      if (colorMask) pairs.push([colorMask, loadingAttachment]);
-
-      pairs.forEach(([pipeline, attachment]) =>
-        pipeline.withColorAttachment(attachment).draw(6)
-      );
-    };
-
-    const presentContext = () => context.present();
+  const frameCallback = useCallback(() => {
+    if (!context || !isCanvasReady.value) {
+      return;
+    }
 
-    renderRef.current = () => {
-      modifyBuffers();
-      renderPipelines();
-      presentContext();
-    };
+    pipelineCache.buffersMap
+      .get(rotationSchema)
+      ?.write(d.vec3f(...componentsFromV3d(rotation.value)));
 
-    // const res = tgpu.resolve({ externals: { reverseHoloFragment } });
-    // console.log('reverseHoloFragment resolve:', res);
-  }, [
-    device,
-    context,
-    root,
-    presentationFormat,
-    imageTexture,
-    maskTexture,
-    rotation,
-    bufferMap,
-    glareOptions,
-    enableGlare,
-    highlightColors,
-    pixelSize,
-    effects,
-    isHighlightInclusive,
-  ]);
+    const view = context.getCurrentTexture().createView();
+    pipelineCache.renderPipelines(view);
+    context.present();
+  }, [context, pipelineCache, rotation, isCanvasReady]);
 
-  useAnimationFrame(() => renderRef.current?.());
+  useAnimationFrame(frameCallback);
 
   return (
     <View

package/src/components/Shine.tsx

@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useDevice } from 'react-native-wgpu';
-import type { TgpuTexture } from 'typegpu';
+import type { StorageFlag, TgpuTexture } from 'typegpu';
 import { getOrInitRoot } from '../roots';
-import { loadBitmap } from '../shaders/resourceManagement/textures';
+import {
+  createTexture,
+  loadBitmap,
+} from '../shaders/resourceManagement/textures';
 import Content, { type SharedProps } from './Content';
+import getBitmapFromURI from '../shaders/resourceManagement/bitmaps';
 
 export interface ShineProps extends SharedProps {
   imageURI: string;
@@ -15,12 +19,24 @@ export function Shine({ imageURI, maskURI, ...props }: ShineProps) {
   const root = device && getOrInitRoot(device);
   const [imageTexture, setImageTexture] = useState<TgpuTexture>();
   const [maskTexture, setMaskTexture] = useState<TgpuTexture>();
-  // const [colorMaskStorageTexture, colorMaskStorageTexture] =
-  //   useState<TgpuTexture>();
+  const [colorMaskStorageTexture, setColorMaskStorageTexture] = useState<
+    TgpuTexture<any> & StorageFlag
+  >();
   //TODO: complete the work with the compute shader, try out the shader
 
   useEffect(() => {
-    if (root) loadBitmap(root, imageURI, setImageTexture);
+    if (root) {
+      loadBitmap(root, imageURI, setImageTexture);
+      const makeStorage = async () => {
+        const bitmap = await getBitmapFromURI(imageURI);
+        const texture = (await createTexture(root, bitmap)).$usage(
+          'storage',
+          'sampled'
+        );
+        setColorMaskStorageTexture(texture);
+      };
+      makeStorage();
+    }
   }, [root, imageURI]);
 
   useEffect(() => {
@@ -40,6 +56,7 @@ export function Shine({ imageURI, maskURI, ...props }: ShineProps) {
         root={root}
         imageTexture={imageTexture}
         maskTexture={maskTexture}
+        colorMaskStorageTexture={colorMaskStorageTexture}
       />
     )
   );

package/src/components/ShineGroup.tsx

@@ -15,12 +15,10 @@ type ShineGroupProps = PropsWithChildren<Partial<ShineProps>>;
 
 export function ShineGroup({
   children,
-  glareOptions,
   highlightColors,
   maskURI,
   lightPosition: touchPosition,
   effects,
-  enableGlare = true,
   isHighlightInclusive = true,
   translateViewIn3d = false,
   containerStyle,
@@ -79,13 +77,11 @@ export function ShineGroup({
         <Shine
           {...sizeFromV2d(size)}
           imageURI={capturedURI}
-          glareOptions={glareOptions}
           highlightColors={highlightColors}
           maskURI={maskURI}
           lightPosition={touchPosition}
           effects={effects}
           translateViewIn3d={translateViewIn3d}
-          enableGlare={enableGlare}
           containerStyle={containerStyle}
           isHighlightInclusive={isHighlightInclusive}
           style={style}

package/src/enums/colorPresets.ts

@@ -1,4 +1,4 @@
-import type { vec3 } from '../types/types';
+import type { ColorMask, vec3 } from '../types/types';
 
 export const ColorPresets = {
   // --- Primary & Secondary ---
@@ -39,3 +39,61 @@ export const ColorPresets = {
   BEIGE: [245, 245, 220], // #F5F5DC
   POTATO: [222, 184, 135], // #DEB887
 } as const satisfies Record<string, vec3>;
+
+export const HSVColorsPreset = {
+  RED: { hueMin: 330, hueMax: 15 }, // #FF0022
+  ORANGE: { hueMin: 15, hueMax: 45 }, // #FF8000
+  YELLOW: { hueMin: 45, hueMax: 75 }, // #FFFF00
+  GREEN: { hueMin: 75, hueMax: 165 }, // #00FF00
+  BLUE: { hueMin: 165, hueMax: 255 }, // #0080FF
+  VIOLET: { hueMin: 255, hueMax: 285 }, // #8000FF
+  MAGENTA: { hueMin: 285, hueMax: 330 }, // #FF00D5
+
+  TRUE_RED: { hueMin: 345, hueMax: 15 }, // #FF0000
+  CRIMSON: { hueMin: 330, hueMax: 350 }, // #FF0055
+  ROSE: { hueMin: 315, hueMax: 335 }, // #FF0095
+  PINK: { hueMin: 300, hueMax: 330 }, // #FF00BF
+
+  CORAL: { hueMin: 10, hueMax: 30 }, // #FF5500
+  TRUE_ORANGE: { hueMin: 20, hueMax: 45 }, // #FF8C00
+  AMBER: { hueMin: 35, hueMax: 50 }, // #FFB300
+  TRUE_YELLOW: { hueMin: 45, hueMax: 65 }, // #FFD500
+  GOLD: { hueMin: 40, hueMax: 55 }, // #FFCC00
+
+  LIME: { hueMin: 65, hueMax: 90 }, // #BFFF00
+  CHARTREUSE: { hueMin: 70, hueMax: 100 }, // #95FF00
+  TRUE_GREEN: { hueMin: 90, hueMax: 140 }, // #15FF00
+  EMERALD: { hueMin: 130, hueMax: 160 }, // #00FF6A
+  MINT: { hueMin: 140, hueMax: 170 }, // #00FF95
+
+  TEAL: { hueMin: 160, hueMax: 180 }, // #00FFD5
+  CYAN: { hueMin: 170, hueMax: 195 }, // #00F2FF
+  TURQUOISE: { hueMin: 165, hueMax: 190 }, // #00FFF2
+  AZURE: { hueMin: 190, hueMax: 215 }, // #009FFF
+  TRUE_BLUE: { hueMin: 210, hueMax: 240 }, // #0040FF
+  ROYAL_BLUE: { hueMin: 225, hueMax: 250 }, // #0011FF
+  INDIGO: { hueMin: 240, hueMax: 260 }, // #2B00FF
+
+  TRUE_VIOLET: { hueMin: 250, hueMax: 280 }, // #6A00FF
+  PURPLE: { hueMin: 260, hueMax: 290 }, // #9500FF
+  TRUE_MAGENTA: { hueMin: 285, hueMax: 315 }, // #FF00FF
+  FUCHSIA: { hueMin: 295, hueMax: 325 }, // #ff00d5ff
+
+  GRAY: { hueMin: 0, hueMax: 360, saturationMax: 0.2, saturationMin: 0 }, // #738c8cff
+  WHITE: {
+    hueMin: 0,
+    hueMax: 360,
+    saturationMax: 1,
+    saturationMin: 0,
+    lightnessMax: 1,
+    lightnessMin: 0.9,
+  }, // #d9f2f2ff
+  BLACK: {
+    hueMin: 0,
+    hueMax: 360,
+    saturationMax: 1,
+    saturationMin: 0,
+    lightnessMax: 0.2,
+    lightnessMin: 0,
+  }, // #0d2626ff
+} as const satisfies Record<string, ColorMask>;