@tremolo-ui/react 0.0.11 → 0.1.0-alpha.0

package/dist/esm/types/components/XYPad/index.d.ts

@@ -1,6 +1,9 @@
 import React, { ReactElement } from 'react';
 import { InputEventOption } from '@tremolo-ui/functions';
-/** @category XYPad */
+/**
+ * Two-dimensional slider component.
+ * @category XYPad
+ */
 export interface ValueOptions {
     value: number;
     min: number;
@@ -25,6 +28,8 @@ export interface XYPadProps {
     disabled?: boolean;
     readonly?: boolean;
     onChange?: (valueX: number, valueY: number) => void;
+    onDragStart?: (valueX: number, valueY: number) => void;
+    onDragEnd?: (valueX: number, valueY: number) => void;
     /** \<XYPadThumb /> | \<XYPadArea /> */
     children?: ReactElement | ReactElement[];
 }

package/dist/esm/types/components/XYPad/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/XYPad/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAGZ,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAEjB,MAAM,uBAAuB,CAAA;AAS9B,sBAAsB;AACtB,MAAM,WAAW,YAAY;IAE3B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACnC;AAED,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,YAAY,CAAA;IACf,CAAC,EAAE,YAAY,CAAA;IAEf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED,sBAAsB;AACtB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAaD;;;GAGG;AACH,eAAO,MAAM,KAAK,sMA0OjB,CAAA;AAED,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/XYPad/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAGZ,YAAY,EAKb,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,gBAAgB,EAEjB,MAAM,uBAAuB,CAAA;AAS9B;;;GAGG;AACH,MAAM,WAAW,YAAY;IAE3B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IAGX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CACnC;AAED,sBAAsB;AACtB,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,YAAY,CAAA;IACf,CAAC,EAAE,YAAY,CAAA;IAEf,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,uCAAuC;IACvC,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAA;CACzC;AAED,sBAAsB;AACtB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AAaD;;;GAGG;AACH,eAAO,MAAM,KAAK,sMA+PjB,CAAA;AAED,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA"}

package/dist/esm/types/hooks/useDrag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,OAAO,EAAE,EACzC,SAAa,EACb,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,GAAG;IACT,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAmEA"}
+{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,OAAO,EAAE,EACzC,SAAa,EACb,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,GAAG;IACT,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAkEA"}

package/dist/esm/types/hooks/useDragWithElement.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+interface Props<T extends Element> {
+    baseElementRef: RefObject<T | null>;
+    onDrag: (normalizedX: number, normalizedY: number) => void;
+    onDragStart?: (normalizedX: number, normalizedY: number) => void;
+    onDragEnd?: (normalizedX: number, normalizedY: number) => void;
+}
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+export declare function useDragWithElement<T extends Element>({ baseElementRef, onDrag, onDragStart, onDragEnd, }: Props<T>): [
+    (div: EventTarget | null) => void,
+    (event: React.PointerEvent<T>) => void
+];
+export {};
+//# sourceMappingURL=useDragWithElement.d.ts.map

package/dist/esm/types/hooks/useDragWithElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragWithElement.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDragWithElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtD,UAAU,KAAK,CAAC,CAAC,SAAS,OAAO;IAC/B,cAAc,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IACnC,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1D,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAChE,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,OAAO,EAAE,EACpD,cAAc,EACd,MAAM,EACN,WAAW,EACX,SAAS,GACV,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG;IACZ,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI;IACjC,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI;CACvC,CAkDA"}

package/dist/esm/types/hooks/useInterval.d.ts

@@ -0,0 +1,2 @@
+export declare function useInterval(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=useInterval.d.ts.map

package/dist/esm/types/hooks/useInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useInterval.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,QAwBrE"}

package/dist/esm/types/hooks/useLongPress.d.ts

@@ -0,0 +1,2 @@
+export declare function useLongPress(callback: () => void, initialDelay?: number, interval?: number): () => void;
+//# sourceMappingURL=useLongPress.d.ts.map

package/dist/esm/types/hooks/useLongPress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLongPress.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useLongPress.ts"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,MAAM,IAAI,EACpB,YAAY,SAAM,EAClB,QAAQ,SAAK,cAsBd"}

package/dist/esm/types/index.d.ts

@@ -13,4 +13,9 @@ export * from './components/Piano';
 export * from './components/Slider';
 export * from './components/WheelObserver';
 export * from './components/XYPad';
+export * from './hooks/useAnimationFrame';
+export * from './hooks/useDrag';
+export * from './hooks/useEventListener';
+export * from './hooks/useInterval';
+export * from './hooks/useLongPress';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,6BAA6B,CAAA;AACpC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,8BAA8B,CAAA;AACrC,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AAErC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,6BAA6B,CAAA;AACpC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,8BAA8B,CAAA;AACrC,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AAErC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAElC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA"}

package/dist/styles/index.css

@@ -1,6 +1,5 @@
 :root {
   --tremolo-theme-color: #4e76e6;
-  --tremolo-theme-color-rgb: 78, 118, 230;
 }
 
 .tremolo-no-select {
@@ -57,42 +56,80 @@
 }
 
 .tremolo-number-input-wrapper {
-  --tremolo-number-input-border-radius: 4px;
-  --tremolo-number-input-stepper-width: 20px;
+  --border-radius: 4px;
+  --stepper-width: 20px;
+  --active-color: var(--tremolo-theme-color);
 
   display: inline-flex;
   flex-direction: row;
   position: relative;
-
-  border-style: solid;
-  border-width: 1px;
-  border-color: #bbb;
-  border-radius: var(--tremolo-number-input-border-radius);
-
   width: 140px;
   height: min-content;
-
-  &:hover {
-    border-color: var(--tremolo-theme-color);
-  }
+  border-style: solid;
+  border-color: #c1c1c1;
+  border-width: 0px;
+  outline: none;
+  transition: all 0.1s;
 
   &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
     border-color: #f34343;
   }
 
-  &:focus-within {
-    border-color: var(--tremolo-theme-color);
-    box-shadow: 0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1);
+  &[data-variant='outline'] {
+    border-width: 1px;
+    border-radius: var(--border-radius);
+
+    &:hover {
+      border-color: #909090;
+    }
+
+    &:focus-within {
+      border-color: var(--active-color);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
+  }
+
+  &[data-variant='filled'] {
+    border-width: 1px;
+    border-radius: var(--border-radius);
+    border-color: transparent;
+    background-color: #edf2f7;
+
+    &:hover {
+      background-color: #e4e9ee;
+    }
+
+    &:focus-within {
+      background-color: inherit;
+      border-color: var(--active-color);
+      box-shadow: 0px 0px 0px 2px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
+  }
+
+  &[data-variant='flushed'] {
+    border-bottom-width: 1px;
+
+    &:hover {
+      border-color: #909090;
+    }
+
+    &:focus-within {
+      border-color: var(--active-color);
+      box-shadow: 0px 2px 0px 0px
+        color-mix(in srgb, var(--active-color) 10%, transparent);
+    }
   }
 
   &[data-stepper='false'] {
-    --tremolo-number-input-stepper-width: 0px;
+    --stepper-width: 0px;
   }
 }
 
 .tremolo-number-input {
   display: block;
-  width: calc(100% - 20px - var(--tremolo-number-input-stepper-width));
+  width: calc(100% - 20px - var(--stepper-width));
   background-color: inherit;
   font: inherit;
   padding: 6px 10px;
@@ -100,7 +137,11 @@
   margin: 0;
   border: none;
   outline: none;
-  appearance: textfield;
+  appearance: none;
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-number-input-stepper {
@@ -110,7 +151,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: var(--tremolo-number-input-stepper-width);
+  width: var(--stepper-width);
   transition: all 0.1s linear;
 
   &[data-dynamic='true'] {
@@ -119,7 +160,11 @@
   }
 }
 
-.tremolo-number-input-wrapper:hover .tremolo-number-input-stepper {
+:is(
+    .tremolo-number-input-wrapper:hover,
+    .tremolo-number-input-wrapper:focus-within
+  )
+  .tremolo-number-input-stepper {
   opacity: 1;
   transform: translateX(0);
 }
@@ -136,7 +181,7 @@
   max-height: 50%;
   user-select: none;
   cursor: pointer;
-  border-top-right-radius: var(--tremolo-number-input-border-radius);
+  border-top-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
     background-color: #3443560e;
@@ -145,6 +190,10 @@
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-number-input-decrement-stepper {
@@ -160,7 +209,7 @@
   max-height: 50%;
   user-select: none;
   cursor: pointer;
-  border-bottom-right-radius: var(--tremolo-number-input-border-radius);
+  border-bottom-right-radius: var(--border-radius);
 
   &[aria-disabled='false']:active {
     background-color: #3443560e;
@@ -169,26 +218,39 @@
   &[aria-disabled='true'] {
     cursor: not-allowed;
   }
+
+  &[aria-readonly='true'] {
+    cursor: not-allowed;
+  }
 }
 
 .tremolo-piano {
   display: inline-block;
   box-sizing: border-box;
   user-select: none;
+  touch-action: none;
   position: relative;
 }
 
 .tremolo-piano-white-key {
+  --bg: white;
+  --color: black;
+  --active-bg: #ccc;
+  --active-color: black;
+
+  box-sizing: border-box;
   position: absolute;
-  background-color: white;
-  color: black;
+  background-color: var(--bg);
+  -webkit-tap-highlight-color: transparent;
+  color: var(--color);
   border: 1px solid #555;
   border-radius: 0px 0px 8px 8px;
   cursor: pointer;
   z-index: 1;
 
   &[data-active='true'] {
-    background-color: #ccc;
+    background-color: var(--active-bg);
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
@@ -197,16 +259,24 @@
 }
 
 .tremolo-piano-black-key {
+  --color: white;
+  --bg: #333;
+  --active-color: white;
+  --active-bg: #666;
+
+  box-sizing: border-box;
   position: absolute;
-  background-color: #333;
-  color: white;
+  background-color: var(--bg);
+  -webkit-tap-highlight-color: transparent;
+  color: var(--color);
   border: 1px solid #555;
   border-radius: 0px 0px 8px 8px;
   cursor: pointer;
   z-index: 2;
 
   &[data-active='true'] {
-    background-color: #666;
+    background-color: var(--active-bg);
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
@@ -222,6 +292,7 @@
 }
 
 .tremolo-piano-key-label {
+  box-sizing: content-box;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -253,7 +324,9 @@
 }
 
 .tremolo-slider-thumb {
-  background: #4e76e6;
+  --color: var(--tremolo-theme-color);
+
+  background: var(--color);
   border-radius: 50%;
   outline: none;
 
@@ -262,7 +335,8 @@
   }
 
   &[aria-readonly='false']:focus {
-    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+    box-shadow: 0px 0px 0px 3px
+      color-mix(in srgb, var(--color) 20%, transparent);
   }
 }
 
@@ -325,6 +399,13 @@
   cursor: pointer;
 }
 
+.tremolo-xy-pad-area {
+  --color: #eee;
+
+  position: relative;
+  background-color: var(--color);
+}
+
 .tremolo-xy-pad-thumb-wrapper {
   position: absolute;
   translate: -50% -50%;
@@ -332,15 +413,18 @@
 }
 
 .tremolo-xy-pad-thumb {
+  --color: var(--tremolo-theme-color);
+
   border-radius: 50%;
   outline: none;
-  background-color: #4e76e6;
+  background-color: var(--color);
 
   &[aria-disabled='true'] {
     background-color: #5d6478;
   }
 
   &:focus {
-    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+    box-shadow: 0px 0px 0px 3px
+      color-mix(in srgb, var(--color) 20%, transparent);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.0.11",
+  "version": "0.1.0-alpha.0",
   "description": "React component library for audio app",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -20,6 +20,7 @@
     "clean:sb": "rimraf ./storybook-static"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^8.6.7",
     "@storybook/addon-essentials": "^8.6.7",
     "@storybook/addon-interactions": "^8.6.7",
     "@storybook/addon-links": "^8.6.7",
@@ -42,7 +43,7 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/functions": "0.0.11",
+    "@tremolo-ui/functions": "0.0.12",
     "clsx": "^2.1.1",
     "zustand": "^5.0.3"
   },

package/src/components/AnimationCanvas/index.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx'
 import {
   ComponentPropsWithoutRef,
-  MutableRefObject,
   ReactElement,
+  RefObject,
   useCallback,
   useEffect,
   useRef,
@@ -29,8 +29,8 @@ export type DrawFunction = (
   // TODO: saving scale and translate
   // context: Omit<CanvasRenderingContext2D, 'save' | 'restore' | 'scale'>,
   context: CanvasRenderingContext2D,
-  width: MutableRefObject<number>,
-  height: MutableRefObject<number>,
+  width: RefObject<number>,
+  height: RefObject<number>,
   count: number,
 ) => void
 
@@ -84,6 +84,7 @@ export function AnimationCanvas({
   init,
   draw,
   className,
+  onContextMenu = (event) => event.preventDefault(),
   ...props
 }: AnimationCanvasProps &
   Omit<
@@ -99,8 +100,8 @@ export function AnimationCanvas({
   const loop = useCallback(
     (
       context: CanvasRenderingContext2D,
-      width: MutableRefObject<number>,
-      height: MutableRefObject<number>,
+      width: RefObject<number>,
+      height: RefObject<number>,
       count: number,
     ) => {
       reqIdRef.current = requestAnimationFrame(() =>
@@ -154,7 +155,13 @@ export function AnimationCanvas({
             ;(context[prop] as DrawingStateValue) = contextMemo[prop]
           }
 
-          if (reduceFlickering && memoContext) {
+          if (
+            reduceFlickering &&
+            memoContext &&
+            memoCanvas &&
+            memoCanvas.width > 0 &&
+            memoCanvas.height > 0
+          ) {
             context.drawImage(memoContext.canvas, 0, 0)
           }
         }
@@ -194,6 +201,7 @@ export function AnimationCanvas({
         width={relativeSize ? 0 : width}
         height={relativeSize ? 0 : height}
         ref={canvasRef}
+        onContextMenu={onContextMenu}
         {...props}
       ></canvas>
       {relativeSize && reduceFlickering && (